传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能“干起”。
一、普通传值,传id等简单数据。
// 第一个页面(比如景点列表页)传递id 跳转景点详情页
JumpToDetails(id){
uni.navigateTo({
url: 'pages/desc/desc?id='+id
});
}
// onLoad (生命周期函数)接一下商业页面传递过来的id
onLoad(option){
console.log('id', option.id)
}
二、复杂数据传值,比如字符串。
//跳转景点详情页面
jumpdesc(item) {
console.log(item)
uni.navigateTo({
url: '../traveldesc/traveldesc?item=' + encodeURIComponent(JSON.stringify(item))
});
}
// 获取上一页传递过来的id值方便匹配对应景点信息
onLoad: function(option) {
this.item = JSON.parse(decodeURIComponent(option.item));
console.log(this.item)
},
三、全局传递,此方式可以用于tabbar之间传值
//第一个页面
jumpTo(){
let that = this;
// 跳转
uni.switchTab({
url: '../order/order',
success: () => {
console.log();
let item = that.arr;
// 将参数全局传递
getApp().globalData.paramsData = item
}
})
}
//第二个页面
onShow(option) {
console.log(333,getApp().globalData.paramsData);
const item = getApp().globalData.paramsData;
},
四、消息传递、经过实验可以用于返回上一页和tabbar。
//第一个页面
selectcity(list) {
uni.$emit('updateData', list);//向首页发送选择的城市数据
uni.navigateBack({
url: './index/index'
});
},
//第二个页面
// 接收从上一个页面传递回来的值
onShow() {
let that = this
uni.$on('updateData', function(data) {
that.city = data
})
},
五、也可以使用local storage存储数据后,在另一个页面读出来,这个方法可以解决数据刷新后消失的问题。但是如果都使用local storage缓存数据了也可以使用vuex,不然的话就搞一个后端。在这里不做更多的描述,可以自己去搜。
如果有描述不当的地方,请各位大佬轻点喷。