vue开发微信公众号踩坑

JSSDK授权失败

同样的代码Android能授权成功，而微信却授权失败

问题产生原因

微信官方文档（附录5）：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#66
但是还是没有找到问题关键，最终在微信开放社区看到有人遇到同样问题，然后微信官方的人是这样回答的，忘记保存链接，具体你们可以去搜一下

IOS会以第一次进入应用的url作为真实的url，当我们使用当前url进行授权时，签名校验肯定会出现问题

解决方案

解决方案很多，下面解决方案只是其一
需要区分Andriod和IOS，进行不同授权处理,在程序初始化时保存url真实地址，在需要授权的界面拿到真实的url地址进行授权
注：Andriod默认使用当前url进行授权即可

在app.vue中的mounted方法中保存当前url，保存到vuex中并写入sessionStore
这样页面刷新保存的url也不是丢失

 mounted() {
    // 校验是否为IOS设备
    if (validIOSDevice()) {
      this.$store.commit("setConfigUrl", location.href)
    }
  }

然后在需要授权的界面，区分Android和IOS，IOS获取保存的真实url进行授权

微信支付JSAPI

调起支付时，提示该url为注册
问题原因跟上述差不多，都是因为微信校验的时候，Android和IOS取得url不同，导致问题产生
详情见微信文档：https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_3.shtml

支付授权目录校验规则说明：

a、如果支付授权目录设置为顶级域名（例如：https://www.weixin.com/ ），那么只校验顶级域名，不校验后缀；

b、如果支付授权目录设置为多级目录，就会进行全匹配，例如设置支付授权目录为https://www.weixin.com/abc/123/，则实际请求页面目录不能为https://www.weixin.com/abc/，也不能为https://www.weixin.com/abc/123/pay/，必须为https://www.weixin.com/abc/123/