1042 lines
23 KiB
Markdown
1042 lines
23 KiB
Markdown
|
# Electron 入门
|
|||
|
|
|
|||
|
|
> WARNING: 文章部分内容已经过时，仅适用于 Electron ^11.2.1
|
|||
|
|
|
|||
|
|
## 技术架构
|
|||
|
|
|
|||
|
|
Electron = Chromium + Node.js + Native APIs
|
|||
|
|
|
|||
|
|
## 工作流程
|
|||
|
|
|
|||
|
|
启动APP -> 主进程创建window -> win加载界面 -> xxx行为
|
|||
|
|
|
|||
|
|
### 主进程
|
|||
|
|
|
|||
|
|
- 只有主进程才可以进行GUI的API操作
|
|||
|
|
- 只有一个
|
|||
|
|
|
|||
|
|
### 渲染进程
|
|||
|
|
|
|||
|
|
- 可以有多个
|
|||
|
|
- 和主进程通信完成原生API操作
|
|||
|
|
|
|||
|
|
## 环境搭建
|
|||
|
|
|
|||
|
|
1. 使用官方 Quick Start
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
$ git clone https://github.com/electron/electron-quick-start
|
|||
|
|
$ cd electron-quick-start
|
|||
|
|
$ npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 01 创建一个窗口
|
|||
|
|
// 02 让窗口加载了一个界面，这个界面就是用Web技术实现， 运行在渲染进程
|
|||
|
|
function createWindow () {
|
|||
|
|
// Create the browser window.
|
|||
|
|
const mainWindow = new BrowserWindow({
|
|||
|
|
width: 800,
|
|||
|
|
height: 600,
|
|||
|
|
webPreferences: {
|
|||
|
|
preload: path.join(__dirname, 'preload.js')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// and load the index.html of the app.
|
|||
|
|
mainWindow.loadFile('index.html')
|
|||
|
|
|
|||
|
|
// Open the DevTools.
|
|||
|
|
// mainWindow.webContents.openDevTools()
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. 手动创建项目
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// main.js
|
|||
|
|
const {app, BrowserWindow} = require('electron') // 导包
|
|||
|
|
|
|||
|
|
// 当 app 启动之后执行窗口创建等操作
|
|||
|
|
app.whenReady().then(() => {
|
|||
|
|
const mainWin = new BrowserWindow({
|
|||
|
|
width: 600,
|
|||
|
|
height: 400
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 在当前窗口中加载指定界面让它显示具体的内容
|
|||
|
|
mainWin.loadFile('index.html')
|
|||
|
|
|
|||
|
|
mainWin.on('close', () => {
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
app.on('window-all-closed', () => {
|
|||
|
|
// ...
|
|||
|
|
app.quit()
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.html -->
|
|||
|
|
<!doctype html>
|
|||
|
|
<head>
|
|||
|
|
<title>这个窗口标题</title>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<h1>嘿！这是一段文字！</h1>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
// package.json
|
|||
|
|
{
|
|||
|
|
"name": "xxxx", // 项目的名字
|
|||
|
|
"version": "x.x.x", // 项目的版本
|
|||
|
|
"description": "", // 描述
|
|||
|
|
"main": "main.js", // 入口文件
|
|||
|
|
"scripts": {
|
|||
|
|
"start": "electron ." // npm start
|
|||
|
|
},
|
|||
|
|
"keywords": [], // 关键词？
|
|||
|
|
"author": "", // 作者
|
|||
|
|
"license": "ISC", // 协议
|
|||
|
|
"devDependencies": {
|
|||
|
|
"electron": "^11.2.1" // 开发依赖
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 生命周期
|
|||
|
|
|
|||
|
|
ready: app初始化完成
|
|||
|
|
|
|||
|
|
dom-ready: 一个窗口中的文本加载完成
|
|||
|
|
|
|||
|
|
did-finsh-load: 导航完成时出发
|
|||
|
|
|
|||
|
|
window-all-closed: 所有窗口都被关闭时触发
|
|||
|
|
|
|||
|
|
before-quit: 在关闭窗口之前触发
|
|||
|
|
|
|||
|
|
will-quit: 在窗口关闭并且应用退出时触发
|
|||
|
|
|
|||
|
|
quit: 当所有窗口被关闭时触发
|
|||
|
|
|
|||
|
|
closed: 当窗口关闭时触发，此时删除窗口引用
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const { app, BrowserWindow } = require('electron')
|
|||
|
|
|
|||
|
|
function createWindow() {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
width: 600,
|
|||
|
|
height: 400
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
mainWin.loadFile('index.html')
|
|||
|
|
|
|||
|
|
mainWin.webContents.on('did-finish-load', () => {
|
|||
|
|
console.log('3 - did finish load')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
mainWin.webContents.on('dom-ready', () => {
|
|||
|
|
console.log('2 - dom ready')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
mainWin.on('close', () => {
|
|||
|
|
console.log('8 - win closed') // 多窗口时最后触发
|
|||
|
|
mainWin = null // 删除引用，释放空间
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
app.on('ready', () => {
|
|||
|
|
console.log('1 - ready')
|
|||
|
|
createWindow()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
app.on('window-all-closed', () => {
|
|||
|
|
console.log('4 - window all closed')
|
|||
|
|
app.quit()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
app.on('before-quit', () => {
|
|||
|
|
console.log('5 - before quit')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
app.on('will-quit', () => {
|
|||
|
|
console.log('6 - will-quit')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
app.on('quit', () => {
|
|||
|
|
console.log('7 - quit')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 窗口大小
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function createWindow() {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
x: 100, // 相对于屏幕左上角
|
|||
|
|
y: 100,
|
|||
|
|
show: false, // 防止首页白屏
|
|||
|
|
width: 800,
|
|||
|
|
height: 400,
|
|||
|
|
maxHeight: 600, // 最大值
|
|||
|
|
maxWidth: 1000,
|
|||
|
|
minHeight: 200, // 最小值
|
|||
|
|
minWidth: 300,
|
|||
|
|
resizable: false // 固定大小，禁止缩放
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 防止首页白屏，否则不显示
|
|||
|
|
mainWin.on('ready-to-show', () => {
|
|||
|
|
mainWin.show()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 窗口标题及环境
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// main.js
|
|||
|
|
function createWindow() {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
width: 800,
|
|||
|
|
height: 600,
|
|||
|
|
show: false,
|
|||
|
|
title: "标题", // 要在网页里的标题去除
|
|||
|
|
icon: "w.png", // 设置图标
|
|||
|
|
frame: true, // 是否显示标题栏
|
|||
|
|
transparent: false, // 透明窗体
|
|||
|
|
autoHideMenuBar: true, // 隐藏菜单
|
|||
|
|
webPreferences: {
|
|||
|
|
nodeIntegration: true, // Node集成环境
|
|||
|
|
enableRemoteModule: true, // 开启远程模块 remote
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
const { remote } = require('electron')
|
|||
|
|
|
|||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
// 点击按钮打开新窗口
|
|||
|
|
const oBtn = document.getElementById('btn')
|
|||
|
|
oBtn.addEventListener('click', () => {
|
|||
|
|
// 创建窗口
|
|||
|
|
let indexMain = new remote.BrowserWindow({
|
|||
|
|
width: 200,
|
|||
|
|
height: 200
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
indexMain.loadFile('list.html')
|
|||
|
|
|
|||
|
|
indexMain.on('close', () => {
|
|||
|
|
indexMain = null
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 自定义窗口的实现
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.html -->
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<style>
|
|||
|
|
/* ... */
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="menu-container">
|
|||
|
|
<div class="left">
|
|||
|
|
<div class="logo"></div>
|
|||
|
|
<div class="title">Electron 自定义标题栏</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div class="function min">
|
|||
|
|
<!-- ... -->
|
|||
|
|
</div>
|
|||
|
|
<div class="function max">
|
|||
|
|
<!-- ... -->
|
|||
|
|
</div>
|
|||
|
|
<div class="function close">
|
|||
|
|
<!-- ... -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="app">
|
|||
|
|
<h2>主体内容</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="index.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
const { remote } = require('electron')
|
|||
|
|
|
|||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
// 利用 remote 获取当前窗口对象
|
|||
|
|
let mainWin = remote.getCurrentWindow()
|
|||
|
|
|
|||
|
|
// 获取元素添加点击操作的监听
|
|||
|
|
let aBtns = document.getElementsByClassName('function')
|
|||
|
|
|
|||
|
|
aBtns[0].addEventListener('click', () => {
|
|||
|
|
// 最小化
|
|||
|
|
mainWin.minimize()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
aBtns[1].addEventListener('click', () => {
|
|||
|
|
// 最大化
|
|||
|
|
mainWin.isMaximized() ? mainWin.restore() : mainWin.maximize()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
aBtns[2].addEventListener('click', () => {
|
|||
|
|
// 关闭窗口操作
|
|||
|
|
mainWin.close()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 阻止窗口关闭
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.html -->
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- ... -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- ... -->
|
|||
|
|
<div class="dialog">
|
|||
|
|
<div class="message">
|
|||
|
|
是否关闭？
|
|||
|
|
</div>
|
|||
|
|
<span class="confirm yes">是</span>
|
|||
|
|
<span class="confirm no">否</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="index.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
const { remote } = require('electron')
|
|||
|
|
|
|||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
|
|||
|
|
window.onbeforeunload = function () {
|
|||
|
|
let oBox = document.getElementsByClassName('dialog')[0]
|
|||
|
|
oBox.style.display = 'block'
|
|||
|
|
|
|||
|
|
let yBtn = oBox.getElementsByClassName('confirm')[0]
|
|||
|
|
let nBtn = oBox.getElementsByClassName('confirm')[1]
|
|||
|
|
|
|||
|
|
yBtn.addEventListener('click', () => {
|
|||
|
|
mainWin.destroy() // 不用 close 防止死循环
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
nBtn.addEventListener('click', () => {
|
|||
|
|
oBox.style.display = 'none'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 父子及模态窗口
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
let oBtn = document.getElementById('btn')
|
|||
|
|
oBtn.addEventListener('click', () => {
|
|||
|
|
let subWin = new remote.BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
parent: remote.getCurrentWindow(), // 设置父窗口
|
|||
|
|
modal: true, // 设置模态窗口
|
|||
|
|
})
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 自定义菜单
|
|||
|
|
|
|||
|
|
[Electorn文档 Menu部分](https://www.electronjs.org/zh/docs/latest/api/menu)
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// ...
|
|||
|
|
console.log(process.platform) // 平台判断
|
|||
|
|
// ...
|
|||
|
|
const createWindow = () => {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 定义自己需要的菜单项
|
|||
|
|
let menuTemp = [
|
|||
|
|
{
|
|||
|
|
label: "文件",
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: "打开文件",
|
|||
|
|
click() {
|
|||
|
|
console.log("打开文件夹")
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'separator' // 分隔符
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "关闭文件夹"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "关于",
|
|||
|
|
role: 'about'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{ label: "编辑" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 利用上述模板生成一个菜单项
|
|||
|
|
let menu = Menu.buildFromTemplate(menuTemp);
|
|||
|
|
|
|||
|
|
// 添加到应用里
|
|||
|
|
Menu.setApplicationMenu(menu);
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 菜单角色及类型
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function createWindow() {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 01 自定义菜单的内容
|
|||
|
|
let menuTemp = [
|
|||
|
|
{
|
|||
|
|
label: '角色',
|
|||
|
|
submenu: [
|
|||
|
|
{ label: '复制', role: 'copy' },
|
|||
|
|
{ label: '剪切', role: 'cut' },
|
|||
|
|
{ label: '粘贴', role: 'paste' },
|
|||
|
|
{ label: '最小化', role: 'minimize' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '类型',
|
|||
|
|
submenu: [
|
|||
|
|
{ label: '选项1', type: 'checkbox' },
|
|||
|
|
{ label: '选项2', type: 'checkbox' },
|
|||
|
|
{ label: '选项3', type: 'checkbox' },
|
|||
|
|
{ type: 'separator' },
|
|||
|
|
{ label: 'item1', type: 'radio' },
|
|||
|
|
{ label: 'item2', type: 'radio' },
|
|||
|
|
{ type: 'separator' },
|
|||
|
|
{ label: 'windows', type: 'submenu', role: 'windowMenu'}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '其他',
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: '打开',
|
|||
|
|
icon: 'open.png', // 自定义图标
|
|||
|
|
accelerator: 'ctrl + o', // 快捷键
|
|||
|
|
click() {
|
|||
|
|
console.log('open 执行了')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 02 依据上述数据创建一个 menu
|
|||
|
|
let menu = Menu.buildFromTemplate(menuTemp)
|
|||
|
|
|
|||
|
|
// 03 将上述的菜单添加至 app 中
|
|||
|
|
Menu.setApplicationMenu(menu)
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 动态创建菜单
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.html -->
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- ... -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<button id="addMenu">创建自定义菜单</button>
|
|||
|
|
<input type="text" placeholder="输入自定义菜单项内容" id="menuCon">
|
|||
|
|
<button id="addItem">添加菜单项</button>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
const { remote } = require('electron')
|
|||
|
|
const Menu = remote.Menu
|
|||
|
|
const MenuItem = remote.MenuItem
|
|||
|
|
|
|||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
// 获取相应的元素
|
|||
|
|
let addMenu = document.getElementById('addMenu')
|
|||
|
|
let menuCon = document.getElementById('menuCon')
|
|||
|
|
let addItem = document.getElementById('addItem')
|
|||
|
|
|
|||
|
|
// 自定义全局变量存放菜单项
|
|||
|
|
let menuItem = new Menu()
|
|||
|
|
|
|||
|
|
// 生成自定义的菜单
|
|||
|
|
addMenu.addEventListener('click', () => {
|
|||
|
|
// 创建菜单
|
|||
|
|
let menuFile = new MenuItem({ label: '文件', type: 'normal' })
|
|||
|
|
let menuEdit = new MenuItem({ label: '编辑', type: 'normal' })
|
|||
|
|
let customMenu = new MenuItem({ label: '自定义菜单项', submenu: menuItem })
|
|||
|
|
|
|||
|
|
// 将创建好的自定义菜单添加至 menu
|
|||
|
|
let menu = new Menu()
|
|||
|
|
menu.append(menuFile)
|
|||
|
|
menu.append(menuEdit)
|
|||
|
|
menu.append(customMenu)
|
|||
|
|
|
|||
|
|
// 将 menu 添加至 app 中显示
|
|||
|
|
Menu.setApplicationMenu(menu)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 动态添加菜单项
|
|||
|
|
addItem.addEventListener('click', () => {
|
|||
|
|
// 获取当前 input 输入框中的元素
|
|||
|
|
let con = menuCon.vaule.trim()
|
|||
|
|
if (con) {
|
|||
|
|
menuItem.append(new MenuItem({ label: con, type: 'normal' }))
|
|||
|
|
menuCon.vaule = ''
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 右键菜单的创建
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
const { remote } = require('electron')
|
|||
|
|
const Menu = remote.Menu
|
|||
|
|
|
|||
|
|
let contextTemp = [
|
|||
|
|
{lable: 'Run Code'},
|
|||
|
|
{lable: '转到定义'},
|
|||
|
|
{type: 'separator'},
|
|||
|
|
{
|
|||
|
|
lable: '其他功能',
|
|||
|
|
click() {
|
|||
|
|
alert('其他功能选项');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
let menu = Menu.buildFromTemplate(contextTemp)
|
|||
|
|
|
|||
|
|
// 给鼠标添加监听
|
|||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
window.addEventListener('contextmenu', (ev) => {
|
|||
|
|
ev.preventDefault()
|
|||
|
|
menu.popup({window: remote.getCurrentWindow()})
|
|||
|
|
}, false)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 01 创建一个自定义的菜单内容
|
|||
|
|
* 02 在鼠标右击行为发生后显示出来
|
|||
|
|
*/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 主进程与渲染进程通信
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// main.js
|
|||
|
|
const createWindow = () => {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
let temp = [
|
|||
|
|
{
|
|||
|
|
label: 'send',
|
|||
|
|
click() {
|
|||
|
|
// 主进程主动与渲染进程发送消息
|
|||
|
|
BrowserWindow.getFocusedWindow().webContents.send('mtp', '来自于主进程的消息')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
let menu = Menu.buildFromTemplate(temp)
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
|
|||
|
|
// 主进程接收消息操作
|
|||
|
|
ipcMain.on('msg1', (ev, data) => {
|
|||
|
|
console.log(data)
|
|||
|
|
ev.sender.send('msg1Re', '来自于主进程的异步消息')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
ipcMain.on('msg2', (ev, data) => {
|
|||
|
|
console.log(data)
|
|||
|
|
ev.returnValue = '来自于主进程的同步消息'
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
const { ipcRenderer } = require('electron')
|
|||
|
|
|
|||
|
|
window.onload = () => {
|
|||
|
|
// 获取元素
|
|||
|
|
let aBtn = document.getElementsByTagName('button')
|
|||
|
|
|
|||
|
|
// 01 采用异步的 API 在渲染进程中给主进程发送信息
|
|||
|
|
aBtn[0].addEventListener('click', () => {
|
|||
|
|
ipcRenderer.send('msg1', '来自于渲染进程的一条异步消息')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 02 采用同步的 API 在渲染进程中给主进程发送信息
|
|||
|
|
aBtn[1].addEventListener('click', () => {
|
|||
|
|
let val = ipcRenderer.sendSync('msg2', '来自于渲染进程的一条同步消息')
|
|||
|
|
alert(val)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 接收消息的区域
|
|||
|
|
ipcRenderer.on('msg1Re', (ev, data) => {
|
|||
|
|
alert(data)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
ipcRenderer.on('mtp', (ev, data) => {
|
|||
|
|
alert(data)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 渲染进程间通信
|
|||
|
|
|
|||
|
|
### 通过本地储存存储
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// main.js
|
|||
|
|
// ...
|
|||
|
|
|
|||
|
|
// 定义全局变量存放主窗口 Id
|
|||
|
|
let mainWinId = null
|
|||
|
|
|
|||
|
|
const createWindow = () => {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
mainWinId = mainWin.id
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 接受其他进程发送的数据，完成后续的逻辑
|
|||
|
|
ipcMain.on('openWin2', () => {
|
|||
|
|
// 接收到渲染进程中按钮点击信息之后完成窗口2的打开
|
|||
|
|
let subWin1 = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
parent: BrowserWindow.fromId(mainWinId), // 或定义全局变量
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
window.onload = () => {
|
|||
|
|
// 先获取元素
|
|||
|
|
let oBtn = document.getElementById('btn')
|
|||
|
|
|
|||
|
|
oBtn.addEventListener('click', () => {
|
|||
|
|
ipcRenderer.send('openWin2')
|
|||
|
|
|
|||
|
|
// 打开窗口2之后，保存数据至本地储存
|
|||
|
|
localStorage.setItem('name', '啦啦啦啦')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// subWin1.js
|
|||
|
|
window.onload = () => {
|
|||
|
|
let oInput = document.getElementById('txt')
|
|||
|
|
let val = localStorage.getItem('name')
|
|||
|
|
|
|||
|
|
oInput.value = val
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 通过主进程
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// main.js
|
|||
|
|
|
|||
|
|
// 定义全局变量存放主窗口 Id
|
|||
|
|
let mainWinId = null
|
|||
|
|
|
|||
|
|
const createWindow = () => {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
mainWinId = mainWin.id
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 接受其他进程发送的数据，完成后续的逻辑
|
|||
|
|
ipcMain.on('openWin2', (_, data) => {
|
|||
|
|
// 接收到渲染进程中按钮点击信息之后完成窗口2的打开
|
|||
|
|
let subWin1 = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
// ...
|
|||
|
|
|
|||
|
|
// 由 index -> main* -> subWin
|
|||
|
|
// 转交给进程
|
|||
|
|
subWin1.webContents.on('did-finish-load', () => {
|
|||
|
|
subWin1.webContents.send('its', data)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 由 subWin -> main* -> index
|
|||
|
|
ipcMain.on('stm', (_, data) => {
|
|||
|
|
// 转交给进程
|
|||
|
|
let mainWin = BrowserWindow.fromId(mainWinId)
|
|||
|
|
mainWin.webContents.send('mti', data)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
window.onload = () => {
|
|||
|
|
// 先获取元素
|
|||
|
|
let oBtn = document.getElementById('btn')
|
|||
|
|
|
|||
|
|
// 由 index* -> main -> subWin1
|
|||
|
|
oBtn.addEventListener('click', () => {
|
|||
|
|
ipcRenderer.send('openWin2', '来自于 index 进程')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 由 subWin1 -> main -> index*
|
|||
|
|
// 接受消息
|
|||
|
|
ipcRenderer.on('mti', (_, data) => {
|
|||
|
|
alert(data)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// subWin1.js
|
|||
|
|
window.onload = () => {
|
|||
|
|
// ...
|
|||
|
|
// 在 sub 中发送数据给 index.js
|
|||
|
|
let oBtn = document.getElementById('btn')
|
|||
|
|
// subWin1* -> main -> index
|
|||
|
|
oBtn.addEventListener('click', () => {
|
|||
|
|
ipcRenderer.send('stm', '来自于sub进程')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// index -> main -> subWin1*
|
|||
|
|
// 接收数据
|
|||
|
|
ipcRenderer.on('its', (_, data) => {
|
|||
|
|
alert(data)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Dialog模块
|
|||
|
|
|
|||
|
|
[Electron官网 Dialog文档](https://www.electronjs.org/zh/docs/latest/api/dialog)
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
window.onload = () => {
|
|||
|
|
let oBtn = document.getElementById('btn')
|
|||
|
|
let oBtnErr = document.getElementById('btnErr')
|
|||
|
|
|
|||
|
|
oBtn.addEventListener('click', () => {
|
|||
|
|
remote.dialog.showOpenDialog({
|
|||
|
|
defaultPath: __dirname, // 默认打开目录
|
|||
|
|
buttonLabel: '请选择', // 按钮上的文字
|
|||
|
|
title: '啦啦啦啦', // 对话框标题
|
|||
|
|
properties: ['openFiles', 'multiSelections'], // 文件类型
|
|||
|
|
filters: [ // 文件类型过滤
|
|||
|
|
{'name': '代码文件', extensions: ['js', 'json', 'html']},
|
|||
|
|
{'name': '图片文件', extensions: ['ico', 'jpeg', 'png']},
|
|||
|
|
{'name': '媒体类型', extensions: ['avi', 'mp4', 'mp3']},
|
|||
|
|
],
|
|||
|
|
}).then(ret => {
|
|||
|
|
alert(ret)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
oBtnErr.addEventListener('click', () => {
|
|||
|
|
remote.dialog.showErrorBox('自定义标题', '当前错误内容')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## shell 与 iframe
|
|||
|
|
|
|||
|
|
### shell
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.html -->
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- ... -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h2>shell and iframe</h2>
|
|||
|
|
<!-- 默认行为是在当前页面打开网页 -->
|
|||
|
|
<a id="openUrl" href="https://cantyonion.site">打开url</a>
|
|||
|
|
<br><br>
|
|||
|
|
<button id="openFolder">打开目录</button>
|
|||
|
|
<script src="index.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
window.onload = () => {
|
|||
|
|
// 1 获取元素
|
|||
|
|
let oBtn1 = document.getElementById('openUrl')
|
|||
|
|
let oBtn2 = document.getElementById('openFolder')
|
|||
|
|
|
|||
|
|
oBtn1.addEventListener('click', (ev) => {
|
|||
|
|
ev.preventDefault() // 阻止默认行为
|
|||
|
|
|
|||
|
|
let urlPath = oBtn1.getAttribute('href')
|
|||
|
|
|
|||
|
|
// 打开外部浏览器
|
|||
|
|
shell.openExternal(urlPath)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
oBtn2.addEventListener('click', () => {
|
|||
|
|
// 打开当前目录
|
|||
|
|
shell.showItemInFolder(path.resolve(__filename))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### iframe
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.html -->
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- ... -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<iframe src="https://cantyonion.site" frameborder="0" id="webview"></iframe>
|
|||
|
|
<script src="index.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
ipcRenderer.on('open', () => {
|
|||
|
|
let iframe = document.getElementById('webview')
|
|||
|
|
iframe.src = 'https://cantyonion.site/git/'
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
``` javascript
|
|||
|
|
// main.js
|
|||
|
|
const createWindow = () => {
|
|||
|
|
let mainWin = new BrowserWindow({
|
|||
|
|
// ...
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
let tmp = [
|
|||
|
|
{
|
|||
|
|
label: '菜单',
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: '关于',
|
|||
|
|
click() {
|
|||
|
|
shell.openExternal('https://cantyonion.site')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '打开',
|
|||
|
|
click() {
|
|||
|
|
BrowserWindow.getFocusedWindow().webContents.send('open')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
let menu = Menu.buildFromTemplate(tmp)
|
|||
|
|
Menu.setApplicationMenu(menu)
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
// ...
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 消息通知
|
|||
|
|
|
|||
|
|
前往[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Notification)查看详细内容
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
window.onload = () => {
|
|||
|
|
let oBtn = document.getElementById('btn')
|
|||
|
|
|
|||
|
|
oBtn.addEventListener('click', () => {
|
|||
|
|
let option = {
|
|||
|
|
title: '啦啦啦', // 通知标题
|
|||
|
|
body: 'ok,哈哈哈哈', // 信息体
|
|||
|
|
icon: 'c.png' // 图标
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let mayNotification = new window.Notification(option.title, option)
|
|||
|
|
|
|||
|
|
mayNotification.onclick = () => {
|
|||
|
|
alert("点击了消息页卡")
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 全局快捷键
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// main.js
|
|||
|
|
// ...
|
|||
|
|
app.on('ready', () => {
|
|||
|
|
// 注册
|
|||
|
|
let ret = globalShortcut.register('ctrl + q', () => {
|
|||
|
|
console.log("快捷键注册成功")
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (!ret) {
|
|||
|
|
console.log('注册失败')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断某个快捷键是否已经注销
|
|||
|
|
console.log(globalShortcut.isRegistered('ctrl + q'))
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
app.on('will-quit', () => {
|
|||
|
|
globalShortcut.unregister('ctrl + q')
|
|||
|
|
|
|||
|
|
// 自动注销使用快捷键
|
|||
|
|
globalShortcut.unregisterAll()
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 剪切板模块
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.html -->
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- ... -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h2>剪切板</h2>
|
|||
|
|
<input type="text" placeholder="输入需要复制的内容">
|
|||
|
|
<button>复制</button>
|
|||
|
|
<br><br>
|
|||
|
|
<input type="text" placeholder="将内容粘贴至此处">
|
|||
|
|
<button>粘贴</button>
|
|||
|
|
<br><br>
|
|||
|
|
<button id="clipImg">将图片拷贝至剪切板再粘贴至界面</button>
|
|||
|
|
<script src="index.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// index.js
|
|||
|
|
// ...
|
|||
|
|
|
|||
|
|
window.onload = () => {
|
|||
|
|
// 获取元素
|
|||
|
|
let aBtn = document.getElementsByTagName('button')
|
|||
|
|
let aInput = document.getElementsByTagName('input')
|
|||
|
|
let oBtn = document.getElementById('clipImg')
|
|||
|
|
let ret = null
|
|||
|
|
|
|||
|
|
aBtn[0].onclick = () => {
|
|||
|
|
// 复制内容
|
|||
|
|
ret = clipboard.writeText(aInput[0].value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
aBtn[1].onclick = () => {
|
|||
|
|
// 粘贴内容
|
|||
|
|
aInput[1].value = clipboard.readText(ret)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
oBtn.onclick = () => {
|
|||
|
|
// 将图片放置于剪切板的时候要求图片类型属于 nativeImage 类型
|
|||
|
|
let oImage = nativeImage.createFromPath('c.png')
|
|||
|
|
clipboard.writeImage(oImage)
|
|||
|
|
|
|||
|
|
// 将剪切板中的图片作为 DOM 元素显示在界面上
|
|||
|
|
let oImg = clipboard.readImage()
|
|||
|
|
let oImgDom = new Image()
|
|||
|
|
oImgDom.src = oImg.toDataURL() // 转换为base64
|
|||
|
|
document.body.appendChild(oImgDom)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|