1. 程式人生 > >微信小程式 路由跳轉傳參wx.navigateTo ,字串轉物件報錯

微信小程式 路由跳轉傳參wx.navigateTo ,字串轉物件報錯

官方文件地址:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

(一)問題

 

看了文件之後,傳一個引數沒有問題,就是如果你路由跳轉想傳物件,必須將物件轉換成字串,

JSON.stringify()

當後臺資料 較複雜的時候,比如傳了個富文字格式的字串

A頁面將其轉換成字串,B頁面進行接收

//A頁面傳參    item是物件
var detailsData= JSON.stringify(item);
wx.navigateTo({
      url:'/pages/plaza/project_intro/project_intro?detailsData='+detailsData
    })

 

B頁面接收引數,console打印發現 字串好像被截斷了許多

  onLoad: function (options) {
    console.log(options);
  }

  onLoad: function (options) {
    var detailsDataObj = JSON.parse(options.detailsData);
    console.log(detailsDataObj);
  }

將其轉換成物件就會報錯。。。

(二)解決

看了其他博文說是,由於物件中包含 url 屬性,JSON.parse 方法無法解析包含“?“、”&”之類的字元

最後試了一下 通過js的一個方法進行編碼解碼。

encodeURIComponent() 函式可把字串作為 URI 元件進行編碼。

decodeURIComponent() 函式可對 encodeURIComponent() 函式編碼的 URI 進行解碼。

A頁面進行 編碼再傳參

var detailsData= JSON.stringify(item);
//直接轉字串 ,在下個頁面轉物件的時候會報錯,不知道是長度限制還是字串有問題,所以使用encodeURIComponent轉碼
detailsData = encodeURIComponent(detailsData);
wx.navigateTo({
     url:'/pages/plaza/project_intro/project_intro?detailsData='+detailsData
  })

B頁面進行 解碼再讀取引數

  onLoad: function (options) {
    console.log(options);
    var detailsDataStr = decodeURIComponent(options.detailsData);
    var detailsDataObj = JSON.parse(detailsDataStr);
    console.log(detailsDataObj);
  }

console 成功打印出引數

如果有更好的解決辦法,歡迎評論留言哦!!!