Electron桌面应用打包流程

时间：2022-08-31 07:27:59

一. 准备工作

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，它是一个npm模块，因此我们可以使用Npm来进行安装，它是一个electron的预编译版本。

npm install -g electron-prebuilt    
    4. 接下来安装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": "mica",

      "version": "0.0.1",

      "description": "a simple application",

      "main": "main.js",

      "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1",

        "start": "electron ."

      },

      "author": "mica",

      "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 [electron项目地址] [app应用名] [平台] [输出地址] [app版本] [electron版本号] [32位/64位] [应用图标地址]
// 64位打包案例

electron-packager ./ myapp --win --out ../output --arch=x64 --app-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）选择使用脚本向导创建新的脚本文件，确定

文件=》新建脚本：向导

3）下一步

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

9）点击添加文件

Electron桌面应用打包流程

添加HelloWorldElectron桌面应用打包流程.exe文件，确定

Electron桌面应用打包流程

10）点击AddDirTree

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

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

Electron桌面应用打包流程

16）开始编译，请等待

Electron桌面应用打包流程

17）编译完就可以安装啦

Electron桌面应用打包流程

Electron桌面应用打包流程

完成！！！

Electron桌面应用打包流程的更多相关文章

  1. Electron 桌面应用打包（npm run build）简述&lpar;windows &plus; mac&rpar;

    最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用,现就其中打包流程写个备注,以示记录. Windows环境打包:1.首先贴一下package.json. { " ...

  2. 将Electron桌面应用转化为Win10的UWP应用

    如果有小伙伴不知道如何打包Electron桌面应用的,请戳我. 微软提供了一款快捷工具:electron-windows-store,用于将electron桌面应用打包成Windows10系统上.ap ...

  3. electron安装&plus;运行&plus;打包成桌面应用&plus;打包成安装文件&plus;开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  4. electron-vue：Vue&period;js 开发 Electron 桌面应用

    相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用,今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架,该项 ...

  5. &lbrack;转&rsqb; electron实战开发详细流程

    [From] http://www.myk3.com/arc-8856.html 很久没有更新博客,人越来越懒了,唉 说好做的electron教程距离上次玩electron已经过去了好几个月了.. 这 ...

  6. Android Activity启动流程， app启动流程，APK打包流程， APK安装过程

    1.Activity启动流程 (7.0版本之前) 从startActivity()开始,最终都会调用startActivityForResult() 在该方法里面会调用Instrumentation. ...

  7. Electron桌面项目-解决throw new Error&lpar;&&num;39&semi;Electron failed to install correctly&comma; please delete node&lowbar;modules&period;&period;

    前言 Electron 是一个用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库.由GitHub开发的. 其原理是 Electron 通过将 Chromium 和 N ...

  8. &lbrack;Android Pro&rsqb; Android 打包流程

    Android 打包流程: 官网地址:http://developer.android.com/tools/building/index.html 具体的打包步骤如下: 1:生成R.java类文件:E ...

  9. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

随机推荐

  1. Maven使用-创建一个Web项目

    准备工作: 1,eclipse安装maven插件,本地下载maven工具 2,eclipse配置maven 创建项目步骤: 1,eclipse-创建项目-Maven Project 2,下一步, 3, ...

  2. javascript 模块化编程 1

    var myModule=(function(){ var models={}; function define(name,deps,cb){ var tk=[]; for(var i=0,l=dep ...

  3. python 中： lambda

    lambda 定义了一个匿名函数,是代码更简洁 lambda x:x+1和def g(x): return x+1是相同的哦. python 中的map,filter, reduce 函数为序列内置函 ...

  4. 带jdk15类似的jar配置

    针对部分jar文件名带有jdk15结尾的依赖配置时,需要添加<classifier>标签进行区分 比如针对:json-lib-2.4-jdk15.jar的jar依赖配置 <depen ...

  5. lua和java防注入

    lua样例 local sql = "SELECT * FROM t_base_person WHERE person_id=%s and bureau_id=%s" sql = ...

  6. Elasticsearch 基于 URL 的搜索请求

    背景 Elasticsearch 不像关系型数据库,没有简易的 SQL 用来查询数据,只能通过调用 RESTful API 实现查询.大体上查询分为两种,基于 URL 的和基于请求主体的.基于 URL ...

  7. hdu 1166 敌兵布阵【线段树】（求给定区间和）

    题目链接:https://vjudge.net/contest/182746#problem/B       敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)   ...

  8. day22-23作业

    1.字节流  字符流    2.read()  3.-1  4.System.out  5.InputStream  6.OutputStream 1.IO流按流向分为输入流和输出流,即输入流和输出流 ...

  9. linux命令（38）：split 分割文件

    在Linux下用split进行文件分割: 模式一:指定分割后文件行数 对与txt文本文件,可以通过指定分割后文件的行数来进行文件分割. 命令: split -l 300 large_file.txt ...

  10. WebGIS简单实现一个区域炫酷的3D立体地图效果

    1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...

相关文章