1 scene representation:

Meow-brother recently used a web-view container to host web pages when developing applets. SRC is the webView link to the web page. But my requirement is that SRC be dynamic and not written in code. So, I’m going to carry a link to the web page in the url of the jump route Navigator.

2 Problems occur

First, when carrying dynamic links in the Navigator’s URL,

    <! Dynamic data: let data = "https://mp.weixin.qq.com/s?a=123&b=456&c=789" -- >
    <navigator url="/pages/outlink/outlink? link={{data}}">Go you</navigator>
Copy the code

Then, when received in the onLoad of the outLink page, the resulting argument:

  onLoad: function (e) {
    console.log(e)   / / print: {link: "https://mp.weixin.qq.com/s"}
  },
Copy the code

Parameter is not complete, if I don’t add https://mp.weixin.qq.com/s in front of, the parameters directly, ok? In fact, without adding, just pass the parameter, then print:

  onLoad: function (e) {
    console.log(e)   // Print: {link: "a", b: "456", c: "789"}
  },
Copy the code

At this time also go to a splicing, if the url parameters are many, this is very troublesome.

3 Solutions

The following two methods are Javascript methods:

The encodeURIComponent() function encodes a string as a URI component. DecodeURIComponent () decodes urIs encoded by encodeURIComponent()

First, the url is encoded through encodeURIComponent().

    <! Dynamic data before - code: let data = encodeURIComponent (" https://mp.weixin.qq.com/s?a=123&b=456&c=789 ") the console. The log (data) / / print: https%3A%2F%2Fmp.weixin.qq.com%2Fs%3Fa%3D123%26b%3D456%26c%3D789 -->
    <navigator url="/pages/outlink/outlink? url={{data}}">Go you</navigator>
Copy the code

Then, when receiving the parameters in the onLoad of the OutLink page, decrypt them through decodeURIComponent() : you can get the complete URL

  onLoad: function (e) {
    let url = decodeURIComponent(e.link)
    console.log(url)   
    / / print: https://mp.weixin.qq.com/s?a=123&b=456&c=789
  },
Copy the code

OK!!!!! Above is my method, if there is any better method, welcome to leave a message 😁! Over~~~

👇👇👇👇👇 Remember to click add attention oh!! 👇 👇 👇 👇 👇Copy the code