uniapp微信小程序 - 一个页面多个分享button怎么区分（代码整理）

需要点击 ‘邀请好友’ 实现分享当前按钮的商品内容，而且商品内容是接口返回的，其实很简单，刚开始百度了一圈也没个头绪，所以就自己整理下，方便之后翻看

设计图（需求）

结构

<view v-for="(item, magIndex) in avatarList" :key="id">
	<button open-type="share" :id="magIndex">邀请好友</button>
</view>

js

onShareAppMessage(res) {
			console.log(res)
			return {
				title: '超值商品仅需' + this.avatarList[res.target.id].price + '元~更划算！',
				imageUrl: this.avatarList[res.target.id].picture,
				path: '/pages/xxxx/xxxx?productId='
this.avatarList[res.target.id].productId + '&activityID=' + this.avatarList[res.target.id].actionId
			}
		}
		// this.avatarList	接口返回的数据（类型是数组）
		// res.target.id	当前所点击的button
		// title	分享卡片的标题
		// imageUrl	封面图
		// path	页面路径

注：console.log(res)

总结

1. 想实现分享必须在button组件上设置open-type=“share”
2. 小程序中用户点击分享后，在 onShareAppMessage 处理函数中可以得到该页面的分享信息，也就是上面console出来的res，就可以利用res.target.id（相当于button的索引） 实现想要的功能了。索引在手啥都不怕哈哈哈