微信小程序传值的几种方式

1、标签传值

首先通过在标签给标签添加 data-属性名 属性并赋值,然后绑定 tap 事件获取事件 event 中的 target.dataset.xxx

点击获取值

然后获取事件 event 中的 target.dataset.xxx 就可获取到刚刚绑定的值

Page({
	myTap (e) {
		let index = e.target.dataset.index
		console.log(index) // 10
	}
})

主要事项:

  1. 注意如果给 data-属性名 绑定的属性名是驼峰命名法的方式,如 myName。那么获取到的属性名会自动装换为全小写,如: e.target.dataset.myname
  2. 如果给想要获取的属性名是驼峰命名法,那么要使用 - 相连的方式赋值:
点击获取值

这样取出来的值就会是驼峰命名法了

Page({
	myTap (e) {
		let name = e.target.dataset.myNmae
		console.log(name) // 小明
	}
})

2、页面传值

页面传值主要是路由之间的传值,在小程序中路由之间传值有两种方式。

2.1 navigator 标签传值


关于 navigator 的详细使用方式请参考:
navigator | 微信开放文档
 

2.2 调用微信 API wx.navigateTo(Object)

点击跳转并传值
skip (id) {
	wx.navigator({
		url: "/page/index/index?id=" + parsetInt(id)
	})
}

关于 wx.navigateTo 的详细使用方式请参考:https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html

2.3 在跳转目标页面获取参数方式

在目标页面 onLoad 生命周期函数中获取

Page({
	onLoad (options) {
		console.log(options.query.id) // 获取路由 get 参数
	}
})

3、from 传值

通过表单 

 与  配合使用


	
	
	
	

formSubmit: (e) => {
	let data = e.detail.value //表单数据
	let { datail, realname, mobile } = data
}

 

 

 

 

你可能感兴趣的:(小程序,小程序,html5)