总结微信小程序开发传值的几种方式_微信开发者工具 put接口传值

1、标签传值

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

<view data-index="10" bindtap="myTap">点击获取值</view>
1

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

Page({
	myTap (e) {
		let index = e.target.dataset.index
		console.log(index) // 10
	}
})
1
2
3
4
5
6

主要事项：

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

<view data-my-name="小明" bindtap="myTap">点击获取值</view>
1

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

Page({
	myTap (e) {
		let name = e.target.dataset.myNmae
		console.log(name) // 小明
	}
})
1
2
3
4
5
6

2、页面传值

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

2.1 navigator 标签传值

<navigator url="/page/index/index?id=1"></navigator>
1

关于 navigator 的详细使用方式请参考：
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

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

<view bindtap="skip(1)">点击跳转并传值</view>
1

skip (id) {
	wx.navigator({
		url: "/page/index/index?id=" + parsetInt(id)
	})
}
1
2
3
4
5

关于 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 参数
	}
})
1
2
3
4
5

3、from 传值

通过表单 <form bindsumit="formSubmit"> 与 <button formType="submit"></button> 配合使用

<form bindsubmit="formSubmit">
	<input name="detail" placeholder="详情地址" />
	<input name="realname" placeholder="收件人姓名" />
	<input name="mobile" placeholder="手机号码" type="number"/>
	<button formType="submit" type="primary">Submit</button>
</form>
1
2
3
4
5
6

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

以上就是总结微信小程序开发的几种传值方式（暂且知道这些，有知道还有别的朋友告知一下哈）