如何在 electron 中安装驱动

3,014 阅读3分钟

概述

作为一家在硬件厂商工作的码农, 终究逃不过驱动的安装, 之前一直是让用户手动去官网下载, 产品已经忍了这个方案很久, 终于提高了"把驱动打包进软件的安装包中"的优先级. 网上教程不多, 摸着石头过河.

配置 electron 和 electron-builder

基于 electronelectron-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 相关配置, 记住一定要设置 allowElevationperMachine, 因为安装驱动需要管理员权限.具体每个配置的用法请参见官网

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 即可

避坑指南

  1. windows 一定要有管理员权限
  2. 一定要将驱动放进 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).

  1. 驱动路径不要搞错, windows 可通过MessageBox MB_OK "simple message box"来看是否是正确的路径
  2. 注意打包完成后的 Mac 端路径为 Resources, R大写.

完整的 demo 请参见github