前端使用jsTicket设置公众号分享名片样式
2024-01-09 16:31:25
?①引入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方法中调用
文章来源:https://blog.csdn.net/qq_42039912/article/details/135480894
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!