html electron打包(exe安装包制作)完整流程

开发electron客户端程序，打包是绕不开的问题。下面就我在工作中的经验以及目前对electron-builder的了解来分享一些心得。

By the way，在研究学习过程中我发现了 Installer Studio 这个打包软件，非常好，忍不住要说一下。在线安装包大小只有2MB，断点续传重试啥都有，支持任何类型（如html Electron flutter Cocos Unity3D等）的应用exe打包。1分钟即可完成软件打包。支持离线/在线/静默安装包的制作，基于近百个模板快速构建高质量安装包，支持自定义注册表，环境变量，快捷方式以及Java，.Net等环境的安装。也支持国际化，非常契合我们产品出海的诉求。官网地址：https://installerstudio.online

一. 准备工作

1.npm的安装

需要下载node.js,安装完node.js之后npm自然会有。

参考链接：http://www.runoob.com/nodejs/nodejs-install-setup.html

2.Electron环境搭建

a、安装node.js。node官网地址：https://nodejs.org/en/

b、在windows 命令行下检查node是否安装成功。分别输入 node -v， npm -v 。如果出现 node 和 npm 的版本号，则转下一步。否则转第一步。

c、在命令行，下载淘宝镜像命令工具 cnpm。

npm install cnpm -g --registry=http://registry.npm.taobao.org

d、用 cnpm 命令安装 electron。

cnpm install electron -g

3. 安装electron-prebuilt

首先，我们要安装electron-prebuilt，它是一个npm模块，因此我们可以使用Npm来进行安装，它是一个electron的预编译版本。

npm install -g electron-prebuilt

4. 安装electron-packager

接下来安装electron-packager ，它也是一个npm模块，是一个用于打包electron应用的工具

 npm install -g electron-packager

二. 创建一个应用

创建一个electron应用。我们现在仅仅需要3个文件。

index.html

main.js

package.json

index.html使我们想要显示的页面，main.js为此应用的入口，package.json为npm项目的配置文件。

1.新建一个名为myApp的文件夹

2.进入项目目录进行初始化

cd myApp
npm init

3.新建一个package.json

内容如下：

  {
      "name": "zzh",
      "version": "0.0.1",
      "description": "a simple application",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron ."
      },
      "author": "zzh",
      "license": "ISC"
    }

4.新建一个index.html

内容如下：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h1>hello electron</h1>
    </body>
    </html>

5. 新建一个main.js

内容如下：（main.js的文件名对应package.json中main的值）

const {app, BrowserWindow} = require('electron');
    let win;
    let windowConfig = {
        width:800,
        height:600
    };
    function createWindow(){
        win = new BrowserWindow(windowConfig);
        win.loadURL(`file://${__dirname}/index.html`);
        //开启调试工具
        win.webContents.openDevTools();
        win.on('close',() => {
        //回收BrowserWindow对象
        win = null;
        });
        win.on('resize',() => {
            win.reload();
        })
    } 
    app.on('ready',createWindow);
    app.on('window-all-closed',() => {
    app.quit();
    });

 
    app.on('activate',() => {
        if(win == null){
            createWindow();
        }
    })

关于浏览器BrowserWindow模块更多的参数设置可以查看官方文档

三. 运行

现在只要在myApp目录下执行npm start 就可以运行了

npm start

因为我们在main.js中写了win.webContents.openDevTools(); 开启了浏览器调试工具，所以我们打开的界面是这样的：

四. 打包

现在整个过程进行到最后一步，我们需要打包我们自己的应用，那么如何打包，这就需要用到我们先前已经安装的electron-packager

打开命令行我们可以这样使用它：

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1

大概格式是这样的：

electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

但是这样并不够，会提示：

Unable to determine Electron version. Please specify an Electron version

我们需要指明Electronversion。这个参数是当前安装Electron的版本，不知道的可以直接electron就能看到了，我这里是1.4.13，经过改进后如下：

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1 --electron-version=1.4.13

执行完毕后，看到父级目录下已经产生了我们希望看到的应用文件夹。里面的应用程序HelloWorld.exe就可以直接打开桌面应用了。

但是每次打包的执行命令太长太麻烦了，所以我们可以把命令写进package.json中，执行命令调用它就好了。

更改后的package.json如下：

{
      "name": "zzh",
      "version": "0.0.1",
      "description": "a simple application",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron .",
       "package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13"
      },
      "author": "zzh",
      "license": "ISC"
    }

这样我们每次打包只需要执行 npm run-script package就可以了。

 npm run-script package

五. 更改图标

如果我们想要更改窗口左上角的图标和任务栏的图标，只需要在打包的命令上加个icon参数就好了

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13 --icon=./app/img/icon.ico

六. NSIS 打包 Electron 生成exe安装包

NSIS操作简单，而且打包出来的安装包，安装过程和卸载过程都更加正规。推荐使用

一. 准备

1.下载NSIS软件，安装，下载地址：Download - NSIS

2.安装asar (参考官方文档https://www.w3cschool.cn/electronmanual/cexo1qkn.html)

    npm install -g asa

二. 打包

1.在我们electron最初的目录myApp下执行下面命令，生成asar包

    asar pack ./index.html app.asar

得到app.asar包

2.将app.asar放到文章开始图片得到目录下的resources文件夹下

三.打开NSIS

1）选择可视化脚本编辑器

2）选择使用脚本向导创建新的脚本文件，确定

3）下一步

4）设置应用名称，版本号，网址，标志随便自定义一个就好，然后下一步

5）设置安装程序图标(图标必须是ico格式)，名称，语言（SimpChinese），界面，然后下一步

6）默认，直接下一步就好

7）打开脚本文件，编译及运行

8）编译完就可以安装啦