微信小程序 – 携带本页面参数跳转到其他页面(不同页面传值)

时间:2020-8-1 作者:admin


前言

这个需求有很多种实现方式,这里只谈 路由跳转携带参数 的 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 ${变量} 测试不行,也不知道为什么。
微信小程序 - 携带本页面参数跳转到其他页面(不同页面传值)

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。