electron开发
生活随笔
收集整理的這篇文章主要介紹了
electron开发
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
安裝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" }
添加文件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.
測試項目
如果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， 整個過程比較漫長。?
自動更新下次補充。
總結
以上是生活随笔為你收集整理的electron开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一张图看懂小程序全生态
- 下一篇： NodeJS开发c++扩展模块