作者: OBKoro1
1. 协定: 从网页端唤起Electron利用
elelctron提供了一个形式来主动唤起electron利用(如下图)，这一次就让咱们来学学如何通过连贯来唤起electron利用，并且咱们能够应用这个性能来做点什么。
1.1 协定唤起示例:
1.2 什么是协定
electron注册的协定, electron会将协定注册到零碎的协定列表中，它是零碎层级的API，只能在以后零碎下应用, 其余未注册协定的电脑不能辨认。
Electron的app模块提供了一些解决协定的办法, 这些办法容许您设置协定和勾销协定, 来让你的利用成为默认的应用程序。
1.3 协定的作用
注册一个协定到零碎协定中, 当通过其余利用/浏览器网页端关上新协定的链接时，浏览器会检测该协定有没有在零碎协定中, 如果该协定注册过，而后唤起协定的默认处理程序(咱们的利用)。
1.4 注册协定: app.setAsDefaultProtocolClient
协定须要在ready事件后注册，具体代码如下.
// 注册自定义协定const { app } = require('electron')const path = require('path')// 注册自定义协定function setDefaultProtocol() { const agreement = 'electron-playground-code' // 自定义协定名 let isSet = false // 是否注册胜利 app.removeAsDefaultProtocolClient(agreement) // 每次运行都删除自定义协定 而后再从新注册 // 开发模式下在window运行须要做兼容 if (process.env.NODE_ENV === 'development' && process.platform === 'win32') { // 设置electron.exe 和 app的门路 isSet = app.setAsDefaultProtocolClient(agreement, process.execPath, [ path.resolve(process.argv[1]), ]) } else { isSet = app.setAsDefaultProtocolClient(agreement) } console.log('是否注册胜利', isSet)}setDefaultProtocol()1.5 应用协定
应用形式: 在浏览器地址栏输出注册好的协定，即可唤起利用。
协定唤起的链接格局: 自协定名称://参数
比方上文注册: electron-playground-code协定,触发时会默认带上://。
在应用的时候, 须要在浏览器地址栏输出:
electron-playground-code://1234 // 1234是参数 可依据业务自行批改1.6 注册协定并通过浏览器唤起后盾利用的gif示例:
1.7 监听应用程序被唤起
应用程序唤起，mac零碎会触发open-url事件，window零碎会触发second-instance事件。
// 注册自定义协定const { app, dialog } = require('electron')const agreement = 'electron-playground-code' // 自定义协定名// 验证是否为自定义协定的链接const AGREEMENT_REGEXP = new RegExp(`^${agreement}://`)// 监听自定义协定唤起function watchProtocol() { // mac唤醒利用 会激活open-url事件 在open-url中判断是否为自定义协定关上事件 app.on('open-url', (event, url) => { const isProtocol = AGREEMENT_REGEXP.test(url) if (isProtocol) { console.log('获取协定链接, 依据参数做各种事件') dialog.showMessageBox({ type: 'info', message: 'Mac protocol 自定义协定关上', detail: `自定义协定链接:${url}`, }) } }) // window零碎下唤醒利用会激活second-instance事件 它在ready执行之后能力被监听 app.on('second-instance', (event, commandLine) => { // commandLine 是一个数组， 唤醒的链接作为数组的一个元素放在这外面 commandLine.forEach(str => { if (AGREEMENT_REGEXP.test(str)) { console.log('获取协定链接, 依据参数做各种事件') dialog.showMessageBox({ type: 'info', message: 'window protocol 自定义协定关上', detail: `自定义协定链接:${str}`, }) } }) })}// 在ready事件回调中监听自定义协定唤起watchProtocol()console.log('监听胜利')1.8 唤起利用执行回调示例
1.9 利用场景
- 单纯唤醒利用
只需注册协定，零碎会主动关上利用。
体现：如果利用未关上将关上利用，如果利用曾经关上利用将会激活利用窗口。
- 依据协定链接的参数进行各种操作
如下面的弹窗演示, 在监听协定链接关上的时候，能够获取残缺的协定链接。
咱们能够依据协定链接来进行各种业务操作。
比方跳转指定链接地址，比方判断是否登录再进行跳转，比方下载指定文件等。
1.10 一些其余API
app.removeAsDefaultProtocolClient(protocol) 删除注册的协定, 返回是否胜利删除的Boolean
Mac: app.isDefaultProtocolClient(protocol) 以后程序是否为协定的处理程序。
app.getApplicationNameForProtocol(url) 获取该协定链接的利用处理程序
参数阐明:
protocol 不蕴含:// 注册的协定名。
url 蕴含://
// 自定义协定的其余相干APIconst { app } = require('electron')const agreement = 'electron-playground-code' // 自定义协定名console.log('自行正文，自在尝试')const isApp = app.isDefaultProtocolClient(agreement)console.log('以后程序是否为自定义协定的处理程序: ', isApp)const AgreementAppName = app.getApplicationNameForProtocol(`${agreement}://`)console.log('获取该自定义协定链接的利用处理程序的名字', AgreementAppName)const isDelete = app.removeAsDefaultProtocolClient(agreement)console.log('删除自定义协定', isDelete)2. 自定义协定
注册自定义协定，拦挡基于现有协定的申请，依据注册的自定义协定类型返回对应类型的数据。
咱们能够主动的来应用所有的
在该我的项目中的代码地址: electron-playground/app/protocol, 能够运行我的项目调试一下看看成果。
2.1 protocol.registerSchemesAsPrivileged
将协定注册成规范的scheme, 不便后续调用。
留神： 它必须在ready事件加载之前调用，并且只能调用一次。
protocol.registerSchemesAsPrivileged([ { scheme: 'myscheme', privileges: { bypassCSP: true } },])2.2 protocol.registerFileProtocol
拦挡自定义协定的申请回调，重新处理后再申请门路。
示例
protocol.registerFileProtocol( 'myscheme', (request, callback) => { // 拼接绝对路径的url const resolvePath = path.resolve(__dirname, '../../playground') let url = request.url.replace( `${myScheme}://`, '' ) url = `${resolvePath}/${url}` return callback({ path: decodeURIComponent(url) }) }, error => { if (error) console.error('Failed to register protocol') },)PS: 在文档上提供了不同品种的加载API，这里只演示其中的一种。
2.3 应用形式
在html中应用自定义协定申请文件，即可主动拦挡。
我的项目中的应用地址: electron-playground/playground/page/protocol/protocol.md
<img src={"myscheme://page/protocol/wakeUp.jpg"} alt="wakeUp"/>2.4 protocol其余API
protocol.unregisterProtocol(scheme) // 勾销对自定义scheme的注册protocol.isProtocolRegistered(scheme) // 自定义协定是否曾经拦挡protocol.uninterceptProtocol(scheme) // 移除自定义协定的拦截器// 各种用新的拦截器替换原有的拦截器protocol.interceptFileProtocol(scheme, handler)protocol.interceptStringProtocol(scheme, handler)protocol.interceptBufferProtocol(scheme, handler)protocol.interceptHttpProtocol(scheme, handler)protocol.interceptStreamProtocol(scheme, handler)对 Electron 感兴趣？请关注咱们的开源我的项目 Electron Playground，带你极速上手 Electron。咱们每周五会精选一些有意思的文章和音讯和大家分享，来掘金关注咱们的 晓前端周刊。
咱们是好将来 · 晓黑板前端技术团队。
咱们会常常与大家分享最新最酷的行业技术常识。
欢送来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注咱们。