electron入门学习文档.ppt

1、electron,环境安装,第一步安装Node.js 然后使用NPM全局安装electron npm i electron -g,Quick start,项目大致的文件结构如右图所示 package.json是node项目的配置文件 main.js是electron的入口 index.html就是应用的文件,package.json name : your-app, /应用名称 version : 0.1.0, /版本号 main : main.js /electron的入口文件 ,const app, BrowserWindow = require(electron) let win fun

2、ction createWindow () win = new BrowserWindow(width: 800, height: 600) / Create the browser window. win.loadURL(file:/$_dirname/html/login.html)/ and load the index.html of the app. win.webContents.openDevTools() / Open the DevTools. win.on(closed, () = win = null ) app.on(ready, createWindow),app.o

3、n(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 its common to re-create a window in the app when the / dock icon is clicke

4、d and there are no other windows open. if (win = null) createWindow() ), Hello World! Hello World! We are using node document.write(process.versions.node), Chrome document.write(process.versions.chrome), and Electron document.write(process.versions.electron). ,运行,用CMD转到项目文件下运行 electron .,electron 和

5、jquery 冲突解决方案,1 手动导入$ window.$ = window.jQuery = require(jquery.js); 2 在导入前后添加代码 if (typeof module = object) window.module = module; module = undefined; if (window.module) module = window.module; ,使用node拓展,以Serialport为例 在项目下运行 npm install Serialport -save-dev 在JS中直接调用 var SerialPort = require(serial

6、port); SerialPort.list(err, ports) = ports.forEach(port) = console.log(Name); ) );,由于serialport是依赖C的插件，所以没有以electron版本编译会报错,首先全局安装node-gyp npm install node-gyp -g 转到serialport目录下 cd node_modules/serialport 然后编译 node-gyp rebuild -target=1.4.6 -arch=ia32 -dist-url=https:/atom.io/download/atom-shell,打包,使用electron-packager来打包,electron-packager ./app HelloWorld -out ./OutApp -pla