安装NodeJS
目前支持的最新版本为NodeJS 7.4.0,因为安装过程比较简单所以这里省略了。
安装Electron
npm install -g electron
创建项目工程
使用WebStorm创建一个Empty Project.
用npm init初始化这个项目。初始化后,package.json内容如下
{ "name": "facerecognition_test", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron .", "pack": "electron-packager --electron-version=16.11 .", "build": "build " }, "author": "Chen Haifeng", "license": "ISC" }添加文件index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>人脸识别测试程序</title> </head> <body> <button id="CAMOpen" name="CAMOpen">调用人脸识别DLL</button> </body> </html> 添加文件main.js const {app, BrowserWindow} = require('electron') const path = require('path') const url = require('url') //import url from "url" // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win function createWindow () { console.log('createWindow') // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // Open the DevTools. win.webContents.openDevTools() // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null }) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { console.log('activate') createWindow() } }) // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here. 测试项目
如果electron是采用全局安装的,使用electron .来运行项目。
如果electron是安装在项目的node_modules目录,使用.\node_modules\.bin\electron .来运行项目。
因为在package.json文件中做了配置,所以这里可以使用npm start运行项目。
打包项目
安装electron-packager
npm install -g electron-packager
electron-packager --electron-version=1.6.11 .
生成结果如下
运行一下打包后的exe程序
制作平台安装包
npm install -g electron-builder
执行命令build, 整个过程比较漫长。
自动更新下次补充。