微信小程序navigator参数为网址时,接收页得不到原始数据?

884 阅读1分钟

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~~~


                              👇👇👇👇👇记得单击加关注哦!!👇👇👇👇👇

文森软件工作室