客户端开发(Electron)URL远程启动
2023-02-18 16:41:27 时间
Dear,大家好,我是“前端小鑫同学”,?长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
本篇说明:
我们在使用一些客户端应用的时候,尤其是用的最多的微信,你在微信客户端打开一些页面的时一般都会默认在微信的浏览器打开,并且在右上角提供了按钮支持在你电脑上装的浏览器里打开。这样的功能是如何实现的呢?我们一起来走进Electron Url 远程启动。
环境说明:
设备环境Windows;
代码环境:快速入门
提示说明:
客户端开发在不同的平台有不同的特性;
不同的平台有不同的API。
客户端操作时:在浏览器打开:
第一步:在preload中定义打开浏览器的桥接函数
通过渲染进程发送open事件
桥接函数
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("shell", {
open: () => ipcRenderer.send("shell:open"),
});
第二步:绑定触发的事件
绑定函数
document.getElementById("open-in-browser").addEventListener("click", () => {
shell.open();
});
注:桥接函数会绑定到window对象上
第三步:主进程中监听shell:open事件
主进程做监听:
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点:
- windows中第二个窗口实例处理;
- 注册处理协议。
相关文章
- React源码学习进阶篇(一)新版React如何调试源码?
- React源码学习进阶(二)初识Fiber架构
- React源码学习进阶(三)rootFiber的创建流程
- React源码学习进阶(四)render流程的入口逻辑详解
- React源码学习进阶(五)beginWork如何处理Fiber
- React源码学习进阶(六)completeWork究竟做了什么
- React源码学习进阶(七)挂载阶段的commitWork
- React源码学习进阶(八)setState底层逻辑
- MATLAB随机波动率SV、GARCH用MCMC马尔可夫链蒙特卡罗方法分析汇率时间序列|附代码数据
- R语言Apriori关联规则、kmeans聚类、决策树挖掘研究京东商城网络购物用户行为数据可视化|附代码数据
- 电量计基础知识介绍:
- 瞧瞧别人家的API接口,那叫一个优雅
- 暴增到 1k star 的开源项目,原来长这样!
- 程序员必备小技能:mac文件备份和清理、常用工具的安装和配置
- 前端小技能:Chrome DevTools中的操作技巧
- SOLIDWORKS 基于浏览器的角色 TOP 10 增强功能
- java小技能:对list集合根据条件进行分组、过滤和字段筛选
- mybatis-plus小技能
- Java小技能:快速创建List常用几种方式
- DBA的技术方向