微信分享的两种方式
注意问题 :
1.sdk校验是否通过
2.分享的链接应该为当前页链接
1.通过srcipt标签引用sdk
const jsApiList = ['updateAppMessageShareData', 'updateTimelineShareData']
async function getJSSDK (dataForWeixin) {
const { $axios} = useNuxtApp()
const { data } = await useLazyAsyncData('getimg',()=>$axios.get(`/wx/jsapi/getJsapiTicket?url=${window.location.href}`))
const script = document.createElement('script');
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
new Promise((resolve, reject) => {
let done = false;
script.onload = script.onreadystatechange = () => {
if (!done &&(!script.readyState ||script.readyState === 'loaded' ||script.readyState === 'complete')) {
done = true;// 避免内存泄漏
script.onload = script.onreadystatechange = null;
resolve(script);
}
};
script.onerror = reject;
document.getElementsByTagName('head')[0].appendChild(script);
}).then(res => {
let { appId, timestamp, nonceStr, signature } = data
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: jsApiList // 必填,需要使用的JS接口列表
})
// console.log(res.data);
// console.log(dataForWeixin);
wx.ready(function () {
// 监听“分享好友”按钮点击、自定义分享内容及分享结果接口
wx.updateTimelineShareData({
title: dataForWeixin.title,
desc: dataForWeixin.desc,
link: dataForWeixin.linkurl,
imgUrl: 'https://xxx/share.png',
trigger: function trigger (res) {
console.log('trigger-----' + res);
console.log('trigger');
},
success: function success (res) {
console.log('success-----' + res);
console.log('已分享');
},
cancel: function cancel (res) {
console.log('cancel-----' + res);
console.log('已取消');
},
fail: function fail (res) {
console.log(JSON.stringify(res));
}
});
// 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.updateAppMessageShareData({
title: dataForWeixin.title,
link: dataForWeixin.linkurl,
imgUrl: 'https://xxx/share.png',
trigger: function trigger (res) {
console.log('trigger-----' + res);
console.log('trigger');
},
success: function success (res) {
console.log('success-----' + res);
console.log('已分享');
},
cancel: function cancel (res) {
console.log('cancel-----' + res);
console.log('已取消');
},
fail: function fail (res) {
console.log(JSON.stringify(res));
}
});
})
// 分享错误处理
wx.error(function (res) {
console.log(JSON.stringify(res) + "微信验证失败");
});})
}
export default getJSSDK
2.npm 包安装
import Vue from 'vue'
import wx from 'weixin-js-sdk'
import {getJsapiTicket} from '@/api/homePage.js'
Vue.prototype.$wechat = wx
const jsApiList = ['updateAppMessageShareData', 'updateTimelineShareData']
export default ({ app, store }) => {
Vue.prototype.wxShare = function (shareData) {
console.log(app);
console.log(store.getters.deviceType)
// if (process.title === 'browser') {
getJsapiTicket(window.location.href).then(res => {
const Data = res.data
console.log('getWeChatConfig', Data)
this.$wechat.config({
debug: false,
appId: Data.appId,
timestamp: Data.timestamp,
nonceStr: Data.nonceStr,
signature: Data.signature,
jsApiList:jsApiList
})
})
this.$wechat.ready(() => {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
this.$wechat.updateAppMessageShareData({
title: shareData.title,
desc: shareData.desc,
link: shareData.link,
imgUrl: shareData.imgUrl,
success () {
// 设置成功
},
cancel () {
console.log('分享取消')
}
})
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
this.$wechat.updateTimelineShareData({
title: shareData.title,
desc: shareData.desc,
link: shareData.link,
imgUrl: shareData.imgUrl,
success () {
// 设置成功
},
cancel () {
console.log('分享取消')
}
})
})
// }
}
}