electron 从打包到生成安装文件再到自动更新

第一部分生成electron应用

首先全局安装electron（Windows为例）
npm install -g electron
大体上，一个 Electron 应用的目录结构如下：
your-app/
├── package.json
├── main.js
└── index.html
查看分支one 这里用了electron-packager打包生成 .exe文件此时的生成文件是不用安装的，当然也不会出现在桌面快捷方式以及开始项。所以我们需要继续打包生成可安装的.exe文件

第一步中的注意事项：

1.打包时node_modules 文件夹是被忽略，所以需要我们打包完成后找到\myApp\myApp-win32-x64\resources\app 这里就是源文件，在此处进行手动安装所需要的包例如:electron-node-getmac

第二部分打包electron应用成安装文件

这里我们用的是 grunt-electron-installer 代码切换到two，然后安装依赖包.
build文件目录:
build/
├── package.json
├── Gruntfile.js
├── myApp-win32-x64
├── dist
└── load.gif
1: 这里主要是Gruntfile.js 打包配置都是在这里完成grunt-electron-installe 2: myApp-win32-x64是上一步打包出来的文件 3: dist 文件就是 grunt 打包完成输入的地方 4: load.gif是.exe文件安装过程中的动画效果（不指定electron会有默认动画）
此时执行grunt 命令可以看到dist文件夹下就会生成我们需要的 .exe文件。但此时的.exe文件执行后，并没有生成桌面快捷方式。所以我们还要继续。（.exe文件没有支持路径选择功能） 5:监听Squirrel事件（Windows 桌面应用安装和更新框架）
监听的目的主要是为了在安装之后自动创建App快捷方式，还有为之后的自动更新做准备。因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了，我顺便把程序卸载时，删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听。修改main.js
'use strict';
var electron = require('electron');
var { app } = electron;
var { BrowserWindow } = electron;
var path = require('path')
var mainWindow = null;

// grunt 打包是安装更新卸载是生成桌面快捷方式 var handleStartupEvent = function () { if (process.platform !== 'win32') { return false; } var squirrelCommand = process.argv[1]; switch (squirrelCommand) { case '--squirrel-install': case '--squirrel-updated': install(); return true; case '--squirrel-uninstall': uninstall(); app.quit(); return true; case '--squirrel-obsolete': app.quit(); return true; } // 安装 function install() { var cp = require('child_process'); var updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe'); var target = path.basename(process.execPath); var child = cp.spawn(updateDotExe, ["--createShortcut", target], { detached: true }); child.on('close', function(code) { app.quit(); }); } // 卸载 function uninstall() { var cp = require('child_process'); var updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe'); var target = path.basename(process.execPath); var child = cp.spawn(updateDotExe, ["--removeShortcut", target], { detached: true }); child.on('close', function(code) { app.quit(); }); }

}; if (handleStartupEvent()) { return; } app.on('ready', function() { mainWindow = new BrowserWindow({width: 500, height: 960}) mainWindow.loadURL('file://' + __dirname + './index.html'); });

