Electron应用篇(打包和热更新)

7,146 阅读4分钟

打包

打包是开发 electron 应用中最后的一个环节,也是最重要的一个步骤。如果打包遇到问题,那你前面的所有努力也就白费了。目前官方的打包工具主要包括2种,分别是 electron-packager 和 electron-builder,下面分别介绍这两种打包方式的区别以及注意事项。

electron-packager

github地址:github.com/electron/el…

  • 安装依赖包
// For use in npm scripts (recommended)
npm install electron-packager --save-dev
  • 配置package.json脚本
"scripts": {
   "start": "electron .",
   "packageOS": "electron-packager . <appname> --platform=mas --arch=x64 --icon=dms --out=./dist --asar --app-version=1.0.0",
   "packageWin64": "electron-packager . <appname> --platform=win32 --arch=x64 --icon=dms --out=./dist --asar --app-version=1.0.0",
   "packageWin32": "electron-packager . <appname> --platform=win32 --arch=ia32 --icon=dms --out=./dist --asar --app-version=1.0.0"
}
  • 优缺点

1)配置简单,易上手 2)直接生成.app, .exe 等可执行的文件,用户无需安装,打开即可使用。(这样的缺点是包体积会较大,且不能自动添加到用户的快捷方式或者应用程序里面) 3)打包很慢,卡住不动 4)不支持跨平台打包

avatar

electron-builder

官方文档:www.electron.build/

  • 安装依赖包
// Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
  • 配置package.json脚本
  "scripts": {
    "start": "electron .",
    "distOS": "electron-builder --mac",
    "distWin64": "electron-builder --win --x64",
    "distWin32": "electron-builder --win --ia32",
    "postinstall": "electron-builder install-app-deps",
  },
  • 配置打包项(配置在package.json的build属性下)

1)mac下的配置项,mac的配置项比较简单,只需指定打包图标即可,其他的走默认配置项就可以

"build": {
    "productName": "DMS",
    "appId": "com.electron.dms.1.0.0",
    "asar": false,
    "mac": {
      "icon": "icons/dms.icns",
      "target": "default"
    },
  },

2)windows

"build": {
    "productName": "DMS",
    "appId": "com.electron.dms.1.0.0",
    "asar": false,
    "win": {
      "icon": "icons/dms.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "icons/dms.ico",
      "uninstallerIcon": "icons/dms.ico",
      "installerHeaderIcon": "icons/dms.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "dms"
    }
  },

windows 的配置项会稍微复杂一点,主要是要多加一个 nsis 配置,这个配置的主要目的是允许用户自定义安装路径,是否允许添加快捷方式,定义安装图标和卸载图标等。

  • 优缺点

1)功能强大,上手较复杂,配置参数繁多 2)即支持生成可执行程序,也可以生成 dmg、exe 等安装程序 3)内置热升级模块,调用方便 4)打包时最好使用 cnpm run build,否则镜像下载太慢,会卡住。 5)支持跨平台打包(mac 打 windows 的包有的依赖包可能下载很慢,需要手动安装)

热更新

签名

签名是什么? 对 app 进行代码签名可让用户确信 app 来自已知来源并且自最后一次签名以来未被修改。您必须先使用 Apple 颁发的证书对 app 进行签名,然后您的 app 才能够整合 app 服务、安装到设备上或提交到 App Store。

如果你的 app 要支持 macOS,那签名是热更新当中的必不可少的一步,否则无法正确打包。此外,要生成 Apple 颁发的证书必须要苹果开发者账号吗?答案是否定的,用我们平时下载软件的 appleID 一样可以生成签名,完成热更新。不用苹果开发者生成的证书缺点就是不能上传到 App Store,且 app 在安装的时候会出现“打不开 XXX,因为它来自身份不明的开发者。”若要打开,必须要前往安全设置里面允许该软件的打开。显然,这样的体验对用户是不友好的,所以,如果你是企业开发者,最好还是前往苹果开发者中心申请开发者账号。

假设你已经申请好了苹果开发者账号。接下来,是如何生成p12证书和设置环境变量的问题了。

1)打开 xcode,xcode -> preference -> Accounts -> add new acount ,选择 AppleID,然后登录你申请好的苹果者账号(系统会生成默认开发证书) 2)登录完成以后,选择 Manage Certificates... -> 右下角+按钮 -> Developer ID Application -> done,此步骤是将该认证导入到你的钥匙串中。 3) command+空格 打开钥匙串访问 4)选择登录我的证书 – 选择你刚才导入的苹果开发者证书 5)右键证书->导出(.p12格式),存放位置当前用户目录(你也可以存放到其他目录) 6)设置环境变量

sudo vim ~/.bash_profile
// 添加
export CSC_LINK=~/cert.p12 // 你存放p12签名文件的位置
export CSC_KEY_PASSWORD="12345" // p12密码
// 保存退出后刷新env
source ~/.bash_profile
  1. 重新执行打包命令

此时再打包就会显示签名已经成功通过了。如图所示:

avatar

您也可以前往 help.apple.com/xcode/mac/c… 查看签名文档。

搭建github服务器

"build": {
    "productName": "DMS",
    "appId": "com.electron.dms.1.0.0",
    "asar": false,
    "publish": [
       {
         "provider": "github",
         "owner": "hywww",
         "repo": "package-dms-desktop"
       }
    ],
}

搭建私有服务器

私有服务器的搭建很简单,只需在 package.json 的 build 属性里面配置即可。 provider 指定为 “generic”,url 配置为你存放打包文件的静态服务器

"build": {
    "productName": "DMS",
    "appId": "com.electron.dms.1.0.0",
    "asar": false,
    "publish": [
      {
        "provider": "generic",
        "url": "https://public-buk.oss-cn-hangzhou.aliyuncs.com/dms/dms-desktop/"
      }
    ],
}

编写热更新代码

  1. 安装热更新插件
npm i electron-updater --save
  1. 方法调用
const autoUpdater = require('electron-updater').autoUpdater;

autoUpdater.checkForUpdatesAndNotify({ body: '新版本已经下载完成,重启应用将会自动更新', title: '发现更新' })

除了直接调用现成的方法 checkForUpdatesAndNotify,你也可以根据自己的业务情况编写手动更新方法,详见 github.com/electron-us…