H5实现 微信分享功能

1丶首先需要获取微信配置信息,需要调后端提供的接口数据

2丶然后调用 wx.config  配置你需要调用的的微信接口  jsApiList

3丶微信官方的jsAPI接口  只能在 wx.ready()这个函数中调用

   // 获取微信配置信息
    setWxConfig() {
      // 进行签名的时候  Android 不用使用之前的链接, ios 需要
      let signLink =
        navigator && navigator.userAgent && /(Android)/i.test(navigator.userAgent)
          ? location.href.split("#")[0]
          : window.entryUrl;
      getWxConfig(signLink).then((res) => {
        console.log("这里是wxconfig配置信息", res);
        var result = res.data;
        if (!wx) {
          alert("请升级当前微信版本!");
        }
        // eslint-disable-next-line
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: result.appId, // 必填,公众号的唯一标识
          timestamp: result.timestamp, // 必填,生成签名的时间戳
          nonceStr: result.nonceStr, // 必填,生成签名的随机串
          signature: result.signature, // 必填,签名
          jsApiList: [
            "onMenuShareAppMessage",
            "onMenuShareTimeline",
            "updateAppMessageShareData",
            "updateTimelineShareData",
          ], // 必填,需要使用的JS接口列表
        });
        // eslint-disable-next-line
        this.wxShare();
      });
    },
    wxShare() {
      //  wx分享
      let _this = this;
      window.wx.ready(function () {
        // 分享朋友圈
        window.wx.updateTimelineShareData({
          title: _this.articleTitle,// 分享标题
          link: _this.pageUrl,// 分享urk
          imgUrl: _this.articleImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
            // _this.$Toast("分享朋友圈成功");
          },
        });
        // 分享朋友
        window.wx.updateAppMessageShareData({
          title: _this.articleTitle,// 分享标题
          desc: _this.articleCount,// 分享urk
          link: _this.pageUrl,
          imgUrl: _this.articleImg, // 分享图标
          type: "", // 分享类型,music、video或link,不填默认为link
          dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
          success: function () {
            // 用户确认分享后执行的回调函数
            // _this.$Toast("分享好友成功");
          },
        });
        window.wx.error(function (res) {
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
          console.log("errorMSG:" + res);
        });
      });
    },
  

 


 

 
posted @ 2021-06-13 19:22  live丶  阅读(2363)  评论(0编辑  收藏  举报