electron开发
安裝NodeJS
目前支持的最新版本為NodeJS 7.4.0，因?yàn)榘惭b過程比較簡單所以這里省略了。
安裝Electron
npm install -g electron
創(chuàng)建項(xiàng)目工程
使用WebStorm創(chuàng)建一個(gè)Empty Project.
用npm init初始化這個(gè)項(xiàng)目。初始化后，package.json內(nèi)容如下
{"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" }
添加文件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 winfunction 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 + Qif (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.
測試項(xiàng)目
如果electron是采用全局安裝的，使用electron .來運(yùn)行項(xiàng)目。
如果electron是安裝在項(xiàng)目的node_modules目錄，使用.\node_modules\.bin\electron .來運(yùn)行項(xiàng)目。
因?yàn)樵趐ackage.json文件中做了配置，所以這里可以使用npm start運(yùn)行項(xiàng)目。
打包項(xiàng)目
安裝electron-packager
npm install -g electron-packager
electron-packager --electron-version=1.6.11 .
生成結(jié)果如下
運(yùn)行一下打包后的exe程序
制作平臺(tái)安裝包
npm install -g electron-builder
執(zhí)行命令build， 整個(gè)過程比較漫長。?
自動(dòng)更新下次補(bǔ)充。
總結(jié)
以上是生活随笔為你收集整理的electron开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一张图看懂小程序全生态
- 下一篇： Hyperledger Fabric 1