首次使用electron心得

公司由于开发需要，刚开始接触electron，做了个简单的桌面应用！下面总结下在开发过程中遇到的一些问题。使用前必须先去了解下electron,可以去官网查看，官网链接：https://electronjs.org/，熟悉API,对开发很有帮助！

electron使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用!
electron 分主进程 和渲染进程 ，主进程一般是用来控制程序的启动，例如app启动 ，创建新窗口，打开新链接等 ， 渲染进程就是我们常说的web界面。我们最关注的的应该是进程之间如何通信，可以通过ipcMain 与 ipcRender 进行通信。

1. electron的使用
可以去 https://github.com/electron/electron-quick-start 下载electron的demo，下载完后安装依赖npm install ,完成后执行npm start 项目就起来了 ，到了这步是不是感觉自己挺强大的 ，哈哈哈！ 这个可以帮助你快速了解electron。

![目录结构](https://img-blog.csdnimg.cn/2019112215064391.png)

main.js --------- 主进程，入口js
index.html ----------入口html
preload.js ----------- 页面预加载的js，里面可以使用node的api( 如 ：require)
renderer.js ---------index.html 引用的js

2.实战
创建新窗口 ： new BrowserWindow({})
无边框窗口： 添加 frame : false
默认打开调试： 添加 mainWindow.webContents.openDevTools()
关闭调试 ：设置 webPreferences {（devTools ：false ）}
渲染进程可以使用nodeAPI : 设置 webPreferences {（nodeIntegration: true）} //高版本electron默认为 false
重新打开程序 ： app.relaunch({ args: process.argv.slice(1).concat([’–relaunch’]) })
app.exit(0)

进程间通信 ：
渲染进程 ： const ipc = require(‘electron’).ipcRenderer;
ipc.send( ’ open ’ , data );
主进程 ： const ipc = require(‘electron’).ipcMain;
ipc.on(‘open’ , function(data){})

更多 api 参考官网 ，官网介绍的也比较详细。

3.工作中遇到的问题

1. 打包方式两种 ：
   (1) electron-packager
   package.json : 设置 ‘electron-packager . name --win --out …/name --arch=x64 --app-version=1.0.0 --electron-version=2.0.0 --icon=name.ico --overwrite’
   (2)electron-builder
   electron-builder --win --x64
   官网推荐使用第二种

2.渲染进程使用 require 报错

解决办法 ：在新建窗口时 设置 webPreferences {（nodeIntegration: true ）}