小程序模板網(wǎng)

微信小程序路由跳轉(zhuǎn)傳參wx.navigateTo 字符串轉(zhuǎn)對(duì)象報(bào)錯(cuò)解決

發(fā)布時(shí)間:2021-06-15 08:57 所屬欄目:小程序開發(fā)教程
官方文檔地址:https://developers.weixin.qq.com ... /wx.navigateTo.html

 

(一)問題
 
看了文檔之后,傳一個(gè)參數(shù)沒有問題,就是如果你路由跳轉(zhuǎn)想傳對(duì)象,必須將對(duì)象轉(zhuǎn)換成字符串,
  1. JSON.stringify()

復(fù)制代碼
當(dāng)后臺(tái)數(shù)據(jù) 較復(fù)雜的時(shí)候,比如傳了個(gè)富文本格式的字符串

 

A頁面將其轉(zhuǎn)換成字符串,B頁面進(jìn)行接收
  1. //A頁面?zhèn)鲄?nbsp;   item是對(duì)象
  2. var detailsData= JSON.stringify(item);
  3. wx.navigateTo({
  4.       url:'/pages/plaza/project_intro/project_intro?detailsData='+detailsData
  5.     })

復(fù)制代碼
B頁面接收參數(shù),console打印發(fā)現(xiàn) 字符串好像被截?cái)嗔嗽S多
  1.   onLoad: function (options) {
  2.     console.log(options);
  3.   }

復(fù)制代碼
 
  1.   onLoad: function (options) {
  2.     var detailsDataObj = JSON.parse(options.detailsData);
  3.     console.log(detailsDataObj);
  4.   }

復(fù)制代碼
將其轉(zhuǎn)換成對(duì)象就會(huì)報(bào)錯(cuò)。。。

 

(二)解決

看了其他博文說是,由于對(duì)象中包含 url 屬性,JSON.parse 方法無法解析包含“?“、”&”之類的字符

最后試了一下 通過js的一個(gè)方法進(jìn)行編碼解碼。
  1. encodeURIComponent() 函數(shù)可把字符串作為 URI 組件進(jìn)行編碼。
  2.  
  3. decodeURIComponent() 函數(shù)可對(duì) encodeURIComponent() 函數(shù)編碼的 URI 進(jìn)行解碼。


A頁面進(jìn)行 編碼再傳參
  1. var detailsData= JSON.stringify(item);
  2. //直接轉(zhuǎn)字符串 ,在下個(gè)頁面轉(zhuǎn)對(duì)象的時(shí)候會(huì)報(bào)錯(cuò),不知道是長度限制還是字符串有問題,所以使用encodeURIComponent轉(zhuǎn)碼
  3. detailsData = encodeURIComponent(detailsData);
  4. wx.navigateTo({
  5.      url:'/pages/plaza/project_intro/project_intro?detailsData='+detailsData
  6.   })

B頁面進(jìn)行 解碼再讀取參數(shù)
  1.   onLoad: function (options) {
  2.     console.log(options);
  3.     var detailsDataStr = decodeURIComponent(options.detailsData);
  4.     var detailsDataObj = JSON.parse(detailsDataStr);
  5.     console.log(detailsDataObj);
  6.   }

console 成功打印出參數(shù)


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://u-renovate.com/wxmini/doc/course/26489.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