微信小程序（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】

遇到需要在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、微信小程序入门与实战 (最新完整版)

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