electron 自定义协议 - rxliuli blog
source link: https://blog.rxliuli.com/p/ff86c5343d38460a8e78a62617f9eace/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
有时候需要与其他程序进行交互时，自定义协议是一个不错的选择 – 它能在程序为启动时启动程序然后处理其它程序的动作，而这是其它解决方案，包括 HTTP 请求、共享数据库不能比的。其实日常生活中也有现成的例子，迅雷的自定义协议下载链接、BitTorrent 协议、百度网盘启动本地客户端等等。
- 让程序保持单例启动
- 设置客户端支持的协议（在 Windows 中会写入到注册表）
- 处理命令行参数找到其中需要的
url信息 - 监听
ready和second-instance事件
让程序保持单例启动
参考: app.requestSingleInstanceLock()
注: 仅在单例模式下才能监听second-instance事件
1
2
3
4
5
6
// 请求单例锁，避免打开多个 electron 实例
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
app.quit();
return;
}
设置客户端支持的协议（在 Windows 中会写入到注册表）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { app } from "electron";
import path = require("path");
/**
* 客户端默认支持的协议
*/
export class DefaultProtocolClient {
constructor(public readonly protocol: string) {}
/**
* 注册一个默认支持打开的协议
*/
register() {
// 开发模式下在 window 运行需要做兼容
if (
process.env.NODE_ENV === "development" &&
process.platform === "win32"
) {
// 设置 electron.exe 和 app 的路径
app.setAsDefaultProtocolClient(this.protocol, process.execPath, [
path.resolve(process.argv[1]),
]);
} else {
app.setAsDefaultProtocolClient(this.protocol);
}
}
/**
* 从命令行参数中找到 url
* @param argv
*/
findUrl(argv: string[]): string | undefined {
const regExp = new RegExp(`^${this.protocol}://`);
return argv.find((str) => regExp.test(str));
}
}
const defaultProtocolClient = new DefaultProtocolClient("custom-protocol");
await defaultProtocolClient.register();
处理命令行参数找到其中需要的 url 信息
添加函数 handleDefaultProtocol 从命令行参数中找到 url 然后处理它。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* 处理客户端支持的默认协议
* @param argv
*/
async function handleDefaultProtocol(argv: string[]) {
const url = defaultProtocolClient.findUrl(argv);
if (!url) {
return;
}
await dialog.showMessageBox({
type: "info",
message: "window protocol 自定义协议打开",
detail: ` 链接:${url}`,
});
}
监听 ready 和 second-instance 事件
1
2
3
4
5
6
7
app.addListener("second-instance", async (event, argv) => {
await handleDefaultProtocol(argv);
});
app.addListener("ready", async () => {
await createMainWindow();
await handleDefaultProtocol(process.argv);
});
既然我们自定义协议的目的是让外部程序调用，那么如何使用外部调用就很重要了。
首先检查注册表中是否已经包含它了，操作 ctrl+s => 搜索注册表 => 进入注册表 => ctrl+f 查找 custom-protocol
浏览器打开
如上图所示，可以简单在浏览器中输入 custom-protocol://test 来启动程序。
nodejs 示例
在 nodejs 中使用 npm 包 open 可以轻易打开自定义默认链接。
1
2
3
import * as open from "open";
open("custom-protocol://test");
其实本质上就是拼接命令，然后执行系统命令打开 url，参考它的实现。
Recommend
-
13
rxliuli blog 博客迁_ 2020年12月29日 早上 355 字 ...
-
15
最近看完了 1984 这本小说，在之后也补了一下电影 Youtube 正版电影 一些设定令人惊奇 真理部：负责新闻、娱乐、教育、艺术 和平部：负责战争 有爱不：负责维持法律和秩序 富裕部：负...
-
13
本文最后更新于：2020年12月31日 上午 框架及社区react: 前端流行的 mvc 框架
-
19
该清单只是吾辈所用，使用工具因人而异，若是你对清单中的内容有何异议，可以在下方进行留言，吾辈会尽快阅读并回复！ 附：列出的 Google Drive 链接是因为某些第三方 App 不在 Play Store 之中，而且在可预期的很长时间内都不可能在（Yout...
-
20
JavaScript 中的 ES6 Proxy Ja_ 2020年12月30日 下午 3.3k 字 ...
-
23
为什么需要它有些时候不得不需要限制并发 fetch 的请求数量，避免请求过快导致 IP 封禁 需要做到什么允许限制 fetch 请求同时存在的数量 时间过久便认为是超时了 该方法的请求是无序的！...
-
26
最近想在家里搭个本地服务器玩，于是便买了个树莓派 4。现在，吾辈已经让它在纸盒里默默吃灰了。 为什么吾辈搭建服务器？ 为什么吾辈要选择树莓派？ 以及为何最终它还是吃灰了？ 上面这些问题吾辈会在下面一一解答...
-
7
electron 开发系列博客 e_ 2020年12月30日 上午 283 字 ...
-
17
在很多生产项目中，我们希望自定义 electron 窗口顶栏，因为它确实非常简陋。 在渲染层实现自定义顶栏实际上，核心的代码就是添加一个为顶栏的元素添加 css 样式。在 electron 环境，有 -webkit-app-region: drag; 属性的元素可以...
-
7
突然之间 electron 就不能启动了删除 node_modules 重新 yarn 看看？ 打包之后的程序页面空白实际上是 electron 无法正常加载页面，原因很多 路径问题，解压 asar 查看实际路径（main.js 中 loadUrl...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK