微信小程序在界面中传递URL时，传递的url里有‘？’的处理办法

微信小程序在界面中传递URL时，传递的url里有‘？’的处理办法

我有一个obejct，需要在微信小程序的页面之间传递，object中有?，description: "青山隐隐泛中流，洞天云霄何处生?"，如下：

var object = {
   name: "小明"
   artistavatar: "https://daotechio.oss-cn-beijing.aliyuncs.com/xinyang/artist/xianyuying.png"
   artistid: "2435dd65-1f6b-4f63-b0f8-83ac30f3fde2"
   description: "青山隐隐泛中流，洞天云霄何处生?"
   masterpiece: null
   name: "云巅"
   number: "XYY18A009-12572"
   paintingid: "5e782193-a538-41b1-95db-cd5afc5a5329"
   picurl: "https://daotechio.oss-cn-beijing.aliyuncs.com/xinyang/XYY18A009-12572.jpg"
  position: "人民艺术家、功勋艺术家"
   size: "125cm*72cm"
   thumbs: 1
}

在微信小程序的页面之间传值的时候，会把?分解出来，导致传递的值不全。

解决办法

通过encodeURIComponent(URIstring)编码，decodeURIComponent(URIstring)解码。

核心代码：

传递值的页面:

var encodeObject = JSON.stringify(object);
encodeObject = encodeURIComponent(encodeObject);
 wx.navigateTo({
        url: '/pages/paintDetails/paintDetails?data=' + encodeObject 
 })

接收值得页面：

  onLoad: function (options) {
       var data = decodeURIComponent(options.data);
       data = JSON.parse(data);
       this.setData({
         paintDetail: data
       })
    }
  }

详细分解

1. 将object 转化为字符串

var newObject = JSON.stringify(object);

2. 确定object 中确实存在‘？’

因为我用的是同一个组件，这个组件会重复使用，所以先确定传的值是否存在‘?’，避免无用的编码解码。

var index = newObject.indexOf('?');
//通过if判断执行不同的代码，如果有，就多传一个encode参数，在传递的页面，通过这个值，判断需不需要解码。
if(index != -1){  
      var encodeObject = encodeURIComponent(newObject);
      wx.navigateTo({
        url: '/pages/paintDetails/paintDetails?data=' + encodeObject + '&encode=true'
      })
    }else {
      wx.navigateTo({
        url: '/pages/paintDetails/paintDetails?data=' + newObject 
      })
    }

3. 在接收值的页面

 onLoad: function (options) {
    if (options.data){
      if (options.encode){ //如果有这个值，就是需要解码
        var data = decodeURIComponent(options.data);
        data = JSON.parse(data);
      }else { // 没有就不用解码
        var data = JSON.parse(options.data);
      }
       this.setData({
         paintDetail: data
       })
    }
  },