乐趣区

关于前端: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 文件夹。
  4. 找到 info.plist,间接点击查看或者用 vscode 关上,这个CFBundleURLName 就是协定名,CFBundleURLSchemes为协定内容

  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,当然这两处值都是一样的。

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

退出移动版