vue2项目-微信分享踩的坑
在在main.js中
//在main.js头部引入微信分享插件
import wx from 'weixin-js-sdk';
Vue.use(wx);
//设置微信分享全局函数
consthttp=Vue.http;
Vue.prototype.wxShare=function(title, desc,link,imgUrl,url) {
http.get(url).then(res=>{// 获得签名配置
varData=res.body.data;
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
wx.config({
debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: Data.appid, // 必填，公众号的唯一标识
timestamp: Data.timestamp, // 必填，生成签名的时间戳
nonceStr: Data.nonceStr, // 必填，生成签名的随机串
signature: Data.signature, // 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
});
wx.ready(() =>{
// 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
// 则可以直接调用，不需要放在ready函数中。
wx.onMenuShareAppMessage({ // 分享给朋友
title: title, // 分享标题
desc: desc, // 分享描述
link:link, // 分享链接 默认以当前链接
imgUrl: imgUrl,// 分享图标
// 用户确认分享后执行的回调函数
success: function () {
console.log('分享成功');
},
// 用户取消分享后执行的回调函数
cancel: function () {
console.log('分享到朋友取消');
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
desc: desc,
link:link,
imgUrl: imgUrl,// 分享图标
// 用户确认分享后执行的回调函数
success: function () {
console.log("分享成功");
},
// 用户取消分享后执行的回调函数
cancel: function () {
console.log('分享到朋友圈取消');
}
});
wx.error(function(res){
console.log(res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
});
};
一、路由不是HTML5 History 模式的坑
1、在vue2项目中，获取签名是异步请求的，可是异步请求的链接，后台（php）获取链接的“#”之前的，导致报：config:invalid signatur
二、路由是HTML5 History 模式的坑
1、解决了路由不是HTML5 History 模式的坑，在安卓中可以分享成功了
2、在ios中，首页可以分享成功，可是进入其他页面的分享在真机会报config:invalid signatur
原因是：在微信分享时，分享的链接
IOS：Landing Page
安卓：Current Page
详情请查看：http://yurixu.com/blog/2016/08/21/%E6%BC%AB%E8%B0%88%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98-%E6%8E%88%E6%9D%83%E7%9B%AE%E5%BD%95%E8%AE%BE%E7%BD%AE/
a、解决的坑：重新加载当前页面
[html]view plaincopy
if (!this.$route.query.wfzs) {
location.href=location.href+"&wfzs="+Math.random();
}
b、解决的坑：把vue的 改成a标签，进入页面就会自动刷新当前页面了，Landing Page就是当前页面的链接了
参考：1、http://www.jianshu.com/p/a1a31f9da272
2、http://yurixu.com/blog/2016/08/21/%E6%BC%AB%E8%B0%88%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98-%E6%8E%88%E6%9D%83%E7%9B%AE%E5%BD%95%E8%AE%BE%E7%BD%AE/
网友评论