Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
我们在使用一些客户端应用的时候,尤其是用的最多的微信,你在微信客户端打开一些页面的时一般都会默认在微信的浏览器打开,并且在右上角提供了按钮支持在你电脑上装的浏览器里打开。这样的功能是如何实现的呢?我们一起来走进Electron Url 远程启动。
设备环境Windows;
代码环境:快速入门
客户端开发在不同的平台有不同的特性;
不同的平台有不同的API。
通过渲染进程发送open事件
桥接函数
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("shell", {
open: () => ipcRenderer.send("shell:open"),
});
绑定函数
document.getElementById("open-in-browser").addEventListener("click", () => {
shell.open();
});
注:桥接函数会绑定到window对象上
主进程做监听:
ipcMain.on("shell:open", () => {
const pagePath = path.join("file://", __dirname, "index.html");
shell.openExternal(pagePath);
});
关键API:setAsDefaultProtocolClient
if (process.defaultApp) {
if (process.argv.length >= 2) {
app.setAsDefaultProtocolClient("electron-fiddle", process.execPath, [
path.resolve(process.argv[1]),
]);
}
} else {
app.setAsDefaultProtocolClient("electron-fiddle");
}
关键事件:second-instance
app.on("second-instance", (event, commandLine, workingDirectory) => {
if (mainWindow) {
if (mainWindow) {
//如果被最小化就恢复,否则激活主窗口
if (mainWindow.isMinimized()) mainWindow.restore();
mainWindow.focus();
}
}
});
const { app, BrowserWindow, ipcMain, shell, dialog } = require("electron");
const path = require("path");
// 注册协议处理器
if (process.defaultApp) {
if (process.argv.length >= 2) {
app.setAsDefaultProtocolClient("electron-fiddle", process.execPath, [
path.resolve(process.argv[1]),
]);
}
} else {
app.setAsDefaultProtocolClient("electron-fiddle");
}
let mainWindow = null;
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
nativeWindowOpen: true,
},
});
mainWindow.loadFile("index.html");
};
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
app.quit();
} else {
// 当第二个实例被执行并且调用 app.requestSingleInstanceLock() 时,这个事件将在你的应用程序的首个实例中触发
app.on("second-instance", (event, commandLine, workingDirectory) => {
if (mainWindow) {
if (mainWindow) {
//如果被最小化就恢复,否则激活主窗口
if (mainWindow.isMinimized()) mainWindow.restore();
mainWindow.focus();
}
}
});
app.whenReady().then(() => {
createWindow();
});
}
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
ipcMain.on("shell:open", () => {
const pagePath = path.join("file://", __dirname, "index.html");
shell.openExternal(pagePath);
});
复制代码
本篇涉及到了以下2点: