安装所需插件
本次安装需要electron插件、electron打包插件
electron安装
cnpm install -g electron
npm install --global --production windows-build-tools
//更新electron
npm update electron -g
//electron-packager安装
cnpm install -g electron-packager
npm install electron-winstaller
//electron-builder安装
cnpm install electron-builder
cnpm install electron-updater
//需要在运行的环境上安装打包文件的dll运行环境
cnpm install --global --production windows-build-tools
npm install --global node-gyp
electron打包
electron通常使用两种打包方式，两种方式各有优缺点。
其中electron-builder打包方式需要高版本node，win7 nodejs最高只能到v12.16.2，v12.16.2以上需要升级windows，因此win7打包方式主要使用electron-packager，安装包需要先通过electron-packager打包，然后使用electron-winstaller对已打包文件生成相应安装包
electron-packager打包
命令：npm run packager
特点：
1、支持平台有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
2、进行应用更新时，使用electron内置的autoUpdate进行更新
3、支持CLI和JS API两种使用方式；
""packager":"electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>"
| sourcedir | 项目所在路径 |
| appname | 应用名称 |
| platform | 确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux） |
| architecture | 决定了使用 x86 还是 x64 还是两个架构都用 |
| electron version | electron 的版本 |
| optional options | 可选选项 |
例：
electron-packager ./app myproject --platform=win32 --arch=x64 --electron-version=1.4.13 --icon=logo.ico
| ./app | 项目所在路径./app |
| myproject | 项目名称myproject |
| --platform=win32 | 平台Windows |
| --arch=x64 | x64 架构 |
| --electron-version=1.4.13 | electron 的版本1.4.13 |
| --icon=logo.ico | 可选填图标 |
使用electron-winstaller生成安装文件
创建build.js文件
const electronInstaller = require('electron-winstaller');
const path = require("path");
resultPromise = electronInstaller.createWindowsInstaller({
appDirectory: path.join('myprogect-win32-x64'), 打包文件目录
outputDirectory: path.join('installer'), 输出文件目录
authors: 'Guoxin', 创作者
exe: 'myprogect.exe', 运行程序名称
setupIcon: path.join('logo.ico'), 本地图标地址
iconUrl: 'http://192.168.7.109:8008/logo.ico', 网络图标地址
noMsi: true,
setupExe: 'Zqwd.exe', 安装软件文件名称
title: 'Zqwd', 安装软件名称
description: "zqwd" 安装软件说明
});执行build.js文件
node build.js
electron-builder打包
特点：
1、支持平台有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
2、进行应用更新时，提供开箱即用的“自动更新”支持
3、包更为轻量，不暴露源码的setup安装程序
4、需要高版本nodejs
5、打包需要依托于gitub，打包可能失败
6、必须在打包文件里安装electron，不能使用全局electron
"build": {
"productName": "11111", 项目名称myproject
"appId": "123123123", 包名
"copyright":"xxxx", 版权
"directories": {
"output": "build" 打包文件所在目录
},
"publish": [
{
"provider": "generic", 创作者(不可修改)
"url": "http://192.168.7.109:8008/" 更新的文件下载地址
}
],
"files": [ 打包的文件内容
"./index.html",
"./main.js",
"./package.json",
"dist/electron/**/*"
],
"dmg": { 苹果系统的磁盘镜像打包格式
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": { 在mac下导报配置
"icon": "logo.ico",
"artifactName": "${productName}_setup_${version}.${ext}"安装包名
},
"win": { 在win下导报配置
"icon": "logo.ico", 图标位置
"target": [
{
"target": "nsis"， 目标安装包
"arch": [ 打包类型32 bit/64 bit
"x64",
"ia32"
]
}
]
"artifactName": "${productName}_setup_${version}.${ext}"
},
"linux": { 在linux下导报配置
"icon": "logo.ico",
"artifactName": "${productName}_setup_${version}.${ext}"
},
"nsis": { nsis配置 可优化用户体验(可省略)
"oneClick": false, 是否一键安装
"allowElevation": true, 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, 允许修改安装目录
"installerIcon": "./build/icons/aaa.ico", 安装图标
"uninstallerIcon": "./build/icons/bbb.ico", 卸载图标
"installerHeaderIcon": "./build/icons/aaa.ico", 安装时头部图标
"createDesktopShortcut": true, 创建桌面图标
"createStartMenuShortcut": true, 创建开始菜单图标
"shortcutName": "xxxx", 图标名称
"include": "build/script/installer.nsh", 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。
}
},
"devDependencies":{
"electron": "^17.1.0"
},更新electron
更新流程
主进程main.js中
首先会开启checking-for-update事件，
确认需要更新后会执行update-available事件开始下载，
下载时会触发download-progress事件，我们可以在该事件的回调中拿到下载进度等一系列参数。
在下载完毕后会执行update-downloaded事件，然后退出当前应用并自动安装新版本
更新操作
1、将打包后文件放入更新的服务器文件夹
2、等待更新（更新时长不定，直接更新重启会导致死循环）
electron运行
electron .