vue IOS 微信分享签名失败，二次刷新后就能成功的BUG

Z时代
2024-01-10
分类：综合

vue

这个BUG 搞得头大了两天，心态搞TM要蹦了

安卓正常操作使用window.location.href 作为签名链接一点毛病也没有

然后我用IOS 分享的时候第一次签名失败然后返回了上一页再进入试着分享就能成功。这是个什么逻辑。。。自己搞懵逼了

然后我就试着把签名的URL alert出来看看。结果发现 TM一模一样啊，为什么会config 报错签名失败呢

下面是借鉴了一个网友的记录（他写得比较明白）

------------------------------------------------------------------------------

问题：

在IOS手机微信端，从A页面(http://a.com/A) 跳转到B页面(http://a.com/B)后，B页面进行分享时就会报签名（invalid signature）错误。

分析：

从A页面跳转到B页面时，由于是使用vue-router切换，都是操作浏览器历史记录，所以ios端微信浏览器锁定的url的还是A页面的url。

这个时候，是不是很多人都会认为，既然页面路由变化了，那我重新请求下url签名接口，不就可以了。呵呵呵，你会发现报错：invalid signature。但是再刷新一下，又没有签名问题，尼玛，这是什么原因呢？？？

那么你在请求url签名接口的时候，传递的url参数又是什么呢？大概如下吧：

url1、直接是 location.href （history模式）

url2、自己拼装的 location.origin + \'/#\' + this.$route.pullPath （hash模式）

这个时候，你请求的接口都没问题，也能拿到签名数据。但是

问题就出在：你所请求的url签名地址和浏览器执行jweixin-1.x.x.js时锁定的地址不一致、不一致、不一致。你当前请求的可能是url1或url2，而此时微信锁定的地址仍然是进入A页面时的url（因为在进入A页面是加载并执行了jweixin-1.x.x.js, 而路由变化A到B时，并没有再次执行jxinwei-1.x.x.js）。所以问题就发生了，但是你再刷新一下，jweixin-1.x.x.js重新执行，此时微信浏览器锁定的url就是你当前刷新的url地址了，所以签名又成功了。

主要是因为：

【IOS】：ios微信端，路由变化时，微信认为SPA的url是不变的。

【Android】：android微信端，路由变化时，SPA的url是会变的（官方在安卓6.2版本，才对SPA变化作了支持）

所以，发起签名的url必须是微信锁定的url。

解决方案：
IOS端，把请求签名的url，保存到全局变量中。路由切换后，在调用分享接口时，使用全局变量里保存的url来请求签名

// 记录进入app时的url
    if (typeof window.entryUrl === \'undefined\' || window.entryUrl === \'\') {
        window.entryUrl = location.href.split(\'#\')[0]
    }
    // 进行签名的时候  Android 不用使用之前的链接， ios 需要
    let signLink =  /(Android)/i.test(navigator.userAgent) ? location.href.split(\'#\')[0] : window.entryUrl;

最后，每次验签名使用 signLink 获取，就ok了。

原文链接：https://blog.csdn.net/hualvm/article/details/85344076

------------------------------------------------------------------------------

附上我自己封装调用的微信分享源码

import { post } from "../api/http";//分享api
import wx from \'weixin-js-sdk\'
// export const shareTitle = \'测试\';
// export const shareUrl = \'测试连接\';
// export const shareImg = \'测试图片\';
// export const shareDesc = \'测试详情\';
export const option = {};
/**
 *分享
 * @param _this
 * @param shareTitle 标题
 * @param shareUrl 链接
 * @param shareImg 图片
 * @param shareDesc 描述
 */
export const commonShare = (_this, option) => {
  var url = \'\'
  var u = navigator.userAgent;
   var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isIOS) {
      url=window.entryUrl
    }else{
      url = window.location.href;
    }
  var data = {
    url: url
  };
  //console.log(data.url)
  post(\'main/getShareSign\', data).then(res => {
    if (res.signature != \'\') {
      var data = res;
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名，见附录1
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "showMenuItems", "onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
      wx.ready(function () {
        wx.showMenuItems({
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:favorite"
          ] // 要显示的菜单项，所有menu项见附录3
        });
        wx.updateTimelineShareData({
          title: option.shareTitle, // 分享标题
          link: option.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: option.shareImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
            // _this.$vux.toast.text(\'分享成功！！！\');
            option.success();
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            // _this.$vux.toast.text(\'取消分享！！！\');
            option.error();
          }
        });
        wx.updateAppMessageShareData({
          title: option.shareTitle, // 分享标题
          desc: option.shareDesc, // 分享描述
          link: option.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: option.shareImg, // 分享图标
          type: "", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function () {//微信2018年5月16日就改了，分享不管是真的分享了还是取消了分享，返回来的都是success
            // 用户确认分享后执行的回调函数
            //_this.$vux.toast.text(\'分享成功！！！\');
            option.success();
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            //_this.$vux.toast.text(\'取消分享！！！\');
            option.error();
          }
        });
        wx.error(function (res) {
          // config信息验证失败会执行error函数
          console.log(\'微信config失败：\', res)
        });
      });
    }
  }).catch(err => {
    alert(err)
    console.log(err)
  })
};

以上是 vue IOS 微信分享签名失败，二次刷新后就能成功的BUG 的全部内容，来源链接： utcz.com/z/375067.html

vue IOS 微信分享签名失败，二次刷新后就能成功的BUG

其他人也看了：