专栏首页视频下载Electron桌面应用打包流程(记录一下)
原创

Electron桌面应用打包流程(记录一下)

经常需要使用,记录一下,免得忘记

一. 准备工作

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模块更多的参数设置可以查看官方文档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 --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软件,安装

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

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)编译完就可以安装啦

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 将任意网站打包为桌面程序

    1.这里需要使用到nodejs的环境,所以需要安装nodejs,安装非常简单,去nodejs的官网https://nodejs.org/en/ 下载,一直下一步...

    力力
  • 暴利无成本项目:Youtube视频搬运实战篇

    在这个自媒体流行的时代,越来越多的人群加入进来,对单个视频自媒体人来说,视频素材的重要性不言而喻,而视频素材的原创也面临着各种各样的困难,缺少视频素材一直都是视...

    力力
  • Youtube下载方法总结

    Youtube是一个分享性的视频网站,网站的分类琳琅满目,视频内容种类繁多,基本可以包含所有认知等比如音乐,体育,游戏,新闻,教育,生活,直播,360度全景视频...

    力力
  • 【程序源代码】Java Script轻量级聊天软件

    前端:vue、iview、electron实现的 PC 桌面版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。...

    程序源代码
  • 在 Linkerd2 中进行流量拆分

    安装最新版本之后,可以看到这个流量拆分功能所使用的 API 资源并非来自 Linkerd,而是 SMI 规范的一部分。

    崔秀龙
  • 在 Linkerd2 中进行流量拆分

    安装最新版本之后,可以看到这个流量拆分功能所使用的 API 资源并非来自 Linkerd,而是 SMI 规范的一部分。

    CNCF
  • 集合的toString()方法源码解析

    为什么c输出的不是地址值呢?   A:Collection c = new ArrayList();     这是多态,所以输出c的toString()方...

    黑泽君
  • HTML&CSS Table元素详细解说

    剽悍一小兔
  • Logstash 配置 Grok 语法

    Grok 是一种采用组合多个预定义的正则表达式。用来匹配分割文本,并且映射到关键字的工具。主要用来对日志数据进行预处理。Logstash 的 filter 模块...

    王小明_HIT

扫码关注云+社区

领取腾讯云代金券