1 情景再现:
喵哥最近开发小程序的时候,使用到了web-view承载网页的容器。其中src是webview 指向网页的链接。但是我的需求是src是动态的,并不是写死在代码里面的。所以,我打算在跳转路由navigator的url中携带网页链接。
2 问题出现
首先,在navigator的url中携带动态链接时,
<!--动态数据:let data = "https://mp.weixin.qq.com/s?a=123&b=456&c=789" -->
<navigator url="/pages/outlink/outlink?link={{data}}">走你</navigator>
然后,在outlink(装有web-view的页面)页面的onLoad中接收时候,得到的参数时:
onLoad: function (e) {
console.log(e) // 打印:{link: "https://mp.weixin.qq.com/s"}
},
参数不完整,
如果我不加前面的https://mp.weixin.qq.com/s
,直接传参数,是不是就可以了呢?其实不加,只传参数,则打印出来的是:
onLoad: function (e) {
console.log(e) // 打印:{link: "a", b: "456", c: "789"}
},
此时还要去一个一个的拼接,如果该网址参数很多,这就很麻烦。
3 解决办法
以下两个方法时Javascript的方法:
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码
首先,通过encodeURIComponent()
对网址进行编码。
<!--
编码前动态数据:
let data = encodeURIComponent("https://mp.weixin.qq.com/s?a=123&b=456&c=789")
console.log(data)
//打印:https%3A%2F%2Fmp.weixin.qq.com%2Fs%3Fa%3D123%26b%3D456%26c%3D789
-->
<navigator url="/pages/outlink/outlink?url={{data}}">走你</navigator>
然后,在outlink(装有web-view的页面)页面的onLoad中接收时候,得到的参数时,再通过decodeURIComponent()
进行解密:就可以得到完整的url
onLoad: function (e) {
let url = decodeURIComponent(e.link)
console.log(url)
// 打印:https://mp.weixin.qq.com/s?a=123&b=456&c=789
},
OK!!!!!以上就是我的方法,如果还有什么更好的方法的话,欢迎留言😁!Over~~~
👇👇👇👇👇记得单击加关注哦!!👇👇👇👇👇