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: 'Demo',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
三. 运行
现在只要在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
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包
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)编译完就可以安装啦
完成!!!!
Electron桌面应用打包流程详情相关推荐
- Electron桌面应用
Electron桌面应用 可以使用js,css,html完成pc应用的跨平台开发,内置多种方法访问pc资源 1.创建应用 mkdir my-electron-app && cd my- ...
- Image打包流程-Android10.0编译系统(四)
摘要:本节主要来进行Android10.0 Image打包流程,理解system.img是如何打包的 阅读本文大约需要花费28分钟. 文章首发微信公众号:IngresGe 专注于Android系统级源 ...
- 安卓逆向_1 --- 逆向环境配置、APK 文件结构、APK 打包流程
哔哩哔哩:https://www.bilibili.com/video/BV1UE411A7rW?p=1 Android 逆向工程师系统培训‹第九期›( 课程目录 ):https://ke.yijin ...
- electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
electron 桌面程序 by Carol-Theodor Pelu 通过Carol-Theodor Pelu 如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How ...
- 怎么把html封装成桌面应用,如何将一个现有的Vue网页项目封装成electron桌面应用...
需求缘由 开发了很久的网页项目,领导突然想变成桌面应用,又要重写代码?no,no,no.不可能的.重写代码吃力不讨好,浪费时间,浪费精力.那么我们该怎么办呢? 幸好,electron是如此神奇,它提供 ...
- 如何将一个现有的Vue网页项目封装成electron桌面应用(转载)
简介 需求缘由 基础 步骤 总结 参考内容 需求缘由 开发了很久的网页项目,领导突然想变成桌面应用,又要重写代码?no,no,no.不可能的.重写代码吃力不讨好,浪费时间,浪费精力.那么我们该怎么办呢 ...
- uin-app安卓打包流程
uni-app 安卓打包流程 一.App图标配置 为了自适应不同分辨率,建议使用.9.png格式图片 二.版本号修改 三.云打包 生成安卓自有证书方法 云编 四.使用云编(第三方软件)进行证书签名生成 ...
- 如何使用Vue开发Electron桌面程序
目录 一.Electron介绍 二.项目搭建 1. 使用 vue cli 创建vue项目 2. 安装插件 vue-cli-plugin-electron-builder 编辑 三.开发总结 1. 配 ...
- rn android mac打包,React-Native之MAC平台Android apk打包流程
MAC :Android打包流程7步走:(详情参照英文官网) 1).使用keytool首先生成keystore(包含storeFile file.storePassword .keyAlias .ke ...
最新文章
- 《C++面向对象高效编程(第2版)》——3.13 采用语义
- html5父子页面数据传递,使用iframe标签嵌套页面时 如何进行父子页面通讯/传值...
- VMWare虚拟机迁移时,打开后提示主机不支持 CPUID 错误
- 怎么用PHP语句做出增改删查功能,mysql语句实现简单的增、删、改、查操作示例...
- python单元测试
- 9050 端口 linux 进程,windows和linux查看端口占用情况
- 无线数传电台工业控制的应用
- 最全面的智能锁领域常见的无线传输协议类型
- 20145129 《Java程序设计》第3周学习总结
- win7查看硬盘序列号
- nginx config的多个config配置
- Ubuntu使用WakeOnLan远程开机
- 微信扫码登陆 无需开放平台实现方案
- laravel项目出现Non-static method Redis::hGet() cannot be called statically的解决方法
- 徐静蕾代言“英纳格”的十大不合理
- Hexo | NexT打造一个炫酷博客
- W ndows7蓝屏0x00000024,Win7蓝屏代码0x00000024修复方法
- 编写函数long fun(int high,int n),功能是:计算并返回high以内(不包含high)最大的n个素数之和。若不足n个,则到最小素数2为止。例如:若high=100,n=10,则函数
- DOS命令之COPY
- mysql dba系统学习-数据库事务详解