前端使用jsTicket设置公众号分享名片样式

?①引入sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

②使用sdk

export const setWxShareConfig = ({
    shareTitle, shareDesc, shareLink, sharePicUrl,
}) => {
    request({
        url: URLS.GET_BAZI_JSTICKET,
        params:  { url: window.location.href },
        method: 'get',
    }).then(res => {
        const {
            appId, timestamp, nonceStr, signature,
        } = res.data
        window.wx.config({
            // debug: true,
            appId, // 必填，公众号的唯一标识
            timestamp: timestamp?.toString(), // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature, // 必填，签名
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
        })
        window.wx.ready(() => {
            // 需在用户可能点击分享按钮前就先调用
            window.wx.updateAppMessageShareData({
                title: shareTitle, // 分享标题
                desc: shareDesc, // 分享描述
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: sharePicUrl, // 分享图标
                success: function () {
                  // 设置成功
                  console.log('updateAppMessageShareData：设置成功')
                }
            })
            window.wx.updateTimelineShareData({
                title: shareTitle, // 分享标题
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: sharePicUrl, // 分享图标
                success: function () {
                  // 设置成功
                  console.log('updateTimelineShareData：设置成功')
                }
            })
        })
    })
    .catch(e => {
        console.log(e, '微信分享错误原因')
    })
}
export const share = ({ shareTitle, shareDesc, sharePath, sharePicUrl = 'https://api.zhiziedu.net/mingpan.png' }) => {
    setWxShareConfig({
        shareTitle,
        shareDesc,
        shareLink: window.location.href,
        sharePicUrl,
    })
}

share 方法可以放在vue的created方法中调用