Electron简单上手
Electron是Github 发布的跨平台桌面应用开发工具,基于Web技术(NodeJS + Chromium)
安装
推荐使用npm
安装
1 2 3 4 5 npm install electron-prebuilt -g npm install electron-prebuilt --save-dev
创建应用 Electron项目的基本结构如下:
1 2 3 4 your-app/ ├- package.json ├- main.js └- index.html
其中package.json
的格式和nodejs
的模块中package.json
完全相同,由main
字段指定应用的起始脚本,用来运行主进程。下面是一个package.json
的例子:
1 2 3 4 5 { "name" : "your-app" , "version" : "0.1.0" , "main" : "main.js" }
提示 :如果main
字段不存在,Electron会尝试加载index.js
。 在main.js
中应该创建窗体并且处理系统事件,下面是一个经典的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 'use strict' ;const electron = require ('electron' );const app = electron.app ; const BrowserWindow = electron.BrowserWindow ; var mainWindow = null ;app.on ('window-all-closed' , function ( ) { if (process.platform != 'darwin' ) { app.quit (); } }); app.on ('ready' , function ( ) { mainWindow = new BrowserWindow ({width : 800 , height : 600 }); mainWindow.loadURL ('file://' + __dirname + '/index.html' ); mainWindow.webContents .openDevTools (); mainWindow.on ('closed' , function ( ) { mainWindow = null ; }); });
最后index.html
是你将看到的web页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html > <html > <head > <meta charset ="UTF-8" > <title > Hello World!</title > </head > <body > <h1 > Hello World!</h1 > We are using node <script > document .write (process.versions .node )</script > , Chrome <script > document .write (process.versions .chrome )</script > , and Electron <script > document .write (process.versions .electron )</script > . </body > </html >
运行 在应用所在的目录,即package.json
所在的目录,运行一下命令: