uniapp项目开发跨平台应用常会遇到接收参数无效的问题,无法判断是哪里出错了,这里是讲替代的方案,现有三种方案可选。
原因
一般我们是这样处理向另一个页面传参,代码是这样写的
//...
let { title, type, rank } = args;
uni.navigateTo({
url:'/pages_test/index/index',
success(res) {
//传参似乎无效
// res.eventChannel.emit('args', item)
}
})
另一个页面处理接收参数,代码是这样写的
this.getOpenerEventChannel().once('args', res => {
console.log('args', res)
})
问题
运行在H5平台是没问题,
但是,运行在QQ小程序上,出现问题了,
是传参无效吗
res.eventChannel.emit(‘args’, item)
还是接收参数无效
this.getOpenerEventChannel().once(‘args’, res={})
还有,运行在微信小程序上,也有问题,
这次出现的问题不同,第一次传参有效,第二次以上传参就无效
看起来那么不靠谱,接下来,讲一下可行的替代方案
方案一
等待渲染完成后处理,参考代码
this.$nextTick(()=>{
this.getOpenerEventChannel().once('args', res => {
console.log('args', res)
})
})
方案二
将传参转为字符串,加到url地址后面
//...
let { title, type, rank } = args;
uni.navigateTo({
url:'/pages_test/index/index?args='+JSON.stringify({ title, type, rank }),
fail(err) { }
})
然后,在另外页面接收的方法中获取即可
onLoad(options) {
if(options.args){
let args = JSON.parse(options.args);
console.log('has args', args);
}
},
方案三
将传参设置到全局变量中
//设置传参
getApp().globalData.args = args;
在另外的页面中读取
//获取参数
let gData = getApp().globalData;
let args = gData.args;
console.log('has args', args);
gData.args=null;//如果只用一次,那就清除
总结
视情况选择吧
- 在QQ小程序上用方案一仍然是无效的
- 如果传参不多,就用方案二
- 传参多的话,就用方案三