Skip to content

导读 - Electron

Electron是一个使用 JavaScriptHTMLCSS 构建桌面应用程序的框架。 嵌入 ChromiumNode.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-viteelectron-vite-vueelectron-react-boilerplate 等脚手架快速创建项目,脚手架已经为我们完成了基本的配置,并支持使用 Vue与React等技术开发Electron项目。

参考

开发模式

  • 主进程

    text
    主进程 => 后端的操作:比如 node.js
    如主进程读取文件、上传文件...
  • 渲染进程(可以有多个)

    text
    页面上显示的内容:如点上传按钮
  • 默认走传统方式

    text
    新建多个.html / index.css / index.js
  • 目前为止,我们一般都会使用 electron + vue 的模式开发

    electron-vite官网

    使用 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

生命周期

生命周期事件顺序

  • 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")
})

创作不易请尊重他人劳动成果,未经授权禁止转载!
Released under the MIT License.