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

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

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

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

需求： ·点击商品卡片右下角三个点时 分享对应的商品 并 使用对应商品的封面图以及标题作为分享封面图和标题·; 代码重点 在于 :data-obj="item"

直接看代码：

	// :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>