Electron

10th December 2020 at 9:15am
Desktop App Development

Electron 是目前最流行的跨平台桌面应用框架。

快速上手

npm 安装 Electron 包时,会下载个预编译好的 Electron 环境。这个过程可能很慢,你可以使用环境变量使其走代理:

# Linux
export ELECTRON_GET_USE_PROXY=1
export GLOBAL_AGENT_HTTP_PROXY=http://127.0.0.1:8001

# Windows Powershell
$env:ELECTRON_GET_USE_PROXY="1"
$env:GLOBAL_AGENT_HTTP_PROXY="http://127.0.0.1:8001"

写代码时先下一个 Electron API Demos,里面提供了最常用的功能的代码示例。然后用 electron-quick-start 创建代码骨架开搞。

打包

打包使用 Electron Forge。这有一份示例的配置(package.json 中):

{
  "name": "voice-dictation",
  // ...
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-zip"
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {
            "options": {
              "name": "Voice Dictation",
              "productName": "Voice Dictation",
              "maintainer": "Zhiheng Lin",
              "homepage": "https://blog.zhiheng.io/",
              "icon": "./img/voice-control-512.png"
            }
          }
        },
        {
          "name": "@electron-forge/maker-wix",
          "config": {
            "name": "Voice Dictation",
            "language": 2052,
            "manufacturer": "Zhiheng Lin"
          }
        }
      ]
    }
  }
}

打包时,针对不同平台的包需要用不同机器打,无法支持交叉编译。不同格式的作用:

  • Zip:全平台都可以打,但无安装过程,不够友好
  • Deb:打出来的包可以容易的转成 Arch Linux 包。一个示例的 PKGBUILD
    # Maintainer: Zhiheng Lin <onlyice0328@gmail.com>
    
    pkgname=electron-voice-dictation-bin
    pkgver=1.0.0
    pkgrel=0
    pkgdesc="Electron desktop app for easy voice dictation"
    arch=('x86_64')
    license=('MIT')
    url='https://blog.zhiheng.io'
    depends=('libappindicator-gtk3')
    optdepends=()
    source=("voice-dictation_1.0.0_amd64.deb")
    sha256sums=('515b6c6782eca849d971217df69864321d204cf145124b2df016290b26ecf089')
    
    package() {
        cd "$pkgdir"
        tar -xf "$srcdir"/data.tar.xz
    }
  • Wix:在 Windows 上推荐的打包方式。但似乎应用名不能是中文。另外需要安装 Wix Toolset 并配置环境变量:
    # Windows: For building MSI package using WiX
    $env:PATH="$env:PATH;C:\Program Files (x86)\WiX Toolset v3.11\bin"

代码参考

我写了一个桌面语音识别工具,代码在 GitHub 上。