微信JSSDK授权兼容ios与android

一、提取公共方法

wxConfig.js

/*
 * 判断是否IOS环境
 * */
import http from "./http";       //自己封装的请求方法
import wx from "weixin-js-sdk";
export function isIOS() {
  let isIphone = navigator.userAgent.includes("iPhone");
  let isIpad = navigator.userAgent.includes("iPad");
  return isIphone || isIpad;
}
/*
* 获取微信签名，注入权限验证配置
* */
export function requestWxStr() {
    http
    .get("/Message/getJsSdkConfig", {
      appId: "wx91e01031621·····",       //微信公众号id
      url: location.href.split("#")[0]   //当前路由
    })
    .then(res => {
      if (res.successful) {
        wx.config({
          debug: false,
          appId: res.data.appId, // 必填,公众号的唯一标识
          timestamp: res.data.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.data.noncestr, // 必填,生成签名的随机串
          signature: res.data.signature, // 必填,签名
          jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表
        });
      }
    });
}

二、在项目main.js通过路由守卫判断设备，是ios的就在初始的路由wx.config

main.js

import {isIOS,requestWxStr} from './uils/wxConfig' //引入定义的公共方法

router.beforeEach((to, from, next) => {
  if (isIOS()) {  //如果是ios就在刚进入时就调用wx.config
    if (from.path === '/') {
      requestWxStr() //请求服务器数据后wx.config
    }
  }
  next();
});

三、在调用wx功能的组件判断设备，是android的就在该组件内wx.config

调用功能的组件

import { isIOS, requestWxStr } from "../uils/wxConfig";

export default {
    mounted() {
    this.init();
  },
  methods: {
    //权限初始化
    init() {
      if (!isIOS()) {
        requestWxStr();
      }
    },
}

四、总结

在ios进行wx.config的时候，每次的地址都是首地址。所以要在第一次进入就进行权限验证，否者会验证失败。android就不存在这个问题。