客户端开发（Electron）URL远程启动

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

---

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

本篇说明：

我们在使用一些客户端应用的时候，尤其是用的最多的微信，你在微信客户端打开一些页面的时一般都会默认在微信的浏览器打开，并且在右上角提供了按钮支持在你电脑上装的浏览器里打开。这样的功能是如何实现的呢？我们一起来走进Electron Url 远程启动。

环境说明：

1. 设备环境Windows；
2. 代码环境：快速入门

提示说明：

1. 客户端开发在不同的平台有不同的特性；
2. 不同的平台有不同的API。

客户端操作时：在浏览器打开：

第一步：在preload中定义打开浏览器的桥接函数

1. 通过渲染进程发送open事件
2. 桥接函数

const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("shell", {
  open: () => ipcRenderer.send("shell:open"),
});

第二步：绑定触发的事件

1. 绑定函数

document.getElementById("open-in-browser").addEventListener("click", () => {
  shell.open();
});

2. 注：桥接函数会绑定到window对象上

第三步：主进程中监听shell:open事件

1. 主进程做监听：

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");
}

第二步：因我们在windows平台使用，故需要做兼容处理

• 关键事件：second-instance

app.on("second-instance", (event, commandLine, workingDirectory) => {
    if (mainWindow) {
      if (mainWindow) {
          //如果被最小化就恢复，否则激活主窗口
        if (mainWindow.isMinimized()) mainWindow.restore();
        mainWindow.focus();
      }
    }
  });

完整main代码：

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点：

1. windows中第二个窗口实例处理；
2. 注册处理协议。

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。