微信公众号二次分享ios分享失败问题

一、首先,看正常通用的

1、绑定域名

  再公众号开发设置里边配置域名

2、引入js文件

index.html

 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>

3、通过后台处理调用接口得到签名

这里通过添加路由守卫 判断 ios系统时 保存第一次进入时的链接地址(iso分享失败原因:因为ios获取到的url永远是你进入这个项目的第一个url,不访你可以点击上角刷新试试)
beforeRouteEnter(to, from, next) { let userAgent = navigator.userAgent; if (userAgent.includes("iPhone") || userAgent.includes("iPad")) { sessionStorage.setItem("originUrl", location.href); // 用于ios分享 } next(); },

 

 sendShare() {
      // this.reload();
      this.common.tip("点击右上角完成分享");
      var timestamp = "";
      var nonceStr = "";
      var signature = "";
      let urls = "";
    // 这个判断是处理ios分享失效的问题 let userAgent
= navigator.userAgent; if (userAgent.includes("iPhone") || userAgent.includes("iPad")) { urls = sessionStorage.getItem("originUrl"); } else { urls = window.location.href; }
    // 这儿的调接口方法是自己封装的
this.http.getRequest(apis.getSignature_url, { urls: urls // 注意注意注意:这里的路径必须是当前页面路径,并且必须和公众号里边配置的域名保持一致,否则会签名失效 }).then(res => { console.log(res, "res"); timestamp = res.timestamp; nonceStr = res.nonceStr; signature = res.signature;

      通过config接口注入权限验证配置


          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: "wxfbf80fe01e7999a8", // 必填,公众号的唯一标识,填自己的!
            timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
            nonceStr: nonceStr, // 必填,生成签名的随机串
            signature: signature, // 必填,签名,见附录1
            jsApiList: ["updateAppMessageShareData", "onMenuShareTimeline"], // 权限导入
          });
          var url_link = apis.sharUrl + "/index?activityPlanId=" +this.activityPlanId + "&accountId=" + this.accountId;

      通过ready接口处理成功验证


          wx.ready(() => {
            //需在用户可能点击分享按钮前就先调用
            // 分享给朋友

            wx.updateAppMessageShareData({
              title: this.data.title, // 分享标题
              desc: this.data.introduce, // 分享描述
              link: url_link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: this.logo, // 分享图标, 此图标也要以http开头的路径
              success: function() {
                // 设置成功
              }
            });
       

      通过error接口处理失败验证


            wx.error(function(res) {
              // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
            });
          });
          // =================
        });
    },

参考:https://www.cnblogs.com/zishang91/p/10755488.html

https://blog.csdn.net/sinat_33184880/article/details/90240567

猜你喜欢

转载自www.cnblogs.com/mokeke/p/13209967.html
今日推荐