总结微信小程序开发传值的几种方式

1、标签传值

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

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

然后获取事件 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. 如果给想要获取的属性名是驼峰命名法,那么要使用 - 相连的方式赋值:
<view data-my-name="小明" bindtap="myTap">点击获取值</view>

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

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

2、页面传值

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

2.1 navigator 标签传值

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

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

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

<view bindtap="skip(1)">点击跳转并传值</view>
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 传值

通过表单 <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>
formSubmit: (e) => {
	let data = e.detail.value //表单数据
	let { datail, realname, mobile } = data
}

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值