Electron网页调起客户端(伪协定)

置信大家平时应用浏览器时遇到过点击一个链接或者按钮，浏览器会询问是否关上客户端，挪动端和桌面端都有这种状况。比方百度网盘，在网页上点击链接时会拉起百度网盘的客户端进行下载，实际上这些性能都是通过注册伪协定来实现的，本篇次要介绍如何通过伪协定调起Electron客户端，并获取伪协定传过来的参数。

实现目标

为Electron增加一个伪协定(URL Scheme 协定)。
在浏览器网页上增加一个伪协定的点击。拉起利用。

Mac的URL Scheme

Mac上每个利用包中都有一个info.plist文件，这个个别用作于一些拜访权限的配置及软件的信息，ios开发的同学可能比拟相熟，注册URL Scheme实际上是在这个文件中增加对应的key，value。咱们能够查看一些软件的URL Scheme：

访达中找到桌面软件，比方vscode。
右键显示包内容。
进入Contents文件夹。
找到info.plist，间接点击查看或者用vscode关上，这个CFBundleURLName就是协定名，CFBundleURLSchemes为协定内容
浏览器输出对应的URL Scheme，vscode://file/${filePath}，filePath为文件的pwd门路,看是否vscode能关上对应文档。

Windows的URL Scheme

Windows上是通过在注册表中增加URL Protocol来实现伪协定的，其实说简略点也是增加key，value值。同上，咱们查看一下vscode：

win+r输出regedit确定。
找到HKEY_CLASSES_ROOT\vscode，不好找的能够Ctrl+F勾选数据进行搜寻'URL:vscode'，能够找到两处HKEY_CURRENT_USER\Software\Classes\vscode，当然这两处值都是一样的。
咱们能够右键vscode目录将其导出成一个reg文件，能够看到关键处在两点，一个URL:vscode，还有一个是vscode的启动门路。
也就是说检测到vscode://会执行上面的exe命令，%1是唤起软件的伪协定，浏览器关上vscode://file/${filePath}试试，比方我的vscode://file/F:/work/electron/vue-cli-electron/README.md，看是否vscode能关上对应文档
```
Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\vscode]"URL Protocol"=""@="URL:vscode"[HKEY_CLASSES_ROOT\vscode\shell][HKEY_CLASSES_ROOT\vscode\shell\open][HKEY_CLASSES_ROOT\vscode\shell\open\command]@="\"E:\\Microsoft VS Code\\Code.exe\" --open-url -- \"%1\""
```

实现URL Scheme

这里介绍一下Electron上实现伪协定的两种形式：

通过setAsDefaultProtocolClient注册协定

这个要讲的不多，看文档的货色链接，在主过程间接写上就能够：

import { app } from 'electron'if (!app.isDefaultProtocolClient('vue-cli-electron')) {  app.setAsDefaultProtocolClient('vue-cli-electron')}

打包后装置软件，关上软件，尝试在浏览器中关上vue-cli-electron://，看是否有唤起提醒。

长处：简略，快捷。
毛病：首先这个是在主过程中执行的，也就是说首次装置软件后必须关上软件后才会写入对应的URL Scheme，软件卸载时Mac的info.plist在包内，一起删除了，但Windows是写入注册表的，并不会被被动清理，卸载软件后再关上伪协定还是会有关上软件的提醒。

electron-builder + nsis

应用electron-builder进行配置在能够打包（装置）时就写入伪协定，并且能够在卸载的拓展宏里进行注册表的清理，应用此形式的话，计划1的注册能够除去掉。

