可跨平台的桌面程序,这是基于谷歌浏览器内核和Node.js下运行的。
目前常见的有 NW、heX、Electron。今天,就来简单的上手一下 Electron。
由于内置的 Chromium 内核 和 Node, 因此我们不需要关心前端的兼容问题,你甚至可以写 -webkit- only 的代码; 也不需要关心一些需要编译的 Node 模块兼容问题,因为 Node 版本是固定的。因此,用 Electron 来编写跨平台应用程序是非常合适的。
electron最后打包生成的程序也分为:win、linux和mac平台的
直接上干货,这里我是以mac平台操作的:
快速运行hello world程序
npm install electron@1.4.13 -g electron -v //查看是否安装成功,这里我用的是1.4.13
下载一个hello world程序
git clone https://github.com/electron/electron-quick-start //下载完成后会多出一个electron-quick-start目录 cd electron-quick-start //进入到此目录中 npm install electron .
这时候会弹出一个程序说明已经成功了
或者运行
electron
之后会弹出一个窗口把我们写的程序文件目录直接拖进去一样也能运行(例如我下面写的myapp目录直接拖进去)
打包程序
之后打包我们的程序让我们的程序更像一个桌面应用,(打包后缀例如是:.app .exe的可执行程序)
首先下载打包工具:
npm install electron-packager@8.4.0 -g
进入到我们刚刚的electron-quick-start目录下把 package.json index.html main.js这3个文件重新放在一个独立的目录下,目录例如是myapp。
进入到myapp目录中运行:
electron-packager . myapp --platform=darwin --arch=x64 --version=1.4.13
在命令运行的过程中会自动下载你设置版本号的编译工具,我这里用的是1.4.13如果当前没有electron目录它就会自动下载一个electron-v1.4.13-linux-ia32.zip的文件,由于是国内根本就下载不了还是手动下载吧
下载地址是:https://github.com/electron/electron/releases
把下载好的文件electron-v1.4.13-linux-ia32.zip解压后改名字为electron,在执行一次
electron-packager . myapp --platform=darwin --arch=x64 --version=1.4.13
就会在当前目录下生成一个myapp-darwin-x64目录,进入到此目录后你就会看到一个myapp程序直接点击就可以运行了。
进一步打包成dmg
1,首先要保证已经打包成功了后缀是app的程序
2,打开“磁盘工具”—“文件”—“新建映像”—“来自文件夹的映像”,选择并进入到你要打包成dmg的目录里面,点击“打开”,(本人系统是10.11.6,不同版本名字叫法不一样教程也不一样)
3,再次弹出一个窗口,设置另存为名字,之后点击“存储”
4,完成后就会在当前目录下生成了一个dmg文件了
使用命令:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
<sourcedir>:
项目的位置<appname>:
应用名--platform=<platform>:
打包的系统(darwin、win32、linux)--arch=<arch>:
系统位数(ia32、x64)--icon=<icon>:
指定应用的图标(Mac 为 .icns 文件,Windows 为 .ico 或 .png)--out <out>:
指定输出的目录--version=<version>:
指定编译的 electron-prebuilt 版本
例子:
electron-packager ./ WeFlow --platform=darwin --arch=x64 --icon=./assets/img/WeFlow.icns --overwrite --out ./dist --version=0.37.8
我们可以直接在 package.json
的 script
字段中添加脚本,如下:
"scripts": {
"build:all": "electron-packager . --all --overwrite",
"build:mac": "electron-packager ./ WeFlow --platform=darwin --arch=x64 --icon=./assets/img/WeFlow.icns --overwrite --out ./dist --version=0.37.8",
"build:win64": "electron-packager ./ WeFlow --platform=win32 --arch=x64 --icon=./assets/img/WeFlow.png --overwrite --out ./dist --version=0.37.8",
"build:win32": "electron-packager ./ WeFlow --platform=win32 --arch=ia32 --icon=./assets/img/WeFlow.png --overwrite --out ./dist --version=0.37.8 --app-version=1.0.0"
}
参考学习文档:
https://runkit.com/npm/electron-packager-itchio