Electron 桌面应用开发框架快速入门

今天上午也是和朋友打了整整半天游戏,下午感觉好不充实, 咱们就一起学习一下Electron 桌面应用开发框架

(好久不玩,不会玩了, 幸好小琳和涛哥还在玩)

我们话不多说, 开始今天下午的学习

https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
Electron 文档
什么是 Electron?

它是一款应用广泛的跨平台的桌面应用开发框架, 其实在一些桌面应用中, 比如vscode, qq等等, 都有该技术的参与, Electron 的本质是结合了Chromium与Node.js, 我们可以使用HTML, css, js等 Web技术来构建桌面应用程序

Electron 流程模型

Electron的核心就是围绕主进程, 那么这个主进程是什么呢, 其实就是一个.js文件, 但是这个js文件是一个非常纯粹的Node环境, 在Node中的任何一个API, 这里都是可以调用的, 是基于Node环境去运行的主进程, 就比如我们可以在里面调用fs模块进行文件的操作等等, 那这个js文件除了能使用Node的API, 还能干啥呢? 主进程的存在最主要的目的就是管理渲染进程, 那么, 渲染进程进程又是什么呢? 我们可以理解为窗口, 一个窗口背后就对应一个渲染进程, 在这里, 渲染进程就是浏览器环境了, 那么一个应用的组成不可能只有一个窗口, 所以, 主进程可以管理多个渲染进程, 在这里还需要注意的一点就是, 比如: 我们渲染进程想要操作文件, 但是, 又是浏览器环境, 不能使用Node的API, 这时候, 主进程是Node环境, 双方就可以进行通信, 光有这些还不是主进程的厉害之处, 他可以调用底层原生的API

快速入门

按照官方的文档, 我们需要查看一下是否安装了Node和npm

查看完之后, 我们创建一个文件夹, 然后执行npm init

在文档中, 有这么一个提示, 就是作者还有描述需要填写上, 是打包的必填项, 并指定入口文件是main.js

我们将其补齐

随后, 就需要安装Electron了

npm i electron -D
安装完成之后, 我们就可以看到了

安装完成之后, 我们需要在scripts中添加一个start命令

现在, 需要在主目录下创建一个入口文件, 并打印123

我们运行主进程

npm start

接下来, 我们来说主进程main.js中如何来写

首先呢, 我们需要从electron中引入两个模块, 分别是app模块和BrowserWindow模块, 这两个模块分别是什么作用呢? app模块, 它其实控制的是应用程序的事件生命周期, BrowserWindow模块, 主要是创建的管理应用程序窗口

接下来, 我们调用app的on方法, 在app准备好之后, 我们来创建一个宽400高400的窗口

我们再次执行npm start命令

这时, 这个窗口就展示出来了

我们可不可以加载一个在线的地址,比如这个框架的网址, 那肯定是可以的

其实BrowserWindow有很多配置项, 比如, 我们可以通过配置隐藏自带的工具栏,或者打开位置,置顶等等

我们平常开发不可能写好在线页面, 在这里加载吧, 所以, 我们接下来需要了解, 如何加载本地页面

如何加载本地页面?

这时候, 我们可以在根目录中创建一个pages, 在里面创建一个index.html和index.css

页面, 创建好之后, 我们加载一下本地页面, 需要使用loadFile加载本地文件

其实呢, 这个白色窗口就是一个浏览器, 我们也可以打开控制台(ctrl+shift+i)

这个时候, 大家可能会看到自动填充警告, 大家可以忽略掉, 官方人员说不会影响开发,他们也暂时不会做出修复

但是控制台, 提示了一个警告, 是内容安全警告(csp)

我们打开mdn, 搜索csp就可以看到

我们按照mdn提示, 加一个meta标签

这时候F5刷新一下就看不到警告了

接下来, 需要我们完善窗口行为, 为什么要完善呢, 其实就是, 我们写一套代码, 在windows和macOs都可以适配到, 只是说我们在windows上打开一个浏览器, 开了很多标签页, 当标签页全部关闭, 浏览器也就跟着关闭了, 但是在macOs中则不一样, 所以, 我们需要完善窗口行为

我们来理解一下上面的代码

第一个是当窗口全部管理, 应用退出

第二个则是当窗口被激活的时候, 当前应用没有窗口, 则创建窗口

那里写了createWindow方法调用, 我们也可以将窗口创建封装成函数直接使用

完善窗口行为, 我们就完善好了

但是呢, 每次查看效果都需要我们输入npm start重新运行进程, 所以, 我们配置一下自动重启

配置重启

需要我们安装一个nodemon

npm i nodemon -D
安装完成之后, 我们改一下启动

这时候, 再重新运行npm start, 比如我们添加了打印123, 点击保存, 就会重新运行, 不用我们再次手动输入命令了

但是呢, 我去修改html的东西, 并没有被监视到, 所以, 在此处还需要加一个nodemon配置文件, 配置需要监视哪些文件, 我们在主目录里创建一个nodemon.json文件

