electron伪协议，如何接收识别协议URL？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

苏南大叔接着描述electron中伪协议的参数处理，即调起electron程序之后，程序体如何根据参数的不同，做出进一步的操作，也就是说识别伪协议中的url部分。需要注意的是：这里的args和setAsDefaultProtocolClient()中的最后一个参数args是没有什么关系的，请不要把两者弄混淆。

本文测试环境：win10，electron@5.0.1。本文的前置阅读文章是：

• https://newsn.net/say/electron-fake-protocol.html

协议URL参数来源

对于协议URL参数的数据来源处理，苏南大叔能够描述的就是：还是取下面这个变量：

process.argv

苏南大叔个人建议：process.argv的处理，请放置在createWindow()函数里面，便于根据不同的参数加载不同的url。

简要的来说，就是要根据是否是生产模式，来判断传递进来的数据数组，然后再进行组合获得参数，最后再对参数进行分析。

let urlStr = process.argv.splice(app.isPackaged ? 1 : 2).join("")

建议在createWindow()函数中，处理process.argv，进而获得url信息。通过url信息，分离加载不同的html页面。

特殊情况说明

当然，上面的1:2字样，并不是一成不变的。

比如，在win系统下：注册伪协议时的setAsDefaultProtocolClient()的第三个参数args，如果是默认的[]的话，那么上述就应该是1:2。但是，当添加了其他数组的话，比如--。上述1:2，就应该变成2:3。

大概思路就是：默认来说，没有额外参数，1:2应该可以。如果有额外参数，那么应该在处理url的时候，就应该额外叠加到后面的参数位置除去。这些额外参数，对于执行打开electron的时候，实际上会排在真正的electron程序参数前面。

${process.execPath} ${...args} myapp://...

所以，您也许可以考虑，更通用的参数接收方法：

app.setAsDefaultProtocolClient("","",["--"])
//...
if (process.platform=="win32"){
  urlStr = process.argv.splice(app.isPackaged ? 2 : 3).join("");
  //...
}

或者

app.setAsDefaultProtocolClient("","",["--"])
//...
if (process.platform=="win32"){
  urlStr = process.argv[process.argv.length-1];
}

所以，在通过伪协议传值的情况，还需要对process.argv的某个数组成员，进行url解析。至于如何准确地识别出您所需要的“某个”来，这个就是仁者见仁智者见智的事情了。

命令行和伪协议

这里有篇命令行下传值的相关文章，大家可以参考一下：

• https://newsn.net/say/electron-process-argv.html

在这里，苏南大叔做个简要的对比：

• 命令行传值，传递的是空格分隔的字符串。
• 通过html的伪协议传递的参数，传递的是类似url的路径加参数的字符串。

解析url

当然称这个伪协议的字符串为url，似乎在接受程度上，会有些折扣。不过，对于这个字符串，苏南大叔也找不到更好的词语来描述。鉴于在解析的时候，也是使用js的url解析函数进行处理的。所以，这里还是称之为URL吧~

const urlObj = new URL(urlStr);       // sunan://222?aa=bb&cc=dd
console.log(urlObj.protocol);         // sunan:
console.log(urlObj.pathname);         // //222
console.log(urlObj.search);           // ?aa=bb&cc=dd
const { searchParams } = urlObj;
console.log(searchParams.get('aa'));  // bb

使用new URL()进行解析，使用searchParams.get()可以获得参数值。

测试代码

主进程main.js:

const {app,BrowserWindow} = require('electron')
//...
function createWindow () {
  //...
  global.sharedObject = {
    args: process.argv.splice(app.isPackaged ? 1 : 2).join(""),
  }
  mainWindow.webContents.openDevTools();
  //...
}
//...

渲染进程：

var urlStr = require('electron').remote.getGlobal('sharedObject').args;
console.log(urlStr);
const urlObj = new URL(urlStr);
console.log(urlObj.protocol);
console.log(urlObj.pathname);
console.log(urlObj.search);
const { searchParams } = urlObj;
console.log(searchParams.get('aa'));
console.log(searchParams.get('bb'));

第三方网页html：

<a href="sunan://222?aa=bb&cc=dd">111222</a>

效果图：

对于正常的代码逻辑来说，上述代码就是个例子，实际的逻辑处理，还需要您自己来根据实际情况来处理。所以，千万别盲目复制照抄哦。想想，每句话都是什么意思。搞明白了，再复制。

关联文章

本文范例中，使用了下面的electron文章中的相关代码技巧：

• https://newsn.net/say/electron-process-argv.html
• https://newsn.net/say/electron-shared-object.html
• https://newsn.net/say/electron-f12.html

总结

本文从识别伪协议URL的角度来描述本文的内容，如果您是在高版本electron及生产模式下，使用本文的代码的话，那么，本文的代码就足够了。为什么这么说，那是因为有很多的特殊情况嘛。想知道很多特殊情况，怎么处理的话，请查看苏南大叔的后续文章。

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。