前言
这个需求有很多种实现方式,这里只谈 路由跳转携带参数
的 2 种方式。
// 假设要从 A页面 带参跳转到 B页面
【A页面】 → 【B页面】
第一种
通过绑定 事件对象自定义属性传参
,即 data-*
,不懂的话请移步 这篇文章。
第一步(A页面):本页面绑定数据并由路由获取
<!-- 当前文件:A.wxml -->
<!-- flag在data中已定义 -->
<!-- flag即为要带走的参数 -->
<button
bindtap="go"
data-flag="{{ data }}"
>
确定跳转
</button>
// 当前文件:A.js
go: function (e){//event对象
// 这个就是 flag 值(要带走的参数)
let flag = e.currentTarget.dataset.flag
// 路由跳转并带参数(跳转到 B 页面)
wx.navigateTo({
url: '/pages/B?flag =' + flag
})
}
第二步(B页面):利用 options 对象接收,然后就可以使用 A页面 的 flag 了
// 当前文件:B.js
data: {
flag: ''//准备接收
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {//数据在options对象身上
this.setData({//这里必须使用setDate(不懂请查阅api问昂)
flag: options.flag
})
},
这时,传递过来的数据就挂载到 data
身上了,可在页面直接使用。
第二种
直接跳转。这种方式适合携带参数较少且不复杂的数据。
有了前面的基础,这里就直接放代码了,相信都看得懂。
<navigator url="/pages/apply/apply?id=1&title={{ title }}">
<text>确认跳转</text>
</navigator>
接收页面 JS:
data: {
id:'',
title:''
},
onLoad: function (options) {
this.setData({
id: options.id,
title: options.title,
})
},
关于参数
携带多个且复杂的参数,最好以下面的形式写,但 ES6 ${变量}
测试不行,也不知道为什么。