微信公众号h5页面config验证兼容处理（vue）

微信公众号第三方h5页面在开发时避免不了要使用微信提供的jsApi，但在使用这些接口前，都必须经过config验证，官方文档上只提供说在每个调用api接口的页面调用一次config并传输当前页面完整路径即可，但是，此处的坑就是ios的验证方式和Android不太一样，ios只认刚进页面的路径，所以在页面一进来时就进行一次config验证即可，Android就按微信文档上所说的进行就可以，代码如下：

首先建一个js文件将config验证以及判断当前系统是ios还是Android的函数封装其中，方便全局调用；

（configTest.js）

import api from "@/api/my";
import wx from "weixin-js-sdk"

//判断当前系统是ios还是Android
export function judgePhone() {
    let u = navigator.userAgent;
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if(isIOS){
        return 'ios';
    }else {
        return 'android';
    }
}

//config验证
export function configTest(url,jsApi) {
    api.getConfig({  //此处为后台提供接口返回config所需参数，url即当前页面完整路径
        url:url
    }).then((res)=>{
        if(res.result===0){
            wx.config({
                debug: false, // 开启调试模式为true,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.data.appId, // 必填，公众号的唯一标识
                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                signature: res.data.signature,// 必填，签名
                jsApiList: jsApi // 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
            });
        }else {
            console.log(res.message)
        }
    })
}


如果是IOS系统：

在main.js文件中写如下代码：
import router from './router';
import { configTest,judgePhone } from "./util/configTest";

router.beforeEach((to, from, next) => {
  if (judgePhone()==='ios') {
    if (from.path === '/') {
      configTest(location.href.split("#")[0],['chooseImage','chooseWXPay','uploadImage','previewImage','closeWindow'])
    }
  }
  next();
});


如果是Android系统：

在调用微信接口的组件中进行如下编码：

import { configTest,judgePhone} from "@/util/configTest";

created(){
        if(judgePhone()==='android'){
            configTest(location.href.split('#')[0],['chooseImage','uploadImage','previewImage']);
        }
    },

此处中坑的希望得到帮助