微信小程序(uni-app)url参数传递对象object

微信小程序(uni-app)url参数传递对象object

在开发uni-app小程序的时候需要一个编辑账单详情的功能,所以通过页面传递参数到编辑的页面最合适,起初想的是传递一个id 过去再调用查询的API获取账单详情,后来想想没必要直接把整个详情都传递过去就ok,所以这个时候我就直接传递了。

下面是错误的做法:

uni.navigateTo({
    url:'../../addBill/addBill?item=' + this.billListData[index]
})

在详情页面接收参数:

onLoad(options) {
     this.billInfo = options.item
}

结果是无法拿到详情,只能获取到【object,object】

解决url传递的对象的被编码和长度超长问题

遇到需要在navigaor组件中传递对象参数到下一个页面的需求,传递对象时如果不JSON.stringify的话,接收到的对象会被转化成[object,object]形式。但是使用字符串化往往还会带来另一个问题,那就是超出规定的长度。那么怎么解决呢?方案如下,两步走:

1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串化和编码,这样可以控制url参数的长度,参考示例代码(uni-app书写方式,微信小程序自己改。)

uni.navigateTo({
    url:'../../addBill/addBill?item=' + encodeURIComponent(JSON.stringify(this.billListData[index]))
})

2.接受信息的页面使用JSON.parse()以及decodeURIComponent()接收和解码参数。

onLoad(options) {
    if(options.item){
        this.billInfo = JSON.parse(decodeURIComponent(options.item))
    }
}

我在我自己的项目中如果遇到了这样的问题就使用的这个方法,上述两步即可解决url传递的对象的被编码和长度超长问题了。

————– 微信小程序 实战教程————-

1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)     完整无秘

2、纯正商业级应用-微信小程序开发实战-  完整无秘

3、微信小程序云开发-从0打造云音乐全栈小程序  完整版

4、微信小程序入门与实战  (最新完整版)

全部高清,无密,云盘下载

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?