上述的配置是什么意思呢? ignore是忽略文件, watch是侦听所有文件, ext包含了html, css, js, restartable是一个命令, 比如我们在终端输入r, 就会立即重启应用

重启应用说完之后, 我们再了解一下主进程和渲染进程

主进程和渲染进程

我们在最前面说到了主进程是什么, 其实就是我们刚才写的main.js, 渲染进程可以理解为一个窗口

我们在pages中创建一个reader.js文件, 并在index.html中引用, 在里面给页面加一个点击事件, 并alert提示

这个渲染进程, 可以有多个, 但是主进程只有一个

这时候, 我们如何互相通信呢, 比如说我们点击弹窗, 想拿到node版本怎么办

我们在主进程中打印看一下

console.log(process.versions.node)
20.15.0
我们是可以node版本的, 但是如何让渲染进程提示, 就是问题了

其实, 我们可以加一个中间件, 预加载脚本, 预加载脚本在渲染进程中运行, 也就是浏览器环境, 但是预加载脚本虽然是浏览器环境, 但是可以访问一部分Node API

预加载脚本

我们在根目录下创建一个preload.js

在里面打印一段话

现在, 直接打印, 肯定是打印不出来的, 需要我们在主进程中加一个web配置

这样写个相对路径是一个错误的写法, 官方要求是一个绝对路径, 其实, 我们就可以引入Node中的path模块了

webPreferences: {
preload: path.resolve(__dirname,’./preload.js’)
}

这时候, 我们就可以看到控制台打印的内容了, 表示预加载脚本执行了

在这里有必要提示一下, 主进程和渲染进程还有预加载脚本的执行顺序

先是主进程执行,其次预加载脚本执行, 最后才是渲染进程执行

上面我们有提到预加载脚本可以使用部分的Node API, 我们来试试看

确实可以打印出来, 那如何让渲染进程知道呢?

这时候, 就需要从electron身上引入一个contextBridge模块, 该模块可以注入窗口的键, 在渲染进程可以通过window来访问

我们在渲染进程访问一下

上面说了, 使用预加载脚本只能使用部分Node API, 就比如可以使用process, 但是不可以使用__dirname, 所以接下来, 我们学习一下主进程和渲染进程通信

主进程,渲染进程通信

首先, 我们先来学习一下渲染进程向主进程通信

怎么通信呢, 其实可以借助预加载脚本, 我们在electron中引入一下ipcRenderer模块, 他身上有一个send方法, 可以发布消息

随后, 我们在渲染进程中添加一个按钮, 将输入的内容进行发送

我们现在的话, 主进程并没有接收订阅, 所以, 我们再怎么通信, 主进程是没有反映的

现在需要在主进程中引入一个ipcMain模块, 使用身上的on方法接收指定消息, 并执行回调函数

我们点击按钮之后, 预加载脚本发布消息,主进程接收消息, 最终在终端打印出了输入的内容

渲染进程和主进程单向通信就说完了, 但是主进程和渲染进程通信就是反过来的, 这里就不进行讲解了

现在, 我们说一下双向通信

刚才, 我们写了, 渲染进程点击调用预加载脚本的方法发送消息, 进而主进程订阅消息, 并进行打印, 当打印完成, 我们需要将其写入本地, 顺便在读取本地文件内容, 在渲染进程中进程alert提示

首先, 我们在主进程中引入fs模块, 将输入内容进行写入

我们点击渲染进程按钮的时候, 我们看到了d盘写入了文件

现在, 我们还是借助预加载脚本, 将消息读取出来, 传递给渲染进程

我们在主进程订阅了一条消息, 这里需要用到handle方法

在预加载脚本中, 我们需要写一个方法, 来发送消息, 这里需要用到invoke

现在, 我们在渲染进程中, 调用一下readFile即可拿到消息

我们看看效果

这一部分, 我们也就说完了, 剩下部分, 我们来说一下打包

应用打包

对于应用打包, 我们可以使用electron-builder

npm install electron-builder -D
安装完成之后, 我们需要再进行build配置, 首先我们需要添加一条命令

随后, 需要配置一下build项, 比如应用程序的唯一标识符, 或者应用图标等等

“build”: {
“appId”: “com.lzr.eledemo”,
“win”: {
“icon”:”./logo.ico”,
“target”: [
{
“target”:”nsis”,
“arch”:[“x64”]
}
]
},
“nsis”: {
“oneClick”: false,
“perMachine”: true,
“allowToChangeInstallationDirectory”: true
}
},
配置完成之后, 我们输入命令npm run build, 进行打包

这样就代表打包完成了, 接下来, 我们安装一下应用, 应用在dist文件中

我们双击exe文件,进行安装, 安装完成之后, 就可以在桌面看到我们的应用程序了

打开应用, 看看效果, 和我们上面写的一模一样

今天就讲解到这里

我们明天见