微信小程序页面跳转传值

原文链接

前言

这个需求有很多种实现方式，这里只谈 路由跳转携带参数 的 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 ${变量} 测试不行，也不知道为什么。