vue项目在history模式下ios调用wxapi失败问题记录

问题描述

vue项目在微信公众号通过js-sdk调用扫一扫，安卓可以正常使用，ios则报非法签名，刷新页面后才可以成功调用。

截屏2022-03-11 13.35.10.png

解决过程

1、通过百度得知，在vue项目中，push的跳转不能被写入ios微信浏览器的地址栏，需要将push跳转改为window.loaction.href跳转 ，window.loaction.href跳转才能改变地址栏的变化，才能签名成功。

2、更改跳转方式后，仍然没有解决问题。通过微信右上角复制的页面链接和使用location.href获取的链接对比，发现二者并不一致。location.href获取的链接多了一个参数：VNK=1933df22，这个参数是因为使用了vue-navigation插件自动加上的。

3、最后的解决方式如下，通过在beforeRouteEnter中判断进入的路由和当前location.search是否都含有VNK参数,如果不一致，则重写地址栏

// 在需要调wxapi的页面写
beforeRouteEnter(to,from,next) {
    const { VNK } = to.query;
    let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isiOS && location.search.indexOf(VNK) < 0) { // 微信分享静态页面
      // 此处不可使用location.replace
      location.assign(to.fullPath)
    } else {
      next();
    }
  },