uni-app使用vue3、ts开发小程序微信分享到朋友和朋友圈

场景：公司小程序商品详情页面需要用到微信分享和朋友圈分享的功能

官网：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.页面内点击按钮触发分享

分享

3.朋友圈分享

// 朋友圈分享
onShareTimeline(() => {
    return {
        title: shopDetailsData.value?.GoodsName,
        path: '/pages/shop/shopDetails?GoodsId=' + props.GoodsId,
        imageUr: shopDetailsData.value?.GoodsCoverImg
    }
})