【小程序】uni-app 页面的传参和接参
小程序的传参只能使用字符串的方式进行传递,不像vue的路由传参。
·
值得一提的是小程序只能使用字符串的方式进行传递,不像vue的路由传参。至于为什么要这样,这就需要看文档怎么说了。
1.传参
注意:传递参数只能以 ?key=value&key=value 方式传递
<navigator
v-for="item2 in item.children"
:key="item2.cat_id"
:url="`/pages/goods_detail/goods_detail?goods_id=${item2.cat_id}`"
>
<!-- 在起始页面跳转到goods_detail.vue页面并传递参数 -->
</navigator>
2.接收参数
使用 onLoad() 钩子函数来接收
onLoad(query){
console.log("接收参数",query); // query 就是传递过来的参数
}
3.复杂数据传递和接收
小程序只能以 字符串的方式进行传递和接收,那么复杂类型对象和数组怎么传呢?
可以使用 encodeURIComponent 和 decodeURIComponent ,并解码编码配置 json格式来进行。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
注意 不转义的字符: A-Z a-z 0-9 - _ . ! ~ * ' ( )
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
传递参数
goData(){
const obj = {
name:'jack',
id:1
}
const arr = [1,2,'asdasd']
// 进行编码并转换 json格式
const list = encodeURIComponent(JSON.stringify(arr))
// 跳转传参
uni.navigateTo({ url: '/pages/goods_detail/goods_detail?list='+list })
}
接收参数
onLoad(query){
// 进行解码并 json格式转复杂类型
const res = JSON.parse(decodeURIComponent(query.list))
console.log("接收参数",res);
}
更多推荐
已为社区贡献3条内容
所有评论(0)