Electron官网
Electron中文网
w3cschool Electron 中文文档
一、概述
Electron 前称为atom shell,是从github开源项目Atom编辑器中抽离出来的,是一个能让你通过 JavaScript、HTML 和 CSS 构建桌面应用的库 。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行。
它还有其它一些特性:
- 自动更新 —— 应用支持自动更新
- 原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单
- 应用崩溃报告 —— 可以将崩溃报告提交到远程服务器
- 调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。
- Windows installer —— 可以快速便捷地创建安装包。
二、HelloWorld
参考
electron打包:electron-packager及electron-builder两种方式实现(for Windows)
【Electron】Electron开发入门(五):项目打包
1.运行demo
cnpm i -g electron
之后,下载electron-quick-start到对应目录,cnpm install安装本地环境,然后npm start即可运行。
"scripts": {
"start": "electron ."
},
这里本质上是在运行electron index.html
2.安装electron打包工具electron-packager
作为一个桌面应用程序,我们希望点击exe文件就能直接启动应用,而不是打开命令行,输入启动命令。这一步就需要打包工具来完成了。
npm install electron-packager -g
使用参数如下:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
比如:
"scripts": {
"start": "electron .",
"pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"
}
命令结构如下(根据实际情况修改):
“.”:需要打包的应用目录(即当前目录),
“myClient”:应用名称,
“--win”:打包平台(以Windows为例),
“--out ../myClient”:输出目录,
“--arch=64”:64位,
“--app-version=0.0.1”:应用版本,
“--electron-version=2.0.0”:electron版本
3.Inno Setup
现在,我们已经得到了应用程序的绿色版本(无需安装,拷贝整个文件目录之后即可使用),但是作为客户端应用程序,我们更希望能直接得到一个安装包,安装之后通过桌面快捷方式的形式去访问,这时候就需要Inno Setup出场了。
具体细节参考electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动