分享的内容不行在获取签名之前获取,切记签名最后获取
created() {
// 分享内容
this.getArticleDetail();
// 获取签名
this.setWxConfig();
},
由于微信提供的api里的分享到好友,朋友圈,微信多出来的指定分享人,QQ。js接口里有新老分享js,由于ios都兼容,而安卓、一些分享还是调用的老接口
// 获取签名
setWxConfig(){
const that = this;
let url =window.location.href.split('#')[0];
// 注意这里是调用接口获取到微信配置相关参数的
this.$axios.post(this.$api.getWXConfigSignature,{requestData:{url:url}}).then(response => {
this.CommonUtil.parseHttpResponse(response, ()=> {
const res = response.result.data;
let jsApiList = res.jsApiList.split(",")
wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填,app唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList:jsApiList, // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-app'],
});
window.share_config = {
"share":{
"title":this.titleFX,//分享标题
"desc":this.contentNr,//分享描述
"link":url,//分享出去后的链接,这里可以将链接设置成另外一个页面,必须在同一域名下面
"imgUrl":this.imgUrl,
"success":function(){//分享成功之后的回调
// console.log("分享成功")
},
'cancel':function(){//用户取消分享后执行
}
}
};
wx.ready(function () {
if(wx.onMenuShareAppMessage){
wx.onMenuShareAppMessage(share_config.share);
wx.onMenuShareTimeline(share_config.share);
}else{
wx.updateAppMessageShareData(share_config.share);
wx.updateTimelineShareData(share_config.share);
}
// // 分享微信,QQ
// wx.updateAppMessageShareData({
// title: localStorage.getItem('titleFX'), // 分享标题
// desc: localStorage.getItem('contentNr'), // 分享描述
// link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// // imgUrl: 'https://apph5.mintrust.com/static/img/logowx.png', // 分享图标
// imgUrl: localStorage.getItem('imgUrl'), // 分享图标
// success: function () {
// // 设置成功
// // alert('设置成功')
// }
// })
// // 微信朋友圈,QQ空间
// wx.updateTimelineShareData({
// title: localStorage.getItem('titleFX'), // 分享标题
// link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// // imgUrl: 'https://apph5.mintrust.com/static/img/logowx.png', // 分享图标
// imgUrl: localStorage.getItem('imgUrl'), // 分享图标
// success: function () {
// // 设置成功
// // alert('设置成功')
// }
// })
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
alert("出错了:" + res.errMsg);
});
}, errMsg => {
this.$Message.error({ content: errMsg });
})
})
},
这样做无论他是什么,我们都自动适配,
这里需要这样,分享的icon必须是 http 开头的,千万不要用 https 。因为安卓一些不适配 https