*   然后执行第一步的打包，然后在执行第二步打包后。此时得到的.exe安装完成后桌面快捷方式就生成了。
#### 第二步中的注意事项：
1.  grunt请记得全局安装。
2.  项目名称myApp 中不能出现数字。
3.  桌面快捷方式的图标（第一步打包里面加入图标可以查看electron-packager文档）、名称（electron第一步中package.json里name字段）
***
### 第三部分自动更新程序
> 这里我们用到了[electron-simple-updater](https://github.com/megahertz/electron-simple-updater)
修改main.js 加入代码：

//自动更新注册 const updater = require('electron-simple-updater'); updater.init({ checkUpdateOnStart: false, autoDownload: false });

>在我们的render代码中加入

const { remote } = require('electron');
const updater = remote.require('electron-simple-updater');
updater.on('update-available', onUpdateAvailable);
updater.on('update-downloading', onUpdateDownloading);
updater.on('update-downloaded', onUpdateDownloaded);
updater.on('error', function(err){
alert(JSON.stringify(err))
});
function onUpdateAvailable(meta) {
    updater.downloadUpdate();
}

function onUpdateDownloading() {
    console.log(下载中)
}

function onUpdateDownloaded() {
    //下载成功，执行安装
    if (window.confirm('The app has been updated. Do you like to restart it now?')) {
       updater.quitAndInstall();
    }
}
updater.checkForUpdates();//获取更新

>修改package.json

{ "name": "myApp", "title": "myApp", "version": "0.0.3", "main": "./main.js", "updater": { "url": "http://127.0.0.1:3000/github/update.json" }, "scripts": { "start": "electron .", "package": "electron-packager ./ myApp --win --out myApp --arch=x64 --version 1.4.13 --overwrite --ignore=node_modules --version-string.CompanyName=myApp --version-string.ProductName=myApp" }, "devDependencies": { "electron-packager": "^8.7.0" }, "dependencies": { "electron-simple-updater": "^1.2.0" } }

*   增加了updater字段；当我们启动项目的时候 updater回去获取服务端的updata.json里面的数据,并且根据里面的版本号与本地版本比较是否需要更新.
>服务端静态资源updata.json格式：

{ "linux-x64-prod": { "readme": "Second release", "update": "https://github.com/megahertz/electron-simple-updater/releases/download/linux-x64-prod-v0.0.2/simple-updater-example-0.0.2-x86_64.AppImage", "install": "https://github.com/megahertz/electron-simple-updater/releases/download/linux-x64-prod-v0.0.2/simple-updater-example-0.0.2-x86_64.AppImage", "version": "0.0.2" }, "win32-x64-prod": { "readme": "Second release", "update": "https://github.com/megahertz/electron-simple-updater/releases/download/win32-x64-prod-v0.0.2", "install": "https://github.com/megahertz/electron-simple-updater/releases/download/win32-x64-prod-v0.0.2/Simple.Updater.Example.Setup.0.0.2.exe", "version": "0.0.2" }, "darwin-x64-prod": { "readme": "Second Release", "update": "https://github.com/megahertz/electron-simple-updater/releases/download/darwin-x64-prod-v0.0.2/release.json", "install": "https://github.com/megahertz/electron-simple-updater/releases/download/darwin-x64-prod-v0.0.2/Simple.Updater.Example-0.0.2.dmg", "version": "0.0.2" } }

*   根据不同操作系统配置有所不一样。其中updata就是新版.exe所在目录/install 就是新版.exe安装文件,version就是新版版本号。至此electron自动更新到此为止。

#### 第三步注意事项
1. 当更新文件较大时 需要等待一会。
2. 放置新版资源是 请把dist 下所有文件拷贝到里面。因为客户端发起更新请求时 会去拿RELEASES文件进行比较。如果此时RELEASES文件不存在那么客户端更新会出现报错。
3.updata.json文件的版本号请与打包出来的.exe文件版本号一致（package里的version）。否则更新会报错。updata.json的版本号小于客户端已安装的版本号时。不会去更新。

### electron使用原生NODE包；
>Electron 同样也支持 Node 原生模块，但由于和官方的 Node 相比使用了不同的 V8 引擎，如果你想编译原生模块，则需要手动设置 Electron 的 headers 的位置（https://electronjs.org/docs/tutorial/using-native-node-modules）

这里只介绍window下 使用node-gyp；这个包提供一种部署原生 Node 预编译二进制模块的方法， 许多流行的模块都是使用它。

$ npm install -g node-gyp

全局安装;
接下去安装环境依赖

1.npm install -g windows-build-tools 2.安装 Python 2.7版本注意要2.7的版本噢(https://www.python.org/getit/) 3.Visual C++ Build Environment:环境 Option 1: Install Visual C++ Build Tools using the Default Install option. Option 2: Install Visual Studio 2015 (or modify an existing installation) and select Common Tools for Visual C++ during setup. This also works with the free Community and Express for Desktop editions.



安装完之后，如果顺利的话可以一次通过。先将目录定位到需要重新编译的node包。可以使用命令行cd .\\node_modules\\serialport（例子）\\。
然后在使用这条命令行来编译
node-gyp rebuild --target=1.6.2 --arch=x64 --target_arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell
--target 指的是需要编译的node版本也就是electron的版本;
--arch 设定的目标结构（例如x64）
--dist-url 从自定义URL下载头文件（这里我们使用了淘宝镜像）
(https://www.npmjs.com/package/node-gyp)

zhouyuzhuo1123 / electron