Electron 官网: https://www.electronjs.org/

安装

安装 Electron 前, 需要设置镜像, 否则安装起来特别慢

# bash
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

# powershell
$Env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

安装:

npm install electron --save-dev

开发脚手架

如果熟悉使用 Vue 框架开发, 可以使用 electron-vite 来快速搭建开发环境

electron-vite 官网: https://electron-vite.org/

npm i electron-vite -D

开发

进程通信

主进程向渲染进程发送消息

一个例子: 检测窗口变化, 并通知渲染进程

主进程 main.js 下

import { BrowserWindow } from 'electron'

const mainWindow = new BrowserWindow({...}) 

// 监听窗口变化的事件
mainWindow.on('resize', () => {
    // 获取窗口大小
    const contentBounds = mainWindow.getContentBounds()
    // 主进程向渲染进程发送消息
    mainWindow.webContents.send('resizing', contentBounds)
  })

预加载脚本 preload.js 设置渲染进程的监听函数:

在这里, 我想在窗口变化时, 触发渲染进程的函数

window.api.resizingCall = (func) => { func() }

ipcRenderer.on('resizing', (_, message) => {
  console.log('来自主进程的消息:', message)

  // 渲染进程调用
  const resizingCall = window.api.resizingCall
  if (resizingCall) {
    resizingCall()
  }
})

渲染进程 render.js:

window.api.resizingCall(()=>{
  console.log('窗口已变化')
})

打包

我开发时采用的打包工具是 electron-builder

electron-builder 官网: https://www.electron.build/

electron-builder 可以使用 electron-builder.yml 来配置打包结果

在 package.json 中, 必须写上项目名 name 和项目描述 description 才能进行打包

Windows

简单打包倒还好说, 但如果想让打包后的 XXX-setup.exe 能有一个简单标准的安装引导过程, 就需要额外配置

在 electron-builder.yml 下, 配置以下内容:

win:
  icon: 'build/icon.ico' # 256X256 的 ico 图片
  executableName: expertExtraction #可执行文件的名称
nsis:
  oneClick: false # 单击并安装, 为默认选项 (无法选择安装目录)
  allowToChangeInstallationDirectory: true # 可选择安装目录 (如果为 true, 则必须将 oneClick 设为 false)
  installerIcon: 'build/icon.ico' # 安装图标
  uninstallerIcon: 'build/icon.ico' # 卸载图标
  license: 'installLicense.txt' # 协议, 可选 (单纯的文本文件)

  artifactName: ${name}-${version}-setup.${ext} # 安装引导程序的名称
  shortcutName: ${productName} # 桌面快捷方式的名称
  uninstallDisplayName: ${productName} # 卸载程序的图标
  createDesktopShortcut: always # 是否创建桌面快捷方式

关于图标

如果打包时没报错, 但图标依旧没变, 重新安装后, 图标就会改变 (windows 缓存问题)

其它

路由

使用用 vue-router 时, 推荐 createWebHashHistory() 创建历史模式:

• 其兼容性好
• 在 Electron 中, 无需考虑外观