利用Electron把Web项目打包成桌面应用
时间:2022-05-30
本文章向大家介绍利用Electron把Web项目打包成桌面应用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
参考文档
- Electron官方文档。
- 使用的Demo:electron-quick-start
- 打包工具:electron-packager
安装
1.Electron是基于Node.js开发的,第一步当然要安装node盒npm了,就不多说了。
2.安装Electron,推荐使用全局安装,直接安装
sudo npm install -g electron-prebuilt
如果卡在install.js
了,执行以下替换个npm源,参考了这里
electron_mirror="https://npm.taobao.org/mirrors/electron/"
3.下载demo工程,然后运行。
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
electron . //运行项目
4.Electron的基本语法和目录层级结构,官网的快速开始已经说的很明白了,也比较简单,就不复述了。
5.开始打包,官网的打包文档,只说了把源文件隐藏,不暴露给用户,就是打包成asar Archives
,但我们想打包成.exe
和.app
。官网的分发(distribute)文档介绍了两种打包工具。
- electron-builder
- electron-packager
第一个工具是建立安装程序,打包成.exe
和.app
的话,我们选择第二个。
6.参考了网上的很多教程,其实也就几个版本,说的都一样,我都没搞定,还是自己动手,丰衣足食。仔细看看,项目仓库的README.md
说的很清楚,有几点需要注意。
- 在非win32平台上要打包exe程序,需要
Wine 1.6 or later
。 - 基本用法
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
简单的使用
cd electron-quick-start //项目目录
electron-packager ./ Hello -all //-all 其实就是 --platform=all --arch=all (在usage.txt里有解释)
可能会重新下载Electron安装包,几十M,等了十几分钟,速度还是几K,看看当前的Electron版本,强制使用当前的版本。
electron -v //输出v1.4.13
electron-packager ./ oral -all --electron-version=1.4.13
会发现目录里多了个目录,打开里面有个.app
在mac里可以直接运行了。
- 【Java学习笔记之二十一】抽象类在Java继承中的用法小结
- 【Java学习笔记之二十】final关键字在Java继承中的用法小结
- 基于Windows下python环境变量配置
- 【机器学习笔记之七】PCA 的数学原理和可视化效果
- 2017"百度之星"程序设计大赛 - 复赛1005&&HDU 6148 Valley Numer【数位dp】
- 【专知-关关的刷题日记20】Leetcode 119. Pascal's Triangle II
- 2017"百度之星"程序设计大赛 - 复赛1003&&HDU 6146 Pokémon GO【数学,递推,dp】
- 2017"百度之星"程序设计大赛 - 复赛1001&&HDU 6144 Arithmetic of Bomb【java大模拟】
- Java面向对象抽象类实例练习
- 经典JS闭包面试题
- Java面向对象接口的应用实例练习
- 【机器学习笔记之八】使用朴素贝叶斯进行文本的分类
- 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析
- 扫一扫二维码就能打开网站,就能添加联系人,就能链接wifi(续)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法