Appearance
导读 - Electron
Electron
是一个使用 JavaScript
、HTML
和 CSS
构建桌面应用程序的框架。 嵌入 Chromium
和 Node.js
到 二进制的 Electron 允许您保持一个 JavaScript
代码代码库并创建 在Windows上运行的跨平台应用
macOS和Linux——不需要本地开发 经验。
举例简单来说:
js -> 需要 浏览器解析器 编译成 计算机能识别的语言
Chrome v8 dom - Chrome(运行环境)、v8(解析器)、dom(运行环境带有的)
Chrome浏览器里有
v8
引擎,使用v8
引擎来解析js
, v8 类似于 车的 发动机,v8也是可以抽离出来的; Chrome浏览器运行环境有dom节点(表单/按钮等等)、bom等。nodejs v8 - nodejs(运行环境:可以进行文件存储、图片压缩等等操作)、v8(解析器)
Electron
带有 浏览器环境,所以 开发网页用的技术都可以使用在 Electron中,如 vue、react 等等
成熟的脚手架
日常开发可以使用 electron-vite 或 electron-vite-vue
、 electron-react-boilerplate
等脚手架快速创建项目,脚手架已经为我们完成了基本的配置,并支持使用 Vue与React等技术开发Electron项目。
参考
开发模式
主进程
text主进程 => 后端的操作:比如 node.js 如主进程读取文件、上传文件...
渲染进程(可以有多个)
text页面上显示的内容:如点上传按钮
默认走传统方式
text新建多个.html / index.css / index.js
目前为止,我们一般都会使用 electron + vue 的模式开发
使用 electron-vite-boilerplate 模板来搭建项目:
sh$npx degit alex8088/electron-vite-boilerplate electron-app $cd electron-app $npm install $npm run dev
ddd
NPM 配置 electron 的安装源
将Electron设置国内镜像后,可以加快文件的下载速度,需要设置 electron_mirror 与 electron_builder_binaries_mirror 镜像,下面是 electron的国内镜像设置。
当正常使用 npm 安装提示报错时,就需要进行这一步骤。
sh
$npm config edit
# 执行上述命令后,会打开记事本,在空白处添加如下内容:
strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/
# 刷新npm的缓存
$npm cache clean --force
- strict-ssl=false:这个设置表示在进行 SSL 连接时不强制验证证书的有效性。这在一些情况下可能会用于避免 SSL 证书验证失败的问题
- registry=https://registry.npmmirror.com/:这是指定了 npm 的镜像源,用于下载 npm 包
- electron_mirror=https://registry.npmmirror.com/-/binary/electron/:这个配置项指定了 Electron 包的镜像源,用于下载 Electron 框架相关的二进制文件
生命周期
生命周期事件顺序
- ready:app 初始化完成
- dom-ready 一个窗口中的文本加载完成
- did-finish-load 导航完成时触发
- window-all-closed 所有窗口都被关闭时触发
- before-quit 在关闭窗口之前触发
- will-quit 在窗口关闭并且应用退出时触发
- quit 当所有窗口被关闭时触发
- close 当窗口关闭时触发,此时应删除窗口引用
对应主进程文件代码如下:
js
const mainWindow = new electron.BrowserWindow({
width: 900,
height: 670,
show: false,
autoHideMenuBar: true,
...process.platform === "linux" ? { icon } : {},
webPreferences: {
preload: path.join(__dirname, "../preload/index.js"),
sandbox: false
}
mainWindow.loadFile("index.html")
mainWindow.webContents.on('did-finish-load', () => {
console.log("333333--->did-finish-load")
})
mainWindow.webContents.on('dom-ready', () => {
console.log("222222--->dom-ready")
})
mainWindow.webContents.on('close', () => {
console.log("888888--->this window is closed") // 这里顺序写成8,是考虑到项目可能有多个窗口,所以在主窗口这里设置为最后关闭。
mainWindow = null //释放内存
})
});
electron.app.on('ready', () => {
console.log("111111--->ready")
mainWindow()
})
electron.app.on('window-all-closed', () => {
console.log("444444--->window-all-closed")
electron.app.quit();
})
electron.app.on('before-quit', () => {
console.log("555555--->before-quit")
})
electron.app.on('will-quit', () => {
console.log("666666--->will-quit")
})
electron.app.on('quit', () => {
console.log("7777777--->quit")
})