微信小程序：解决页面导航传递url参数时，只传递了一部分的问题

问题描述：

在从文章列表页跳转到文章详情页时，需要把文章的详情url传递过去，url数据格式如下

"url": "http://mp.weixin.qq.com/s?__biz=MzA5NDY0Njk5NA==&mid=100000963&idx=1&sn=81109b2c2336df7800c875ff9cc9d71c&chksm=104a237e273daa68944ad66397c63860af76829f17a1e16c82c118d109314a87a3360da7b548#rd",

初始代码如下

  //通过编程式导航跳转到非tabBar页面
  gotodetail(e) {
    // console.log(e);
    const item = e.currentTarget.dataset['item'];
    // console.log(item);
    const article_url = item.url;
    const jpg_url = item.jpg_url;
    wx.navigateTo({
      url: '/pages/wx_article_detail/wx_article_detail?article_url='+
      article_url+'&jpg_url='+ jpg_url
    })
  },

其中item.url的值就是

http://mp.weixin.qq.com/s?__biz=MzA5NDY0Njk5NA==&mid=100000963&idx=1&sn=81109b2c2336df7800c875ff9cc9d71c&chksm=104a237e273daa68944ad66397c63860af76829f17a1e16c82c118d109314a87a3360da7b548#rd

但是当我给页面导航传参时，发现传递过去的参数不完整，只传递了问号前面一部分 http://mp.weixin.qq.com/s

 

网上冲浪一番后，找到了解决办法

传递参数时使用 encodeURIComponent() 对url参数进行编码，读取参数时，再使用decodeURIComponent()进行解码

列表页的处理方式如下

  //通过编程式导航跳转到非tabBar页面
  gotodetail(e) {
    // console.log(e);
    const item = e.currentTarget.dataset['item'];
    // console.log(item);
    const article_url = item.url;
    const jpg_url = item.jpg_url;
    wx.navigateTo({
      url: '/pages/wx_article_detail/wx_article_detail?article_url='+
      encodeURIComponent(article_url)+'&jpg_url='+encodeURIComponent(jpg_url)
    })
  },

 

详情页接收参数时，处理方式如下

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options,  //把navigator传来的参数赋给query
      article_url: decodeURIComponent(options.article_url),
      jpg_url: decodeURIComponent(options.jpg_url)
    })
  },

这样就能把这种带有特殊字符的url参数完整传递过来了