为什么小程序内页面跳转传参时，要对参数应用encodeURIComponent编码？

若不编码会产生什么问题？

• 假设小程序内有这样一个页面跳转

  const weburl = 'https://mp.weixin.qq.com/s?__biz=MzAwgxMw==&mid=10076&sn=466da94f#rd'
  wx.navigateTo({
      url: '/pages/document/document?url=' + weburl,
    }); 
  

  传递的参数url值是一个url地址：https://mp.weixin.qq.com/s?__biz=MzAwgxMw==&mid=10076&sn=466da94f#rd，不做任何编码直接传递，然后到document页面查看接收到的参数为{url: "https://mp.weixin.qq.com/s}，发现问号后面的部分没了。
  因为规范的URI，问号后面跟的是参数，前面已经有一个问号了，值里面再有问号就导致URI不符合规范，这里微信直接把后面的字符当作无效内容了。
  如果上述参数中不带?，会不会产生问题呢？下面来验证一下

  const weburl = 'https://mp.weixin.qq.com/s__biz=MzAwgxMw==&mid=10076&sn=466da94f#rd'
  wx.navigateTo({
      url: '/pages/document/document?url=' + weburl,
    }); 
  

  把?去掉再传参，此时到document页面查看接收到的参数，会发现参数变成这样{url:"https://mp.weixin.qq.com/s__biz,mid:"10076",sn:"466da94f#rd"}，发现"=MzAwgxMw==“这一段没了，mid和sn直接被解析成2个参数了，而实际上我们这整段url地址是一个参数。
  因为规范的URI里，?&=都是特殊字符，?后跟参数的键值对，&把键值对分割开，=把键和值分隔开，上述参数在解析时首先发现参数url，把后面的值赋给url，直至遇到”__biz="中的特殊字符“=”，发现没有意义直接忽略掉，再到后面“&mid=10076&sn=466da94f#rd”这一部分是符合规范的，解析成了2个参数mid和sn。

综上，若把一个url地址当作参数，不进行编码直接传递是会出问题的，因为?&=这些在URI中属于特殊字符，会解析成不是我们所期望的结果。除非这个url地址本身不带参数，那没有问题。

为什么要用encodeURIComponent进行编码？能否用encodeURI？

• 首先要弄明白encodeURI和encodeURIComponent这两种编码的区别，这里不做过多赘述，关于这两个方法对比，网上还是有很多介绍的。主要就是encodeURI不会对本身属于URI的特殊字符进行编码，而encodeURIComponent会对所有非标准字符进行编码。
  所以对于‘https://mp.weixin.qq.com/s?__biz=MzAwgxMw==&mid=10076&sn=466da94f#rd’，进行encodeURI编码之后结果依然为https://mp.weixin.qq.com/s?__biz=MzAwgxMw==&mid=10076&sn=466da94f#rd“，没有意义。
  进行encodeURIComponent编码之后结果为https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzAwgxMw%3D%3D%26mid%3D10076%26sn%3D466da94f%23rd，这种编码方式叫“百分号编码”，即把特殊字符替换为%加上它的十六进制ASCII码。

我们把url地址进行encodeURIComponent编码之后，特殊字符被替换掉了，所以整体就会作为参数url的值，在document页面对接收到的参数进行decodeURIComponent解码，就可以得到正确的结果。