vue微信认证以及分享助力
一、微信认证
// res 是服务器返回的地址
pushIndex(res) {
this.isLoading = true;
//vuex存储登陆信息(包含token值和secret值)
this.$store.commit("updateUserInfo", res.data);
setTimeout(() => {
this.$router.push({
path: "/activity",
});
this.isLoading = false;
}, 3500);
},
二、分享助力
通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端弹窗出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识,填自己的!
timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
});
通过ready接口处理成功验证
shareLink() {
wx.ready(function () {
axios({
method: "get",
url: "wx/shareLink",
}).then((res) => {
const sharedata = {
title: "天天爱海湾站补给站",
desc: "补给大礼包",
link: res.data.link,
imgUrl: 'https://activityh5static.hnfeisheng.com/img/but-hqyzm.fce311fe.png',
// type: "", // 分享类型,music、video或link,不填默认为link
// dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
},
};
const friendSharedata = {
title: "天天爱海湾站补给站朋友圈", // 分享标题
link: location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: location.href + "/img/bingjing", // 分享图标
success: function () {
},
};
wx.updateAppMessageShareData(sharedata);
wx.updateTimelineShareData(friendSharedata);
});
});
},
好友效果图
朋友圈效果图
注意
1. link一定要是认证过的网站
2. imaurl一定要是认证过的网站上的图片
3. 如果分享右边没有图片那就是默认的分享效果,为失败其中原因可能就是上面的link或者imgurl
三、微信页面缓存刷新
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">