微信小程序 点击页面内的按钮实现分享功能,并携带传参

点击按钮分享,传参

在这里插入图片描述
html代码:

 <button class="sharing-btn"  open-type="share" >确认分享</button>

js代码:

onShareAppMessage(res) {//分享
	return this.confirmSharing(this.timeDate*60);
},
methods: {
	async confirmSharing(dur){//点击确认分享
		let param = {
			ocid: this.$store.state.ocid,
			token: this.$store.state.token,
			odid: this.$store.state.odid,
			dur :dur
		};
		let opts = "/biubiu/rest/defe/trip";//这里填自己的地址
		const res = await this.$Request.httpRequestPost(opts, param)
		if (res.data.status.ecode === 0) {
			this.dsrid=res.data.result.dsrid;
			//分享标题,路径和传参
			return {
			  title: '分享轨迹',
			  path: '/pages/travelSharing/travelSharing?id='+res.data.result.dsrid,
			}
		}
	},
}
### 微信小程序点击事件传递参数 在微信小程序中,为了实现点击事件中传递参数的功能,可以利用`data-*`属性来绑定需要传递的参数。这种方式不同于Vue等框架可以直接在事件处理器内嵌入参数的做法。 对于按钮组件而言,在WXML文件里设置如下: ```html <button type="primary" bindtap="btnHandler" data-id="123456">点击我</button> ``` 上述代码片段展示了如何向按钮添加一个名为`data-id`的自定义属性,赋予其特定值作为待传输的数据[^1]。 接着,在对应的JS逻辑层(即`.js`文件),可以通过`e.currentTarget.dataset.id`访问到这个被绑定上去的ID值: ```javascript Page({ btnHandler(e) { const id = e.currentTarget.dataset.id; console.log('接收到的id:', id); // 进一步处理... } }) ``` 此方法允许开发者轻松地将任何想要的信息附加给触发器元素随后读取这些信息用于业务逻辑操作[^2]。 另外一种场景涉及到页面间的导航与参数携带。当从一个页面跳转至另一个新页面时,也可以通过URL查询字符串的形式附带额外数据。例如使用`wx.navigateTo()` API完成带有参数的页面切换: ```javascript wx.navigateTo({ url: '/pages/targetPage/targetPage?id=7890', }); ``` 而在目标页面接收该参数,则需借助于`onLoad`生命周期函数内的options对象来进行解析和应用[^3]。 ```javascript Page({ onLoad(options){ if (options && options.id){ this.setData({ receivedId: options.id }); console.log('接收到的目标页id:', this.data.receivedId); // 执行其他初始化工作... } }, // ...其余配置项 }) ``` 以上就是关于微信小程序中几种常见的点击事件传参方式及其具体实现的例子说明。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值