Electron网页调起客户端

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

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

实现目标

  1. 为Electron添加一个伪协议(URL Scheme 协议)。
  2. 在浏览器网页上添加一个伪协议的点击。拉起应用。

Mac的URL Scheme

Mac上每个应用包中都有一个info.plist文件,这个一般用作于一些访问权限的配置及软件的信息,ios开发的同学可能比较熟悉,注册URL Scheme实际上是在这个文件中添加对应的key,value。我们可以查看一些软件的URL Scheme

  1. 访达中找到桌面软件,比如vscode。
  2. 右键显示包内容。
  3. 进入Contents文件夹。
    Electron网页调起客户端
  4. 找到info.plist,直接点击查看或者用vscode打开,这个CFBundleURLName就是协议名,CFBundleURLSchemes为协议内容
    Electron网页调起客户端
    Electron网页调起客户端
  5. 浏览器输入对应的URL Schemevscode://file/${filePath},filePath为文件的pwd路径,看是否vscode能打开对应文档。

Windows的URL Scheme

Windows上是通过在注册表中添加URL Protocol来实现伪协议的,其实说简单点也是添加key,value值。同上,我们查看一下vscode:

  1. win+r输入regedit确定。
  2. 找到HKEY_CLASSES_ROOT\\vscode,不好找的可以Ctrl+F勾选数据进行搜索\‘URL:vscode\‘,可以找到两处HKEY_CURRENT_USER\\Software\\Classes\\vscode,当然这两处值都是一样的。
    Electron网页调起客户端
    Electron网页调起客户端
  3. 我们可以右键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上实现伪协议的两种方式:

  1. 通过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是写入注册表的,并不会被主动清理,卸载软件后再打开伪协议还是会有打开软件的提示。

  1. 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地址:链接

Electron网页调起客户端

上一篇:C++结构体之统计最高最低分


下一篇:使用JSON.parse出现报错 Error in mounted hook: "SyntaxError: Unexpected token u in JSON at position 0"