小程序模板网

微信小程序路由跳转传参wx.navigateTo 字符串转对象报错解决

2021-06-15 抄空儿
官方文档地址:https://developers.weixin.qq.com ... /wx.navigateTo.html

 

(一)问题
 
看了文档之后,传一个参数没有问题,就是如果你路由跳转想传对象,必须将对象转换成字符串,
  1. JSON.stringify()

复制代码
当后台数据 较复杂的时候,比如传了个富文本格式的字符串

 

A页面将其转换成字符串,B页面进行接收
  1. //A页面传参    item是对象
  2. var detailsData= JSON.stringify(item);
  3. wx.navigateTo({
  4.       url:'/pages/plaza/project_intro/project_intro?detailsData='+detailsData
  5.     })

复制代码
B页面接收参数,console打印发现 字符串好像被截断了许多
  1.   onLoad: function (options) {
  2.     console.log(options);
  3.   }

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

复制代码
将其转换成对象就会报错。。。

 

(二)解决

看了其他博文说是,由于对象中包含 url 属性,JSON.parse 方法无法解析包含“?“、”&”之类的字符

最后试了一下 通过js的一个方法进行编码解码。
  1. encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
  2.  
  3. decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。


A页面进行 编码再传参
  1. var detailsData= JSON.stringify(item);
  2. //直接转字符串 ,在下个页面转对象的时候会报错,不知道是长度限制还是字符串有问题,所以使用encodeURIComponent转码
  3. detailsData = encodeURIComponent(detailsData);
  4. wx.navigateTo({
  5.      url:'/pages/plaza/project_intro/project_intro?detailsData='+detailsData
  6.   })

B页面进行 解码再读取参数
  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 成功打印出参数


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26489.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询