概述
作为一家在硬件厂商工作的码农, 终究逃不过驱动的安装, 之前一直是让用户手动去官网下载, 产品已经忍了这个方案很久, 终于提高了"把驱动打包进软件的安装包中"的优先级. 网上教程不多, 摸着石头过河.
配置 electron 和 electron-builder
基于 electron和electron-builder来制作跨平台 PC应用.当然还有一个相同优秀的选择electron-packager, 他更简洁, 直接打包出可执行文件(.app, .exe), 详细的两者区别可参见这里
随便找个文件夹, yarn init -y
初始化项目.yarn add electron electron-builder -D
安装依赖.
创建electron-builder.yml配置文件
appId: com.example.app //应用 ID, 需遵循 com.xxx.xxx
directories: // 指定路径
output: dist // 输出目录
buildResources: build // 打包资源目录
copyright: Copyright © 2020 Lorry // 版权信息
productName: ExampleApp // 产品名
compression: store // 压缩方式, 可选项“store” | “normal” | “maximum” , store 速度快
创建一个简单的应用
以下代码均来自 electron 官网
新建 main.js
文件, 用于 electron 运行窗口配置
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.on('ready', createWindow)
新建一个 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
修改 package.json
的 main, 新增一个打包的 script
{
"main": "main.js",
"scripts": {
"build": "electron-builder"
}
}
此时可以使用 yarn build
来看看是否能够正常安装了, 注意在下载 electron 时速度可能较慢, 可以选择翻墙或者设置国内镜像 .npmrc
electron_mirror='http://cdn.npm.taobao.org/dist/electron/'
打包驱动
Windows 版本
创建 build
文件夹, 新建 installer.nsh
用于自定义安装.
!macro customInstall
${If} ${RunningX64}
ExecWait '"$INSTDIR\resources\driver\x64\Installer_x64.exe"'
${Else}
ExecWait '"$INSTDIR\resources\driver\x86\Installer_x86.exe"'
${EndIf}
!macroend
尽可能复制以上文本, 之前就是一个${If}
写成了${if}
找了好久问题.
然后需要将驱动放进 resources 里对应的文件夹, 对应的文件结构为:
.
├── build
│ └── installer.nsh
├── electron-builder.yml
├── index.html
├── main.js
├── package.json
├── resources
│ └── drivers
│ ├── mac
│ │ └── CH34x_Install_V1.4.pkg
│ └── win
│ ├── CH341PT.DLL
│ ├── CH341S64.SYS
│ ├── CH341S98.SYS
│ ├── CH341SER.INF
│ ├── CH341SER.SYS
│ ├── CH341SER.VXD
│ ├── CP210x_Universal_Windows_Driver_ReleaseNotes.txt
│ ├── Installer_x64.exe
│ ├── Installer_x86.exe
│ ├── SLAB_License_Agreement_VCP_Windows.txt
│ ├── arm
│ │ └── silabser.sys
│ ├── ch341SER.CAT
│ ├── dpinst.xml
│ ├── silabser.cat
│ ├── silabser.inf
│ ├── x64
│ │ └── silabser.sys
│ └── x86
│ └── silabser.sys
└── yarn.lock
顺便说一下可以将所有驱动复制到同一个文件夹下进行安装, windows 会自动识别该文件夹下的所有驱动并更新到 dpinst.xml 中.
然后需要配置electron-builder.yml
将 resource 打包进去.并设置 nsis 相关配置, 记住一定要设置 allowElevation
和perMachine
, 因为安装驱动需要管理员权限.具体每个配置的用法请参见官网
nsis:
allowToChangeInstallationDirectory: true
oneClick: false
menuCategory: true
include: ./build/installer.nsh
allowElevation: true
perMachine: true
win:
target: nsis
extraFiles:
- filter:
- ./resources
执行yarn build
, 打开打包后的安装包, 即可在所有资源解压后开始安装驱动
Mac 版本
Mac 版本要做到自动化安装比较复杂, 这里选用的是使用 dmg 格式, 把驱动塞到 dmg 文件中
添加 yml 配置:
mac:
target:
- dmg
icon: ./icon.icns
dmg:
contents:
- x: 130
y: 50
type: dir
name: Driver
path: ./resources/driver/mac
- x: 130
y: 210
- x: 400
y: 210
type: link
path: /Applications
使用yarn build
, 打开 dist
中的 .dmg
文件, 可以看到 driver
就在窗口中了, 可以双击打开供用户手动安装, 如果只有一个驱动的话可以直接贴.app
文件, 把 type 设置成 file
即可
避坑指南
- windows 一定要有管理员权限
- 一定要将驱动放进 extraFiles 里面, extraFiles 和 extraResources 的区别可参考这里
(ExtraFiles)The same as extraResources but copy into the app’s content directory (Contents for MacOS, root directory for Linux and Windows).
- 驱动路径不要搞错, windows 可通过
MessageBox MB_OK "simple message box"
来看是否是正确的路径 - 注意打包完成后的 Mac 端路径为 Resources, R大写.
完整的 demo 请参见github