当前位置: 首页 > Web前端 > HTML

【电子游乐场系列】自定义协议

时间:2023-04-02 20:24:45 HTML

作者:OBKoro11。协议:从网页调用Electron应用程序Elelctron提供了一种自动调用Electron应用程序的方式(如下图),这次我们就来学习如何连接调用Electron应用程序,我们可以使用这个函数来做一些事情。1.1协议唤醒示例:1.2什么是协议Electron注册协议,electron会在系统的协议列表中注册协议,是系统级的API,只能在当前系统下使用,其他计算机没有注册协议无法识别。Electron的app模块提供了处理协议的方法,允许您设置和取消协议以使您的应用程序成为默认应用程序。1.3协议的作用将一个协议注册到系统协议中,当通过其他应用程序/浏览器网页打开新协议的链接时,浏览器会检测该协议是否在系统协议中,如果该协议已经注册,然后调用协议(我们的应用程序)的默认处理程序。1.4注册协议:app.setAsDefaultProtocolClient协议需要在ready事件后注册,具体代码如下。//注册自定义协议const{app}=require('electron')constpath=require('path')//注册自定义协议函数setDefaultProtocol(){constagreement='electron-playground-code'//自定义协议名称letisSet=false//是否注册成功app.removeAsDefaultProtocolClient(agreement)//每次运行删除自定义协议,然后重启Register//开发模式,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系统会触发二次事件。//注册一个自定义协议const{app,dialog}=require('electron')constagreement='electron-playground-code'//自定义协议名称//验证它是一个指向自定义协议的链接constAGREEMENT_REGEXP=newRegExp(`^${agreement}://`)//监听自定义协议调用函数watchProtocol(){//Mac唤醒应用激活open-url事件。在open-url中,判断是否开启自定义协议的事件应用。on('open-url',(event,url)=>{constisProtocol=AGREEMENT_REGEXP.test(url)if(isProtocol){console.log('获取协议链接,根据参数做各种事情')dialog.showMessageBox({type:'info',message:'Macprotocol自定义协议开启',detail:`自定义协议链接:${url}`,})}})//唤醒window系统下的应用会激活thesecond-instance准备执行后才能监听事件app.on('second-instance',(event,commandLine)=>{//commandLine是一个数组,唤醒链接放在这里作为数组的一个元素',message:'窗口协议自定义协议打开',detail:`自定义协议链接:${str}`,})}})})}//监听ready事件回调中自定义协议调用watchProtocol()console.log('监听成功')1.8调用应用执行回调示例1.9应用场景简单唤醒应用只需要注册协议,系统就会自动打开应用表现:如果应用没有打开,就会打开应用,如果应用已经打开,应用就会激活应用窗口。根据协议链接的参数进行各种操作,比如上面的弹窗演示,当监听协议链接打开后,就可以得到完整的协议链接。我们可以根据协议链接进行各种业务操作。比如跳转到指定链接地址,比如跳转前判断是否登录,比如下载指定文件等。1.10其他一些APIapp.removeAsDefaultProtocolClient(protocol)移除注册的协议,返回BooleanMac是否成功移除:app.isDefaultProtocolClient(protocol)当前程序是否为协议处理器。app.getApplicationNameForProtocol(url)获取协议链接的applicationhandler参数说明:protocol不包含://注册协议名。url包含////自定义协议的其他相关APIconst{app}=require('electron')constagreement='electron-playground-code'//自定义协议名console.log('注释掉自己,自由尝试')constisApp=app.isDefaultProtocolClient(agreement)console.log('当前程序是否为自定义协议的处理程序:',isApp)constAgreementAppName=app.getApplicationNameForProtocol(`${agreement}://`)console.log('获取链接到自定义协议的应用处理程序的名称',AgreementAppName)constisDelete=app.removeAsDefaultProtocolClient(agreement)console.log('删除自定义协议',isDelete)2.自定义协议注册自定义协议,拦截基于现有协议的请求,根据注册的自定义协议类型返回对应类型的数据。我们可以自动使用这个项目中的所有代码地址:electron-playground/app/protocol,大家可以运行项目调试看看效果。2.1protocol.registerSchemesAsPrivileged将协议注册为标准方案,方便后续调用。注意:必须在加载就绪事件之前调用,并且只能调用一次。protocol.registerSchemesAsPrivileged([{scheme:'myscheme',privileges:{bypassCSP:true}},])2.2protocol.registerFileProtocol拦截自定义协议的请求回调,重新处理后请求路径。Exampleprotocol.registerFileProtocol('myscheme',(request,callback)=>{//url拼接绝对路径constresolvePath=path.resolve(__dirname,'../../playground')leturl=request.url.replace(`${myScheme}://`,'')url=`${resolvePath}/${url}`返回回调({path:decodeURIComponent(url)})},error=>{if(error)console.error('Failedtoregisterprotocol')},)PS:文档中提供了不同类型的加载接口,这里只演示其中的一种。2.3使用方法使用自定义协议请求html文件,可以自动拦截。项目中使用的地址:electron-playground/playground/page/protocol/protocol.md2.4协议其他API协议。unregisterProtocol(scheme)//取消注册自定义schemeprotocol.isProtocolRegistered(scheme)//自定义协议是否被拦截protocol.uninterceptProtocol(scheme)//移除自定义协议的拦截器//各种新的拦截器替换原来的拦截器请关注我们的开源项目ElectronPlayground,带你快速上手Electron。每周五我们都会挑选一些有趣的文章和新闻与大家分享。快来关注我们的小风周刊吧。我们是好未来小黑板的前端技术团队。我们会经常与您分享最新最酷的行业技术知识。欢迎知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园关注我们。