uniapp 微信小程序动态分享带参数-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序动态分享带参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp 微信小程序有动态参数的那种

微信小程序分享有两种分享。
第一种：就是右上角自带的菜单分享
第二种：button按钮通过open-type="share" 点击分享
通常我们分享默认都是分享本页面然后带一些分享参数比如说id uid等直接放在url地址后面就可以了，那如果我们使用按钮分享呢？比如说 商品列表页每一个商品卡片都有一个分享，要求每个按钮分享出去的封面图与标题要对应商品

本篇文章我们主要讲述如何在同一页面分享出不同的内容

uniapp 微信小程序动态分享带参数

需求： ·点击商品卡片右下角三个点时分享对应的商品并使用对应商品的封面图以及标题作为分享封面图和标题·，当用户点击分享后的卡片，进入的页面为详情页·; 代码重点在于 :data-obj="item"文章来源地址https://www.toymoban.com/news/detail-509248.html

直接看代码：

	// :data-obj="item" 中的item 是对应商品数据 是 Object
	<button class="share-button" open-type="share" :data-obj="item"></button>
	
	<script setup>
		import {
			onShareAppMessage,
			onShareTimeline
		} from '@dcloudio/uni-app';
		
		// 分享到微信好友
		onShareAppMessage((e) => {
		if (e.from === "button") {
			// button 按钮分享
			let obj = e.target.dataset.obj // 获取 button 组件 自定义的data-obj值
			return {
				title: `${obj.title}`, // 标题
				imageUrl: `${obj.firstImage}`, // 封面图
				path: `/pages/shop/detail?id=${obj.id}` // 地址以及参数 
			};
		} else {
			// 右上角自带的菜单分享
			return {
				path: `/pages/index/index`
			};
		}
	});
	</script>