上一篇 electron进程间通讯（IPC模块通讯）
下一篇 【实战】electron 制作远程控制软件（预）
目标: 学会使用简单的electron API 解决开发需求
electron 的主进程和渲染进程的模块
- electron 应用开发文档 ：https://www.electronjs.org/docs/api
- 由于我们前面已经大概摸清了electron 怎么使用, 下面就直接上关键性代码
remote 模块
所属: 渲染进程
功能: 在渲染进程中使用主进程的模块
需求: 在窗口中打开一个新窗口
- 目录结构
learn_electron/
├── package.json
├── main.js
├── remote.js
├── index.html
└── remote.html
// index.html
<button id="btn">打开新窗口</button>
<script src="./remote.js"></script>
// remote.html
<h2>我是通过remote模块打开的窗口</h2>
// main.js
const { app, BrowserWindow } = require('electron');
// 声明要打开的主窗口
let mainWindow = null;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 800,
// 在渲染进程中使用node，remote
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
});
mainWindow.loadFile('index.html'); // 加载网页
mainWindow.on('close', () => {
mainWindow = null;
})
})
// remote.js
// 从remote模块中获取到BrowserWindow
const {BrowserWindow} = require('electron').remote;
window.onload = function () {
const btn = document.querySelector("#btn");
let newWin = null;
btn.onclick = () => {
// 创建新窗口
newWin = new BrowserWindow({
width: 300,
height: 300
})
// 加载新窗口的文件
newWin.loadFile("remote.html");
newWin.on("closed", () => {
newWin = null;
})
}
}
结果
menu模块
所属: 主进程
功能: 创建原生应用菜单和上下文菜单
需求: 创建简单原生应用菜单和上下文菜单
- Menu.setApplicationMenu(null); 不显示顶部菜单
- win.webContents.openDevTools(); 打开调试模式
原生应用菜单
// main.js
const { app, BrowserWindow } = require('electron');
let win = null;
app.on('ready', () => {
win = new BrowserWindow({
width: 800,
height: 500,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
// 打开调试模式
win.webContents.openDevTools();
// 加载menu 相当于menu.js 也是主进程
require("./menu.js");
win.on("closed", () => {
win = null;
})
})
-------------------------------------------------------------------------
// menu.js
const { Menu, BrowserWindow } = require('electron');
// 菜单模板
let template = [
{
label: "菜单A",
submenu: [ // 子菜单
{
label: "A-1",
accelerator: "ctrl+a", // 设置菜单快捷键
click: () => { // 绑定点击事件
let win = new BrowserWindow({
width: 300,
height: 300,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
win.loadFile("index.html");
win.on("close", () => {
win = null;
})
}
},
{ label: "A-2", submenu: [{ label: "A-2-2" }] }, // 多级菜单
{ label: "A-3" }
]
},
{
label: "菜单B",
submenu: [
{ label: "B-1" },
{ label: "B-2" },
{ label: "B-3" }
]
}
]
let m = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m); // 传入null 则不显示菜单
结果
上下文菜单(右键菜单)
- contextmenu: h5上下文菜单事件
- remote.getCurrentWindow(): 返回 BrowserWindow 此网页所属的窗口
<script>
const { remote } = require('electron');
let template = [
{ label: "复制", accelerator: "ctrl+c" },
{ label: "粘贴", accelerator: "ctrl+v" }
];
let m = remote.Menu.buildFromTemplate(template);
window.onload = function () {
window.addEventListener("contextmenu", (e) => {
e.preventDefault();
m.popup({ window: remote.getCurrentWindow() })
})
}
</script>
结果
globalShortcut模块
所属: 主进程
功能: 在应用程序没有键盘焦点时，监听键盘事件
需求: 创建和注销全局快捷键
// 注册快捷键
globalShortcut.register('ctrl+e', () => {
win.loadURL("https://www.jianshu.com"); // 加载网站 https://www.jianshu.com
})
// 判断是否注册快捷键成功
const isRegister = globalShortcut.isRegistered("ctrl+e") ? "register true" : "resgister false";
console.log(isRegister); // true/false
app.on('will-quit', () => {
// 注销单个快捷键
globalShortcut.unregistter("ctrl+e");
// 注销全局快捷键
globalShortcut.unregistterAll();
})
clipboard模块
所属: 主进程、渲染进程
功能: 在系统剪贴板上执行复制和粘贴操作。
需求: 复制一段文字
- clipboard.writeText(text); 复制一段文字text
<body>
激活码：
<span id="code">wbrwihfhwhfhwuheruhwue</span>
<button id="btn">复制激活码</button>
<script>
const { clipboard } = require('electron');
const code = document.getElementById("code");
const btn = document.getElementById("btn");
btn.onclick = () => {
clipboard.writeText(code.innerHTML);
alert("复制成功");
}
</script>
</body>
shell模块
所属: 主进程、渲染进程
功能: 使用默认应用程序管理文件和 url
需求: 在用户的默认浏览器中打开 URL
- shell.openExternal(href); 在默认浏览器中打开href链接
const { shell } = require('electron')
shell.openExternal('https://github.com')
需求: 打开子窗口，并接收子窗口的消息
// 打开子窗口
window.open('popup.html');
// 接收信息
window.addEventListener('message', (msg) => {
console.log(msg.data);
})
// popup.html
<body>
<h2>我是弹出子窗口</h2>
<button id="pop-btn">向父窗口传递信息</button>
<script>
let btn = document.getElementById("pop-btn");
btn.onclick = (e) => {
window.opener.postMessage("我是子窗口传递过来的信息");
}
</script>
</body>
browserView模块
所属: 主进程
功能: 创建和控制视图
需求: 创建一个视图
-
BrowserView被用来让BrowserWindow嵌入更多的 web 内容。 它就像一个子窗口，除了它的位置是相对于父窗口。 这意味着可以替代webview标签.
let bv = new BrowserView();
mainWindow.setBrowserView(bv);
bv.setBounds({ x: 0, y: 100, width: 1000, height: 600 })
bv.webContents.loadURL('https://www.baidu.com')
dialog模块
所属: 主进程
功能: 显示用于打开和保存文件、警报等的本机系统对话框。
需求: 创建一个警告消息
dialog.showMessageBox({
type: "warning",
title: "警告消息title",
message: "我是message",
buttons: ["收到", "忽略"]
}).then(result => {
console.log(result.response) // 数组下标
}).catch(err => {
console.log(err);
})
需求: 打开文件
<button id="btn">打开图片</button>
<img id="img" style="width: 100%;" src="" alt="">
let btn = document.getElementById("btn");
btn.onclick = () => {
dialog.showOpenDialog({
title: "请选择照片",
defaultPath: "bg.jpg",
filters: [
{
name: "img",
extensions: ['jpg', "png"], // 只选择jsp, png
buttonLabel: "确认"
}
]
}).then(result => {
console.log(result);
let img = document.getElementById("img");
img.setAttribute("src", result.filePaths[0])
}).catch(err => {
console.log(err);
})
}
需求: 保存一个文件
dialog.showSaveDialog({
title: "保存"
}).then(result => {
console.log(result);
fs.writeFileSync(result.filePath, "aaa")
}).catch(err => {
console.log(err);
})
拓展
- 监听网络改变
// online offline 第一次不会触发, 只能监听网络变化
window.ononline = () => {
alert("连上网络");
}
window.onoffline = () => {
alert("断网了。。");
}
- 消息提醒
let option = {
title: "来订单了",
body: "body"
}
new window.Notification(option.title, option);
END
