electron入门学习文档.ppt

electron,环境安装,第一步安装Node.js然后使用NPM全局安装electronnpm 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 winfunction 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.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 its 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)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 和 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(serialport);SerialPort.list(err,ports)=ports.forEach(port)=console.log(Name););,由于serialport是依赖C的插件，所以没有以electron版本编译会报错,首先全局安装node-gypnpm 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-platform=win32-arch=ia32-electron-version=1.4.6-asar参数分别是项目路径 项目名称 输出路径 操作系统 操作系统位数 electron 版本,