vue在微信里面的兼容问题_微信公众号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']);

}

},

此处中坑的希望得到帮助