Mac配置：在vue.config.js中的builderOptions增加electron-builder的配置链接：
```
protocols: [{name: 'vue-cli-electron',schemes: ['vue-cli-electron']}],
```
这里要留神的是文档展现有点问题，fileAssociations和protocols是属于同级的，并不是fileAssociations外面的。这样咱们就实现了Mac零碎伪协定的配置。
Windows配置：在我的项目根目录新建installer.nsh，同样的在builderOptions的nsis中增加include: "installer.nsh"
```
!macro customInstall  DeleteRegKey HKCR "vue-cli-electron"  WriteRegStr HKCR "vue-cli-electron" "" "URL:vue-cli-electron"  WriteRegStr HKCR "vue-cli-electron" "URL Protocol" ""  WriteRegStr HKCR "vue-cli-electron\shell" "" ""  WriteRegStr HKCR "vue-cli-electron\shell\Open" "" ""  WriteRegStr HKCR "vue-cli-electron\shell\Open\command" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME} %1"!macroend!macro customUnInstall  DeleteRegKey HKCR "vue-cli-electron"!macroend
```
这里简略介绍一下，customInstall是electron-builder提供的NSIS拓展宏，看名字这个是装置时执行的，同理customUnInstall是卸载执行，其余状况参考链接
DeleteRegKey是删除注册表
HKCR即咱们下面说的HKEY_CLASSES_ROOT的简写，HKCU->HKEY_CURRENT_USER，HKLM->HKEY_LOCAL_MACHINE，HKU->HKEY_USERS
WriteRegStr是写入注册表
$INSTDIR是咱们抉择的装置门路
${APP_EXECUTABLE_FILENAME}是软件exe名

好了，当初咱们能够打包装置，尝试在浏览器中关上vue-cli-electron://，Windows卸载软件后再在浏览器中关上vue-cli-electron://看还会有提醒没有。
长处：万金油模式，自由度大，性能全面。
毛病：麻烦，须要肯定的nsis常识。

开发环境配置伪协定

下面两种形式都说完了，这算是一个补充吧，毕竟咱们在开发时不可能写一点就打个包测试，挺费时间的。
咱们在开发时个别间接应用setAsDefaultProtocolClient进行伪协定设置，然而设置后在关上网页上的伪协定链接时会报一个谬误，然而打包后又是好好的，这是什么造成开发和打包之后的差别呢？
这里就补充一个知识点，咱们的开发环境是怎么启动的，咱们能够打印一下process.argv，这个就是Electron的启动参数，咱们能够看到开发环境是（Mac同理，门路不同）：

[  'F:\\work\\electron\\vue-cli-electron\\node_modules\\electron\\dist\\electron.exe',  'dist_electron']

看到这里大多数同学可能曾经明确了，开发环境是启动一个node包的exe，而后传入咱们webpack构建好的目录而启动的服务，而这个参数在打包后则是软件的exe文件

xxxxxxxx\\electron开发.exe

咱们看一下残缺的伪协定app.setAsDefaultProtocolClient(protocol[, path, args])，protocol是协定名，path是Electron可执行文件门路（也就是exe地址，默认process.execPath），args传递给可执行文件的参数，默认为空数组。
那么也就得出答案了：

app.setAsDefaultProtocolClient('vue-cli-electron')这个注册时只有protocol和path，故在开发环境通过vue-cli-electron://启动时，只启动了那个node包的exe，咱们前面的构建目录并没有在注册时写入。

那么咱们只须要进行一下判断，把这个目录追加到args里即可

if (app.isPackaged) { // 是否处于打包  app.setAsDefaultProtocolClient('vue-cli-electron')} else {  app.setAsDefaultProtocolClient('vue-cli-electron', process.execPath, [    path.resolve(process.argv[1])  ])}

注：如何你开发的协定和打包后的协定名一样的话，同时都启动的话，调用伪协定可能会启动到开发的哦，当初试试本地开发是否通过伪协定拉起咱们的客户端。

原本想把如何获取伪协定链接中的参数也放在这一期的，然而感觉这样篇幅太长了不利于浏览，那么放在下一期更新吧，敬请期待。

本系列更新只有利用周末和下班时间整顿，比拟多的内容的话更新会比较慢，心愿能对你有所帮忙，请多多star或点赞珍藏反对一下

本文地址：https://xuxin123.com/electron/url-scheme
本文github地址：链接