Electron桌面应用打包流程

时间:2024-04-14 10:05:30

一. 准备工作

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

    npm install -g electron-prebuilt    

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

    npm install -g electron-packager

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

二. 创建一个应用

    创建一个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模块更多的参数设置可以查看官方文档https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html

三. 运行

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

    npm start

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

Electron桌面应用打包流程

 

四. 打包

   现在整个过程进行到最后一步,我们需要打包我们自己的应用,那么如何打包,这就需要用到我们先前已经安装的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就可以直接打开桌面应用了。

Electron桌面应用打包流程

但是每次打包的执行命令太长太麻烦了,所以我们可以把命令写进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

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

    npm install -g asar

二. 打包    

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

    asar pack ./index.html app.asar

  得到app.asar

 

   Electron桌面应用打包流程

 

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

    Electron桌面应用打包流程

 

    3.打开NSIS

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

    Electron桌面应用打包流程

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

    Electron桌面应用打包流程

    3)下一步

   Electron桌面应用打包流程

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

    Electron桌面应用打包流程

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

    Electron桌面应用打包流程

    6)默认,直接下一步就好

    Electron桌面应用打包流程

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

    Electron桌面应用打包流程

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

    Electron桌面应用打包流程

    9)点击添加文件

    Electron桌面应用打包流程

    添加HelloWorld.exe文件,确定

    Electron桌面应用打包流程

    10)点击AddDirTree 

    Electron桌面应用打包流程

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

    Electron桌面应用打包流程

    11)可修改开始菜单名称,然后下一步

    Electron桌面应用打包流程

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

    Electron桌面应用打包流程

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

    Electron桌面应用打包流程

    14)保存我们的脚本,完成,保存到桌面

    Electron桌面应用打包流程

            

        15)打开脚本文件,编译及运行

            Electron桌面应用打包流程

    16)开始编译,请等待

    Electron桌面应用打包流程

 

    17)编译完就可以安装啦

    Electron桌面应用打包流程

    Electron桌面应用打包流程

完成!!!