vue (六)|微信认证、分享笔记

173 阅读2分钟

文章已参与[新人创作礼]活动,一起开启掘金创作之路.

微信公众号:秀基宝。如有问题,请后台留言,反正我也不会听。

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

本人开发的玩基金小工具

个人博客:
名称:纯洁的麦田
链接:[http://www.idearyou.cn/]
描述:争取哪一天做上架构师
公众号:纯洁的麦田

网址:[xiu.idearyou.cn]
谷歌插件搜:秀基宝
小程序:秀基宝
复制代码
复制代码
复制代码

后语

如果本文对你哪怕有一丁点帮助,请帮忙点好看。你的好看是我坚持写作的动力。 另外,关注免费学习。