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);
        });
      });
    },

好友效果图
image.png
朋友圈效果图
image.png
注意

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">