介绍
使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
- 基于 Chromium 和 Node.js
- 让你可以使用 HTML, CSS 和 JavaScript 构建应用
- 开源
- 跨平台（Windows、Mac、Linux）
Atom、Postman、Notion、Vscode等都是用Electron开发的
快速上手
手动
1.创建文件并初始化
mkdir Hello-world && cd Hello-world
npm init -y记得修改入口文件，并在根目录创建入口文件 main.js
// package.json
{
...
"main": "main.js",
...
}2.安装electron依赖
npm install --save-dev electron3.在package.json配置文件中的scripts字段下增加一条start命令
// package.json
{
"scripts": {
"start": "electron ."
}
}4.运行
npm start5.空白是因为并没有任何内容，写个 HTML
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to your Electron application.</p>
</body>
</html>6.修改主入口main.js代码
// 在文件头部引入 Node.js 中的 path 模块
const path = require('path')
// app：控制应用程序事件生命周期的模块
// BrowserWindow：创建和管理应用程序窗口模块
const { app, BrowserWindow } = require('electron')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
// 打开开发工具
mainWindow.webContents.openDevTools()
}
// 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
// 类似vue 的生命周期 将会在 Electron 结束后初始化
app.whenReady().then(() => {
createWindow()
// Mac 逻辑 关闭只是隐藏 command + Q 才完全退出
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Windows 和 linux 关闭窗口会完全退出窗口
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
脚手架
# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start如果安装过慢可以设置淘宝源
最新淘宝源地址：
# Npm 设置淘宝源
npm config set registry https://registry.npmmirror.com/
# 检查是否修改成功
npm config get registry使用淘宝源运行时如果提示这个错误
地址问题
throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')则设置electron 镜像源地址
npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/打包
注意： 图标格式 Windows 下使用的icon.icoMac 使用的是icon.icns
使用electron-forge
安装
npm install --save-dev @electron-forge/cli
npx electron-forge import使用
npm run make打包参数配置 package.json文件里的config => forge => packagerConfig
使用electron-packager
安装
npm install --save-dev electron-packager使用
npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]具体参数：https://github.com/electron/electron-packager
将网站直接生成桌面应用
用上面手动或者脚手架的方式创建初始化文件
修改 main.js
const { app, BrowserWindow, Menu } = require('electron')
function createWindow() {
const win = new BrowserWindow({
autoHideMenuBar: true,
show: false, // 是否显示窗口,否后,通过对象.show()打开
fullscreen: false,
})
/**
* 优化加载方式 当页面在窗口中直接加载时，用户会看到未完成的页面，
* 这不是一个好的原生应用的体验,使用此事件后显示窗口将没有视觉闪烁
*/
win.on('ready-to-show', () => {
win.show()
})
//生成调试工具栏
// win.webContents.openDevTools()
// 窗口最大化
win.maximize()
// 加载远程URL(网址)
win.loadURL('https://www.iyouhun.com/')
// 设置菜单栏
const template = [
{
label: '文件',
submenu: [
{
label: '关于',
role: 'about',
},
{
label: '关闭',
accelerator: 'Command+Q',
click: () => {
win.close()
},
},
],
},
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
}
app.on('ready', createWindow)
// Windows 和 linux 关闭窗口会完全退出窗口
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// Mac 逻辑
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})Electron的优缺点
优点
- 原生的接口（菜单、消息提醒、系统托盘等）。
- 上手难度低，能够使用react、vue等前端框架，能方便地迁移前端组件，构建出漂亮的桌面应用。
- 方便热更新
- 调试和测试方便
- Electron使用node.js。因此，您可以导入Chrome应用程序中不容易使用的许多模块
- Electron文档要好得多
缺点
- 不适合开发轻量级的应用。即使一个electron的项目框架，也包含chromium内核。
- 相比c++开发的桌面应用，性能远远不如后者。
- 启动速度慢。
- 每个窗口都是一个新的进程，占据大量内存。
Electron和 PWA
可用性
- Electron 不能安装在任何设备
- PWA 只要有网有浏览器记性，甚至不需要网络
性能
- PWA具有更好性能，使用 Service Worker，减少加载时间
占用空间
- Electron包过大，毕竟每个包都包含了包含chromium内核
安全性
- Electron包不加任何混淆加密的话是完全可读的，因为存放在本地
- PWA存放在服务端且只能通过HTTPS传输
更新和集成
- 两者都可以做到服务端异步更新
交互
- Electron可以调用原生的接口
Electron和Flutter
上手难度
- Electron：会基础的HTML、CSS、JS即可
- Flutter：需学习Dart语言
侧重点
- Electron更偏向PC端应用
- Flutter更偏向移动端应用
