场景:公司小程序商品详情页面需要用到微信分享和朋友圈分享的功能
官网:uniapp官网介绍
实现方式:
1.微信分享
import { onLoad, onShow, onHide, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
onShow(() => {
uni.updateShareMenu({
withShareTicket: true,
success() { }
})
})
// 分享的信息
onShareAppMessage((res): any => {
// 分享事件来源:button(页面内分享按钮)、menu(右上角分享按钮)
if (res.from === 'button') {// 来自页面内分享按钮
return {
//分享标题
title: shopDetailsData.value?.GoodsName,
//页面 path
path: '/pages/shop/shopDetails?GoodsId=' + props.GoodsId,
// 分享图标
imageUr: shopDetailsData.value?.GoodsCoverImg,
success: function (res: any) {
// 转发成功
console.log('res', res);
},
fail: function (res: any) {
// 转发失败
console.log('res', res);
}
}
} else {
return {
title: shopDetailsData.value?.GoodsName,
path: '/pages/shop/shopDetails?GoodsId=' + props.GoodsId,
imageUr: shopDetailsData.value?.GoodsCoverImg
}
}
})
2.页面内点击按钮触发分享
<button open-type="share" plain size="mini" >分享</button>
3.朋友圈分享
// 朋友圈分享
onShareTimeline(() => {
return {
title: shopDetailsData.value?.GoodsName,
path: '/pages/shop/shopDetails?GoodsId=' + props.GoodsId,
imageUr: shopDetailsData.value?.GoodsCoverImg
}
})