uniapp-微信小程序-动态分享-带参数
目录
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>