微信小程序在界面中傳遞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
       })
    }
  },