网页调启Electron客户端及传参方法

前言

有些时候网页中某些功能受到浏览器的限制，需要调用桌面客户端完成，例如在网页端使用迅雷链接下载文件，可以直接启动本地的迅雷客户端进行下载。那么使用Electron构建的桌面客户端如何实现被网页调启和传参呢？

正文

Windows系统中是通过注册伪协议来实现的，在注册表中添加URL Protocol来实现伪协议。在Electron实现伪协议主要有两种方式：

1.通过setAsDefaultProtocolClient注册协议

根据Electron文档中的介绍，可使用app.setAsDefaultProtocolClient()方法在主进程中实现。

可设置app.requestSingleInstanceLock()方法实现锁定只运行一个应用程序，并可以在'second-instance'事件中获取到传递的参数。

import { app } from 'electron'

if (!app.isDefaultProtocolClient('ecpan')) {
  app.setAsDefaultProtocolClient('ecpan')
}

const gotTheLock = app.requestSingleInstanceLock()

if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, argv) => {
    if (process.platform === 'win32') {
      deeplinkingUrl = argv.slice(1) // 接收传递参数
      console.log(deeplinkingUrl);
    }
  })
}

但是，该方法的缺点是必须首次安装软件并打开后才能执行相应方法，注册表中才会写入URL Scheme，并且是写入注册表的，卸载时不会被主动清理，卸载软件后再打开伪协议还是会有打开软件的提示。

2.通过electron-builder打包配置文件写入协议

对于基于vue-cli4配合vue-cli-plugin-electron-builder创建的项目，使用electron-builder进行打包，build的配置项要写在vue.config.js文件中（直接用electron-vue脚手架创建的项目直接写在package.json）。

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            builderOptions: {
                win: {
                    target: {
                        target: 'nsis'
                    }
                },
                nsis: { include: "installer.nsh" }
            }
        }
    }
}

在builderOptions的nsis中添加include: "installer.nsh"，并在根目录创建installer.nsh文件添加以下代码：

!macro customInstall
  DeleteRegKey HKCR "skydrive"
  WriteRegStr HKCR "skydrive" "" "URL:skydrive"
  WriteRegStr HKCR "skydrive" "URL Protocol" ""
  WriteRegStr HKCR "skydrive\shell" "" ""
  WriteRegStr HKCR "skydrive\shell\Open" "" ""
  WriteRegStr HKCR "skydrive\shell\Open\command" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME} %1"
!macroend

!macro customUnInstall
  DeleteRegKey HKCR "skydrive"
!macroend

打包程序并安装后直接在浏览器地址栏输入skydrive://，便可打开应用程序，卸载后也没有错误提示。再结合第一种方案中获取参数的方法，可以获得更好的实现网页调用客户端的功能。

结语

两种方案各有利弊，直接通过electron API注册协议简单便捷，但第一次运行程序后才生效并且卸载不能主动清理注册表；修改打包配置文件的方式能更完整地实现功能，但需要对NSIS有一定了解。

---

来源：

移动云开发者社区 (10086.cn)https://ecloud.10086.cn/api/query/developer/user/home.html?ticket=ST-33219-9gQBacA5Cf06BVZt9epk-cas01.example.org#L2FwaS9xdWVyeS9kZXZlbG9wZXIvYmxvZy9ibG9nZGV0YWlsLmh0bWw/YmxvZ19pZD1lMmUyNDY0MWI3MTk0NDAxODNkMzM1MzNkOTZlYmM2Nw==