公司由于开发需要,刚开始接触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) 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 )}