官网：https://www.electronjs.org/
开发文档：https://www.electronjs.org/docs
Electron是什么？
- Electron是由github开发的开源框架
- 它允许开发者使用Web技术构建跨平台桌面应用
Electron的组成：
chromium架构：
主进程:
- Electron运行package.json的main脚本的进程称为主进程
- 每个应用只有一个主进程
- 管理原生GUI，典型的窗口（BrowserWindow、Tray、Dock、Menu）
- 创建渲染进程
- 控制应用生命周期（app）
渲染进程：
- 展示Web页面的进程称为渲染进程
- 通过Node.js、Electron提供的API可以跟系统底层打交道
- 一个Electron应用可以有多个渲染进程
主进程与渲染进程的API：
内部运行机制：
Node.js时间循环基于libuv，但Chromium基于message bump
Electron的能力：
与其他桌面应用开发技术对比
Electron工程代码的最小组成
- index.html
<html>
<body>hello world!</body>
</html>
- package.json
{
"name": "electron-app",
"version": "1.0.0"
"main": "main.js"
}
- main.js
const { app, BrowserWindow } = require('electron')
let win
app.on('ready', () => {
win = new BrowserWindow()
win.loadFile('index.html')
}
启动工程
electron .
快速搭建
# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start
安装
- 安装Node.js
- 安装Electron
npm install electron --save-dev
npm install --arch=ia32 --plateform=win32 electron(windows 32位)
验证安装成功
npx electron -v
./node_modules/.bin/electron -v
安装加速
ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/ npm install electron --save-dev
常用功能实现案例
创建窗口：
import { BrowserWindow } from 'electron'
mainWindow = new BrowserWindow({
fullscreen: true,
height: 650,
width: 1200,
useContentSize: true, // width 和 height 使用web网页size, 这意味着实际窗口的size应该包括窗口框架的size，稍微会大一点，默认为 false。
minWidth: 750,
webPreferences: {
nodeIntegration: true // 是否开启Node.js的环境
}
})
// 加载页面文件
// mainWindow.loadURL(winURL)
mainWindow.loadFile(./index.html);
渲染进程与主进程通信：
1、Promise写法(Electron 7.0之后支持)：
渲染进程：
import { ipcRenderer } from 'electron'
notice();
async function notice() {
let res = await ipcRenderer.invoke('notice');
}
主进程：
import { ipcMain } from 'electron'
handleIPC();
function handleIPC() {
ipcMain.handle('notice', () => {
// do something
})
}
2、Callback写法：
渲染进程：
import { ipcRenderer } from 'electron'
ipcRenderer.send('notice', '吃饭啦');
主进程：
import { ipcMain } from 'electron'
ipcMain.on('notice', (event, content) => {
console.log(content);
});
主进程与渲染进程通信：
主进程：
let win = new BrowserWindow({
// config
});
win.webContents.send('render-do-something');
渲染进程：
ipcRenderer.on('render-do-something', () => {
// do somethiing
})
渲染进程之间通信：
- 通知事件
- 通过主进程转发（5.0之前）
- ipcRenderer.sendTo（5.0之后）
- 数据共享
- Web技术（locaStorage / sesstionStorage / indexedDB）
- 使用remote
主进程：
global.windowIds = {
win1WebContentId: win1.webContent.id,
win2WebContentId: win2.webContent.id
}
渲染进程1：
const { ipcRenderer, remote } from 'electron'
let globalObj = remote.getGlobal('windowIds');
let win2WebContentId = globalObj.win2WebContentId;
ipcRenderer.sendTo(win2WebContentId, 'do-something', '参数')
渲染进程2：
ipcRenderer.on('do-something', () => {
// do something
})
系统通知：
const { Notification } from 'electron'
let notification = new Notification({
title: '通知标题',
body: '通知内容',
actions: [{ text: '确定', type: 'button' }],
closeButtonText: '忽略'
});
notification.show();
notification.on('action', () => {
// do something
});
notification.on('close', () => {
// do something
});
上传本地文件：
import { dialog } from 'electron'
dialog.showOpenDialog({
properties: ['openFile'],
filters: [{
name: 'Images',
extensions: ['jpg', 'png', 'gif', 'jpeg']
}]
}).then(result => {
console.log(result.filePaths);
})
打开网页：
import { shell } from 'electron'
shell.openExternal(url);
打开目录：
import { shell } from 'electron'
shell.showItemInFolder(path);
本地持久化存储：
npm install electron-store -S
const Store = require('electron-store');
const store = new Store();
store.set('websites', websites) // 保存
let websites = store.get('websites') // 查询
打包：
打包工具比对
打包前期准备：
- mac：
- 开发者证书
- 软件图标（icns格式，可通过image2icon或iconutil生成）
- dmg背景图
- 安装包图标
- windows：
- 开发者证书（赛门铁克、WoSign）
- ico图标
- installerIcon
- uninstallerIcon
npm i -g --production windows-build-tools （windows必备，用管理员启动cmd安装）
npm i electron-builder -S
npm i cross-env -S
package.json配置：
"build": {
"productName": "work_desktop", // 应用名
"appId": "myWorkDesktop", // 应用ID
"directories": { // 打包目录配置
"output": "build", // 存放产包的目录
"app": "dist", // 打包的代码目录
"buildResources": "resource" // 构建包的资源目录
},
"asar": true, // 是否使用asar加密
"copyright": "" // 版权
"files": [
"dist/electron/**/*"
],
"mac": {
"target": ["dmg", "zip"], // 包格式
"icon": "build/icons/icon.icns" // logo地址
},
"dmg": {
"background": "", // 背景图
"window": { "width": 540, "height": 380 }, // 安装窗口大小
"iconSize": 128, // logo大小
"contents": [ // dmg内容坐标
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"win": {
"icon": "build/icons/icon.ico", // logo地址
"target": ["nsis", "squirrel"] // 包格式
},
"nsis": { // exe安装程序
"oneClick": false, // 一键安装
"language": "2502", // 安装语言代码
"perMachine": true, // 给机器上所有用户安装
"allowToChangeInstallationDirectory": true // 让用户选择目录
},
"squirrelWindows": {
"loadingGif": "resource/loading.gif", // 安装loading动画
"iconUrl": "https://xxxxxxx.com/icon.ico" // icon远程地址
}
}
- 产品发布时版本号需升级，一般遵循semver语法，可以使用npm version patch/minor/major管理
- Windows下需要证书签名，否则可能被杀毒软件误杀
- Mac下如果没有证书签名，无法使用Electron自动更新
- Windows下打包可以写nsis逻辑修改安装包
- 开源软件可以基于Travis、AppVejor持续集成
Electron-Vue
项目搭建：
# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 使用vue-cli安装electron-vue的模板
vue init simulatedgreg/electron-vue projectName
# 安装依赖
cd projectName
npm install
常见报错：
- ReferenceError: process is not defined
- 修改文件：.electron-vue/webpack.renderer.config.js
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
isBrowser: false,
isDevelopment: process.env.NODE_ENV !== 'production',
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),
- 修改文件：src/index.ejs
<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
<script>
window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>
<% } %>
- 在使用new BrowserWindow是加参数：
webPreferences: { //添加这句话
nodeIntegration: true
}
其他问题
mac生成签名：
https://www.bbsmax.com/A/D854ge7VJE/
https://www.cnblogs.com/mapleChain/p/12350532.html
electron下载慢
下载镜像：https://npm.taobao.org/mirrors/electron/9.3.0/
处理方法：https://blog.csdn.net/weixin_34344677/article/details/92084779
备注：~/Library/Caches/electron/
网友评论