如果开发跨桌面端的应用开发的话&＃xff0c;我相信&＃xff0c;electron目前绝对是不可避免的技术方案。web应用大家都知道&＃xff0c;通过浏览器访问的应用就是web应用&＃xff0c;那什么是桌面端&＃xff1f;桌面端有两个重要特点&＃xff1a;
有人会问&＃xff1f;web应用也有自己的GUI&＃xff0c;但是它必须在浏览器中执行&＃xff0c;因此不是桌面客户端。浏览器能直接运行在操作系统上&＃xff0c;而且有自己的GUI&＃xff0c;因此浏览器是桌面客户端。
这样大家就理解web应用和桌面端的区别了。
先简单介绍一下electron。electron是由Github开发的开源框架&＃xff0c;现在由OpenJS基金会维护的一个开源项目。它允许开发者使用 HTML、CSS 和 Javascript 来构建跨平台的桌面应用&＃xff0c;而且构建出来的应用&＃xff0c;可以很好地兼容 Mac、Windows 和 Linux 这些主流的操作系统。
相对于web开发和传统的桌面端&＃xff0c;它集合了一些自己的特点&＃xff1a;
● 自动更新 —— 支持应用自动更新&＃xff0c;相对于传统的桌面端更加快捷
● 原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单&＃xff0c;还有原生的交互通知
● Windows installer —— 可以快速便捷地创建安装包&＃xff0c;兼容Mac、windows。
● 调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。
● 应用崩溃报告 —— 可以将崩溃报告提交到远程服务器
所以目前来看&＃xff0c;虽然是使用了web技术进行开发&＃xff0c;但是和web开发稍许有些不同的。
其实&＃xff0c;大部分选择 Electron 框架的动机也都是差不多的&＃xff0c;无非就是省钱&＃xff0c;尤其是在夹缝中生存的微小型企业。
&＃x1f236;️很多优秀的应用都是使用electron开发的&＃xff0c;比如&＃xff0c;vscode&＃xff0c;atom&＃xff0c;github桌面版&＃xff0c;语雀桌面版&＃xff0c;postman桌面版&＃xff0c;支付宝小程序开发工具等等。
Electron的架构可以理解为由三部分构成&＃xff0c; 即chromium &＃43; nodejs &＃43; 原生api
其中&＃xff0c;
Chromium提供强大的UI能力&＃xff0c;允许我们在不考虑浏览器兼容性的前提下&＃xff0c;利用完整的web生态开发页面。
NodeJS让Electron具备了底层操作能力&＃xff0c;比如文件读写、加解密、集成C&＃43;&＃43;模块&＃xff0c;支持引用npm包等&＃xff1b;
Native API 解决了跨平台的问题&＃xff0c;提供了统一的原生界面&＃xff0c;比如窗口、托盘&＃xff0c;其次是系统能力&＃xff0c;比如Notification&＃xff0c;最后是应用的基础能力&＃xff0c;比如软件更新、系统监控等&＃xff1b;
这张图来源于chromium官网&＃xff0c;比较清晰的表达了Chromium的多进程架构。
我们从几个方面&＃xff0c;分析一下Chromium的多进程模式
● 浏览器端&＃xff08;Browser&＃xff09;
● 渲染器端&＃xff08;Render&＃xff09;
● 浏览器和渲染器间的通信方式&＃xff08;IPC&＃xff09;
图上&＃xff0c;有Browser&＃xff0c;有Render。Browser浏览器端直观上来说&＃xff0c;就是打开Chrome后&＃xff0c;浏览器的主体&＃xff08;顶级浏览器窗口&＃xff09;。它对应一个单独的进程&＃xff0c;Browser进程。该进程一旦挂掉&＃xff0c;整个浏览器就会崩溃。一个Render进程&＃xff0c;可以看成一个标签页。每个标签页&＃xff0c;都对应着自己的Render进程。即使一个标签页挂掉&＃xff0c;其他标签页也可以正常运作。
1、Browser
Browser进程可以看成一个指挥调度中心。它负责运行UI和管理标签页&＃xff08;Render&＃xff09;。如消息的派发&＃xff0c;IO处理等等。
Browser进程为每个Render的每个RenderView&＃xff0c;维护对应的RenderViewHost&＃xff0c;管理浏览器状态、渲染器交互。
Browser进程为每个Render维护一个RenderProcessHost&＃xff0c;用其来管理对应的RenderViewHost。
2、Render
每个Render进程&＃xff0c;持有一个Webkit&＃xff08;现在为Blink&＃xff09;内核对象。持有一个RenderProcess对象。这个对象&＃xff0c;与Browser端的RenderProcessHost对应。同样&＃xff0c;每个Render持有一个或多个RenderView&＃xff0c;它于Browser端的RenderViewHost对应。
RenderProcess管理与浏览器进程间的通信&＃xff0c;维护标签页状态。
RenderView代表网页的内容。它的唯一标识为&＃xff0c;RenderProcessHost&＃43;ViewID。
3、Browser与Render间的通信
Browser与Render间通过IPC通信。
Browser端通过RenderViewHost与特定标签页中的特定内容交互。
RenderViewHost -> RenderProcessHost -> IPC -> RenderProcess -> RenderView
Electron 分别在主进程和渲染进程提供了大量 API&＃xff0c;这里先不用管什么是进程。关于Native API我们需要知道的是&＃xff0c;可以通过require语句方便的把这些 API 包含在当前模块使用。
对于NodeJS 上提供的 API&＃xff0c;同样也只需要简单的require一下。但是 Electron 提供的 API 只能用于指定进程类型&＃xff0c;即某些 API 只能用于渲染进程&＃xff0c;而某些只能用于主进程。
例如&＃xff0c;app&＃xff0c;BrowserWindow就只能用于主进程&＃xff0c;ipcRenderer、remote这些只能用于渲染进程。
另外&＃xff0c;图中间的4个 Native api在两个进程中都可以使用&＃xff0c;其中深色模块是工作中常用的模块&＃xff1a;
● app 模块: 管理应用的生命周期&＃xff0c;同时也可以设置app本身的一些属性&＃xff0c;如Dock&＃xff1b;
● BrowserWindow模块&＃xff1a;管理我们的窗口&＃xff1b;
● ipcMain 模块&＃xff1a;与 ipcRender 进行IPC通信&＃xff1b;
● Notification 模块&＃xff1a;进行可交互的通知&＃xff1b;
● webContents 模块&＃xff1a;用来加载具体的页面&＃xff1b;
● autoUpdater 模块&＃xff1a;更新模块&＃xff1b;
● globalShortcut 模块&＃xff1a;设置全局的一个快捷键&＃xff1b;
● clipboard 模块&＃xff1a;读写剪切板&＃xff1b;
● cashReporter 模块&＃xff1a;监控主进程和渲染进程是否有崩溃&＃xff1b;
● remote 模块&＃xff1a;可以调用主进程的模块&＃xff0c;但不建议使用(注&＃xff1a;remote本质上是在基于IPC的一个同步的进程间消息&＃xff0c;同步IPC会影响UI渲染。每次get和set操作都会触发&＃xff0c;写得不好性能会卡&＃xff0c;甚至UI hang掉)&＃xff1b;
● desktopCapture 模块&＃xff1a;捕获桌面流&＃xff0c;通过这个模块可以拿到像系统的截图、屏幕的视频流&＃xff1b;
在electron中&＃xff0c;进程区分为主进程和渲染进程。
electron 运行 package.json 中的 main 指定的入口脚本的进程称为主进程&＃xff0c;一个应用只能有一个主进程。主进程负责的工作主要有&＃xff1a;
负责创建、管理渲染进程、控制整个应用的生命周期、启动一个串口、加载index.html等本地文件、应用程序关闭后回收资源、退出程序等工作。
展示 Web 页面的进程被称为渲染进程&＃xff0c;一个应用可以有多个渲染进程。渲染进程负责的工作主要有&＃xff1a;
负责渲染显示界面、控制用户的交互逻辑、响应用户的交互等工作。也就是说&＃xff0c;一个BrowserWindow实例就代表一个渲染进程。如果使用electron做普通的单页应用&＃xff0c;你可以理解为就一个渲染进程。而且&＃xff0c;当BrowserWindow实例被销毁后&＃xff0c;该渲染进程也会跟着销毁。
另外&＃xff0c;需要知道的是&＃xff0c;在浏览器中 Web 页面是运行在沙盒环境中&＃xff0c;无法访问操作系统的原生资源。而 Electron 可以让我们在每一个渲染进程中&＃xff0c;使用 Node.js来去访问系统底层。
一个常见的主进程文件例子&＃xff0c;
// main.js文件
const { app, BrowserWindow } &＃61; require("electron"); //引入 electron的app和BrowserWindow模块
let mainWindow;
app.on("ready", () &＃61;> {
mainWindow &＃61; new BrowserWindow({ width: 800, height: 500 }); // 设置屏幕宽高
mainWindow.setMenu(null); // 隐藏Chromium菜单
mainWindow.loadFile("index.html"); // 加载index.html文件
mainWindow.on("closed", () &＃61;> {
mainWindow &＃61; null;
});
});
app.on("window-all-closed", () &＃61;> {
/* 在Mac系统用户通过Cmd&＃43;Q显式退出之前&＃xff0c;保持应用程序和菜单栏处于激活状态。*/
if (process.platform !&＃61;&＃61; "darwin") {
app.quit();
}
});
app.on("activate", () &＃61;> {
/* 当dock图标被点击并且不会有其它窗口被打开的时候&＃xff0c;在Mac系统上重新建立一个应用内的window。*/
if (mainWindow &＃61;&＃61;&＃61; null) {
createWindow();
}
});
electron app 中常用的事件时机&＃xff1a;
在Electron中&＃xff0c;主进程和渲染进程的通讯可以说是互相关联&＃xff0c;也可以说不关联&＃xff0c;是处于分支型。非常类似react 组件之间的通信。
主进程和渲染进程的通信主要通过 ipcMain 和 ipcRenderer 这两个Native Api。
// 主进程中
ipcMain.on(&＃39;message&＃39;, (event,arg)&＃61;>{
event.sender.send(&＃39;getMessage&＃39;, &＃39;发送给渲染线程的消息&＃39;)
})
// 渲染线程中
ipcRenderer.on(getMessage,(event, arg)&＃61;>{
console.log(arg);
})
渲染进程之间是无法直接进行通信的&＃xff0c;不过可以通过主进程来间接发送&＃xff0c;是不是很像react的子组件之间的状态传递&＃xff1f;
// 渲染进程 setting window
const { ipcRenderer } &＃61; require(&＃39;electron&＃39;) // 引入ipc
ipcRenderer.send(&＃39;setting window message&＃39;, &＃39;发送给主线程的消息&＃39;)
// 主线程中
ipcMain.on(&＃39;setting window message&＃39;, (event, arg)&＃61;>{
console.log(arg);
// 指定另一个渲染进程接收 &＃xff0c;这里的目标进程&＃xff1a;mainWindow
mainWindow.webContents.send(&＃39;main window message&＃39;, arg) // 返回一个&＃39;顶你个肺&＃39;
})
// 渲染进程 main window
const { ipcRenderer } &＃61; require(&＃39;electron&＃39;) // 引入ipc
ipcRenderer.on(&＃39;main window message&＃39;, (event, arg)&＃61;>{
// 接收到Main进程返回的消息
console.log(arg);
})
在项目中&＃xff0c;我们可以直接通过yarn或者npm等包管理工具来安装electron&＃xff0c;然后可以通过 -v 查看是否安装成功。
打包的话&＃xff0c;我们需要用到另外一个包&＃xff0c;electron-builder。
yarn add electron -dev
electron -v // 查看是否安装成功
yarn add electron-builder -dev
一般&＃xff0c;我们可以指定 arch&＃61;ia32 来安装32位的electron&＃xff0c;这样在 Windows 平台打包都应该要基于32位来打&＃xff0c;这样打出来的包在32位和64位都可以用&＃xff0c;只需维护一套即可。
yarn add --arch&＃61;ia32 --platform&＃61;win32 electron
我使用的前端脚手架是基于umi来搭建的&＃xff0c;所以我在此基础之上进行了拓展。
umi 脚手架似乎没有官方内置的 electron 插件&＃xff0c;因此使用了umi-plugin-electron-builder来快捷配置 electron。这个插件会自动帮你生成模板配置&＃xff0c;十分方便。
⚠️需要注意的是&＃xff0c;这个插件仅支持umi3版本。
$ yarn add umi-plugin-electron-builder --dev
安装插件之后&＃xff0c;执行 umi dev electron 会生成相关文件&＃xff0c;主进程文件 src/main/main.ts&＃xff0c;然后会在package.json中增加入口配置。
打包配置&＃xff0c;则需要我们手动在 .umirc.ts文件中配置&＃xff0c;
electronBuilder: {
routerMode: &＃39;hash&＃39;, // 路由 只能是hash或memory
outputDir: &＃39;dist_electron&＃39;, // 默认打包目录
externals: [], // 不配置的无法使用
rendererTarget: &＃39;electron-renderer&＃39;, // 构建目标electron-renderer 或 web
builderOptions: {
productName: &＃39;electron-react-demo&＃39;, // 项目名&＃xff0c;也是生成的安装文件名&＃xff0c;即electron-react-demo.exe
appId: &＃39;cc.yichen.electron-react-demo&＃39;, // 包名
copyright: &＃39;Copyright © 2022-present 逸尘&＃39;, // 版权信息
nsis: {
// https://www.electron.build/configuration/nsis
oneClick: false, // 是否一键安装
allowElevation: true, // 允许请求提升。 如果为false&＃xff0c;则用户必须使用提升的权限重新启动安装程序。
allowToChangeInstallationDirectory: true, // 允许修改安装目录
installerIcon: &＃39;./build/icons/icon.ico&＃39;, // 安装图标
uninstallerIcon: &＃39;./build/icons/icon.ico&＃39;, // 卸载图标
installerHeaderIcon: &＃39;./build/icons/icon.ico&＃39;, // 安装时头部图标
createDesktopShortcut: true, // 创建桌面图标
createStartMenuShortcut: true, // 创建开始菜单图标
shortcutName: &＃39;electron-react-demo&＃39;, // 图标名称
},
win: {
// win exe 相关配置&＃xff0c;
icon: &＃39;./build/icons/icon.ico&＃39;,
artifactName: &＃39;${productName}-v${version}-win32-setup.${ext}&＃39;,
target: [
{
target: &＃39;nsis&＃39;, // 利用nsis制作安装程序
arch: [
// 这个意思是打出来32 bit &＃43; 64 bit的包&＃xff0c;但是要注意&＃xff1a;这样打包出来的安装包体积比较大&＃xff0c;所以建议直接打32的安装包。
// "x64",
&＃39;ia32&＃39;,
],
},
],
},
mac: {
// mac pkg 配置项
icon: &＃39;./build/icons/icon.icns&＃39;,
artifactName: &＃39;${productName}-v${version}-mac.${ext}&＃39;,
},
dmg: {
// macOS dmg镜像 配置项&＃xff0c;https://www.electron.build/configuration/dmg
contents: [
// 自定义图标位置。x 和 y坐标是指图标中心的位置&＃xff08;1x比例&＃xff09;&＃xff0c;不考虑标签
{
x: 410,
y: 150,
type: &＃39;link&＃39;,
path: &＃39;/Applications&＃39;,
},
{
x: 130,
y: 150,
type: &＃39;file&＃39;,
},
],
},
linux: {
icon: &＃39;./build/icons&＃39;,
artifactName: &＃39;${productName}-v${version}-linux.${ext}&＃39;,
},
publish: [
{
provider: &＃39;generic&＃39;,
url: &＃39;&＃39;,
},
],
},
},
关于项目打包&＃xff0c;可以配置如下命令&＃xff1a;
# windows
umi build electron --win
# mac
umi build electron --mac
# linux
umi build electron --linux
# windows 按平台打包
umi build electron --win --ia32 //32位
umi build electron --win --x64 //64位
umi build electron --win --armv7l //arm32位
umi build electron --win --arm64 //arm64位
首先需要下载安装electron 和 vue-cli-plugin-electron-builder
yarn add electron --dev
yarn add vue-cli-plugin-electron-builder --dev
然后&＃xff0c;这个插件我们需要手动去配置修改package.json&＃xff0c;加入主进程文件background.js。以及&＃xff0c;在 package.json 中配置启动项命令和打包命令&＃xff0c;
"electron:build": "vue-cli-service electron:build",
"electron:build:mac": "vue-cli-service electron:build --macos",
"electron:build:win64": "vue-cli-service electron:build --windows --x64",
"electron:build:win32": "vue-cli-service electron:build --windows --ia32",
"electron:serve": "vue-cli-service electron:serve",
打包配置&＃xff0c;则需要我们手动在 vue.config.js文件中配置&＃xff0c;
pluginOptions: {
electronBuilder: {
// electron 构建配置
builderOptions: {
productName: &＃39;electron-vue-demo&＃39;, // 项目名&＃xff0c;也是生成的安装文件名&＃xff0c;即electron-vue-demo.exe
appId: &＃39;cc.yichen.electron-vue-demo&＃39;, // 包名
copyright: &＃39;Copyright © 2022-present Yichen&＃39;, // 版权
nsis: {
oneClick: false, // 是否一键安装
allowElevation: true, // 允许请求提升。 如果为false&＃xff0c;则用户必须使用提升的权限重新启动安装程序。
allowToChangeInstallationDirectory: true, // 允许修改安装目录
installerIcon: &＃39;./build/icons/icon.ico&＃39;, // 安装图标
uninstallerIcon: &＃39;./build/icons/icon.ico&＃39;, // 卸载图标
installerHeaderIcon: &＃39;./build/icons/icon.ico&＃39;, // 安装时头部图标
createDesktopShortcut: true, // 创建桌面图标
createStartMenuShortcut: true, // 创建开始菜单图标
shortcutName: &＃39;electron-vue-demo&＃39; // 图标名称
},
dmg: {
// macOSdmg
contents: [
{
x: 410,
y: 150,
type: &＃39;link&＃39;,
path: &＃39;/Applications&＃39;
},
{
x: 130,
y: 150,
type: &＃39;file&＃39;
}
]
},
mac: {
// mac
icon: &＃39;./build/icons/icon.icns&＃39;,
artifactName: &＃39;${productName}-v${version}-mac.${ext}&＃39;
},
win: {
// win 相关配置
icon: &＃39;./build/icons/icon.ico&＃39;,
artifactName: &＃39;${productName}-v${version}-win32-setup.${ext}&＃39;,
target: [
{
target: &＃39;nsis&＃39;, // 利用nsis制作安装程序
arch: [
// 这个意思是打出来32 bit &＃43; 64 bit的包&＃xff0c;但是要注意&＃xff1a;这样打包出来的安装包体积比较大&＃xff0c;所以建议直接打32的安装包。
// &＃39;x64&＃39;, // 64位
&＃39;ia32&＃39; // 32位
]
}
]
}
}
}
}
ok&＃xff0c;到这里&＃xff0c;稍微总结一下&＃xff0c;Electron相对于web开发的区别&＃xff0c;主要体现在四个方面&＃xff1a;
解决跨域问题的三种方式&＃xff1a;
webSecurity&＃xff1b;这些都不会被浏览器的跨域请求所影响&＃xff0c;而且可以做到请求的时候少一个option请求&＃xff0c;也不会被浏览器同域名6个请求所限制住。
除了上述的一些优势&＃xff0c;electron也带来了一些问题和挑战。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 