我的GitHub
0%

无星的electron之旅(六)——electron 应用协议唤起

一、背景

应用希望能通过其他应用唤起,这应该是个非常常见的需求

二、如何唤起

搜半天,全是基于协议的。protocol

接着会发现关键代码

官网地址

1
app.setAsDefaultProtocolClient(PROTOCOL, process.execPath, args);

但是这有一个关键点:你至少运行过一次程序,才能注册这个协议!!!

这就让人很难受了。

那么我们需要想想,有没有办法在安装的时候把协议写进去?

答案是:有。

如何在安装的时候把协议写进去?

既然要在安装的时候写进去,那么必定需要在打包的地方下功夫。

这里我使用的是electron-builder来进行打包(我的项目是基于vue-cli4配合vue-cli-plugin-electron-builder创建的)

因此我们的打包配置文件中,需要写入protocols配置

注意,mac和Windows协议是分开的。

1

这里我们解释一下

1.mac上直接在这写就行。(亲测可行)

mac的协议唤起,实质上是dmg安装文件后的info.plist文件下的URLType,干过iOS开发的同事应该都有经验。

路径是/Application/你的应用程序 右键显示包内容 /Contents/Info.plist

3

2.Windows需要额外写脚本 (写本博客的时候,我还没测试过Windows)亲测可行

5
2

Windows需要通过指定打包方式nsis,并在打包时注入执行的sh脚本,以达到安装注入协议的目的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# windows,写入electron的唤起协议
# !macro 定义宏
# customInstall 会在文件安装后自动调用
# DetailPrint 执行打印
# DeleteRegKey 删除原有的注册表
# WriteRegStr 写入注册表
# $INSTDIR 所选的文件安装路径

!macro customInstall
DetailPrint "Register szyxqca URI Handler"
DeleteRegKey HKCR "szyxqca"
WriteRegStr HKCR "szyxqca" "" "URL:szyxqca"
WriteRegStr HKCR "szyxqca" "URL Protocol" ""
WriteRegStr HKCR "szyxqca\shell" "" ""
WriteRegStr HKCR "szyxqca\shell\Open" "" ""
WriteRegStr HKCR "szyxqca\shell\Open\command" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME} %1"
!macroend


!macro customUnInstall
DeleteRegKey HKCR "szyxqca"
!macroend

这里有另一个注意的点,就是卸载的时候最好能卸载掉对应的协议。(用户体验至上)

然后打包即可

到目前为止,你的应用应该就可以被唤起了

setAsDefaultProtocolClient是不需要写的

三、怎么唤起应用测试?

还记得之前你写的协议名称么?比如我这里叫szyxqca

打开浏览器,在地址栏输入

1
szyxqca://

即可

理论上你的浏览器会唤起你的应用

4

如果要传参呢?

1
szyxqca://startapp/here?xxx=123&xxx2=222

这里的startapp/here其实都是没用的,主要是配合添加host和path以及query,这种格式比较适合后期延展

四、如何通过这种方式传参,怎么接收呢?

需要两个生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// windows唤起
app.on('second-instance', (event, argv) => {
if (process.platform === 'win32') {
logger.warn('唤起');
logger.warn(event, argv);
//TODO:还没写
}
});

// macOS唤起
app.on('open-url', (event, urlStr) => {
logger.warn('唤起');
logger.warn(event, urlStr);
// 解析数据
const urlObj = new URL(urlStr);
const { searchParams } = urlObj;
//数据
const xxx = searchParams.get('xxx');
const xxx2 = searchParams.get('xxx2');
});

五、可能碰到的问题:

1.唤醒的app不对

我在mac上唤醒app,一直莫名其妙唤起了./node_modules/electron/dist/Electron.app,然后我把所有的node_modules删了,并重新打开了一下app,再唤起,正常了。

实测直接把dmg直接发给同事,他安装以后可以直接唤醒,不会错误唤醒。

可能是electron的bug吧

参考文章

electron唤起原理

两种方式的mac/win注册协议唤起Electron应用

唤起示例

配置查看

通过协议唤起Electron应用

electron-builder

我是阿星,阿星的阿,阿星的星!