Electron桌面应用打包流程详情 - 好文

一. 准备工作

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

    2. 首先，我们要安装electron-prebuilt，它是一个npm模块，因此我们可以使用Npm来进行安装，它是一个electron的预编译版本。
    npm install -g electron-prebuilt
3. 接下来安装electron-packager ，它也是一个npm模块，是一个用于打包electron应用的工具
    npm install -g electron-packager
二. 创建一个应用

  创建一个electron应用。我们现在仅仅需要3个文件。
bigDataPC/ ├── package.json ├── main.js └── index.html
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 ." //这边是自己添加上去的，自动生成的，scripts下面只有test. }, "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, Menu } = require('electron'); const path =
require('path'); const url = require('url'); // 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭 let mainWindow; function createWindow
() { //隐藏关闭放大缩小最外层菜单栏目 Menu.setApplicationMenu(null); // 创建浏览器窗口。 mainWindow =
new BrowserWindow({ title: '彩票大数据', width: 1320, height: 744, icon: __dirname +
'/build/icons/app.ico', //这个是引入的icon }); // 然后加载应用的 index.html。
//mainWindow.loadURL(url.format({ // pathname: path.join(__dirname,
'index.html'), // protocol: 'file:', // slashes: true //})) //引用外部文件
mainWindow.loadURL(`http://www.baidu.com`); // 打开开发者工具。
//mainWindow.webContents.openDevTools() // 当 window 被关闭，这个事件会被触发。
mainWindow.on('closed', () => { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个
window 对象存放在一个数组里面， // 与此同时，你应该删除相应的元素。 mainWindow = null }) } // Electron
会在初始化后并准备 // 创建浏览器窗口时，调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready',
createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS
上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !==
'darwin') { app.quit() } }) app.on('activate', () => { //
在macOS上，当单击dock图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (mainWindow === null) {
createWindow() } }) // 在这个文件中，你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件，然后用 require 导入。

关于浏览器BrowserWindow模块更多的参数设置可以查看官方文档
https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html
<https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html>

三. 运行

现在只要在myApp目录下执行npm start 就可以运行了
    npm start
因为我们在main.js中写了win.webContents.openDevTools(); 开启了浏览器调试工具，所以我们打开的界面是这样的：

四. 打包

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

打开命令行我们可以这样使用它：
    electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64
--electron-version=0.0.1--overwrite --ignore=node_module
大概格式是这样的：
    electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>
electron-packager . <应用名称> --win --out ../<输出目录> --arch=x64位还是32位
--electron-version=版本号 --overwrite --ignore=node_module
执行完毕后，看到父级目录下已经产生了我们希望看到的应用文件夹。里面的应用程序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软件，安装

      NSIS中文版下载地址：https://pan.baidu.com/s/1mitSQU0
<https://pan.baidu.com/s/1mitSQU0>

2.安装asar (参考官方文档https://www.w3cschool.cn/electronmanual/cexo1qkn.html
<https://www.w3cschool.cn/electronmanual/cexo1qkn.html>)
    npm install -g asar
二. 打包

    1.在我们electron最初的目录myApp下执行下面命令，生成asar包
    asar pack ./index.html app.asar
  得到app.asar包



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



3.打开NSIS

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



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



3）下一步

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



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



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



7）授权文件有就填，没有就填空白然后下一步



8）添加应用程序文件，默认两个文件选中，删除



9）点击添加文件



添加HelloWorld.exe文件，确定



10）点击AddDirTree



选择HelloWorld-win32-x64文件夹，选中包含子目录，确定，然后下一步



11）可修改开始菜单名称，然后下一步



12）可设置安装成功后启动的程序，默认就是我们打包后的启动程序，下一步



13）设置一些卸载时界面的提示信息，然后下一步



14）保存我们的脚本，完成，保存到桌面





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



16）开始编译，请等待



17）编译完就可以安装啦





完成！！！

热门工具换一换