简介
https://electronjs.org/
一个平台，可以开发跨平台桌面应用
核心思想：希望通过一套代码在不同平台打包成不同平台的桌面应用程序
组成：
浏览器内核（chrominu） + Node
(运行Html+css+js) (运行功能)
image.png
从官方示例electron-quick-start入门
git clone https://github.com/electron/electron-quick-start
npm install
npm start
1. package.json
image.png
以npm start启动应用
入口文件 main.js
2.main.js
通过electron的API创建一个窗口载入我们写好的HTML文件。主要负责创建BrowserWindow窗口、启动其他配置文件和在窗口关闭之后清理进程释放资源的工作。在Main process中执行
image.png
const {app, BrowserWindow} = require('electron');
Electron 在一开始会通过Node去执行当前main.js文件，electron模块是electron平台内置的模块，提供了所有API；app这个模块是用来控制整个应用程序；BrowserWindow-浏览器窗口类型，可以用来创建一个浏览器窗口
这行代码相当于：
const electron = require('electron;);
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
mainWindow = new BrowserWindow({width: 800, height: 600})
创建一个新的浏览器窗口。宽度为800，高度为600
mainWindow.loadFile('index.html');
从应用中加载index.html文件
还能写成
// 装载应用的index.html页面,__dirname为当前文件路径
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, "index.html"),
protocol: 'file:',
slashes: true
}));
mainWindow.webContents.openDevTools()
打开开发者工具
// 当窗口关闭时调用的方法
mainWindow.on('closed', function () {
// 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
// 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
mainWindow = null
})
// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', function() {
// 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function() {
// 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}
});
3.index.html
image.png
<script>
// You can also require other files to run in this process
// 在Renderer process中执行
require('./renderer.js')
</script>
4.应用打包
方法一：electron-packager
- 1.安装electron-packager
npm install --save-dev electron-packager
- 打包
electron-packager . electron-demo --win --out ./publish --arch=x64 --electron-version=2.0.0
命令执行完毕之后会在应用的根目录下生成publish文件夹，
image.png
electron-demo-win32-x64是打包好的文件，在里面找的可运行的exe文件
image.png
- 3.electron-packager命令参数说明
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <electron版本><可选选项>
- location of project：项目所在路径
- name of project：打包的项目名字
- platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
- architecture：决定了使用 x86 还是 x64 还是两个架构都用
- electron version：electron 的版本
- optional options：可选选项
- 4.为使用便利，可在package.json中配置打包命令
image.png
然后在命令行直接执行
npm run packager
特点：
- 支持平台有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
- 进行应用更新时，使用electron内置的autoUpdate进行更新
- 支持CLI和JS API两种使用方式；
方法二：electron-builder
简单的说，electron-builder就是有比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。
- 1.安装electron-builder
npm install electron-builder --save-dev
(官方强烈推荐使用yarn安装：yarn add electron-builder --save-dev)
- 2.在package.json中的scripts中添加如下配置
"dist": "electron-builder --win --x64"
- 3.在命令行中执行npm run dist
image.png
特点：
- electron-builder 可以打包成msi、exe、dmg文件，macOS系统，只能打包dmg文件，window系统才能打包exe，msi文件；
- 几乎支持了所有平台的所有格式；
- 支持Auto Update；
- 支持CLI和JS API两种使用方式；
网友评论