封装JS-SDK注入配置信息方法并多页面引入和解决ios系统扫一扫功能需要两次才能跳转对应的页面所有需要使用JS-SDK

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA（single-page application）的web app可在每次url变化时进行调用）

checkApi.js文件封装注入配置信息方法便于多页面应用MPA(multi-page application)引用

import wx from 'weixin-js-sdk'  //引入JS-SDK文件
import Ajax from '@/utils/fetch'
import until from '@/utils/until'
import Qs from 'qs'

function getParams(params) { //获取签名参数
  return Ajax({
    url: `${until.messagePath}portal/qrCode/getQrCodeParams?${Qs.stringify(params)}`,
    method: 'post'
  })
}

function checkApis() { //
  let params = window.location.href.split('#')[0] //当前网页的URL， 不包含#及其后面部分
  getParams({url: params}).then(res => { //
    let appid = res.data.data.appId
    let timestamp = parseInt(res.data.data.timestamp)
    let signature = res.data.data.signature
    let nonceStr = res.data.data.nonceStr
    wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appid, // 必填，企业微信的corpID
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
        jsApiList: ['openUrl', 'scanQRCode'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    });
  })

  wx.ready(function() { //通过ready接口处理成功验证
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    wx.checkJsApi({ //判断当前客户端版本是否支持指定JS接口
      jsApiList: ['openUrl', 'scanQRCode'], //需要检测的JS接口列表
      success: function() {} //以键值对的形式返回，可用的api值true，不可用为false; 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    })
  })

  wx.error(function(err) { //通过error接口处理失败验证
    console.log("config信息验证失败！", err);
  });

}

export default checkApis;

多页面应用的路由文件中引入checkApi.js

import Vue from "vue";
import Router from "vue-router";
import authority from "@/api/authority";
import checkApis from "@/api/checkApi"

Vue.use(Router);
// 路由配置
const constantRouterMap = [...];

const router = new Router({
  routes: constantRouterMap
});

router.beforeEach((to, from, next) => {
  document.title = to.meta.title ;
  authority('workbench', '1000005').then(userId => {
    checkApis() //路由跳转之前注入配置信息
    next()
  }).catch(err => {
    next(false)
  })
});

export default router;

在该模块的页面中就能愉快的使用wx接口了

这里的扫码功能在ios系统需要两次才能跳转对应的页面,所以做了如上黄色框框操作

参考文档: 企业微信API

====== 2021-03-23记录,如遇相关知识再补充

上述代码优化过程中,发现进入页面会调用两次init()方法里面的请求,所以后期改成了路由监听只有在扫一扫后才重新调用init()方法,而区别扫一扫进入页面还是正常进入页面路由连接中有一个参数isPreview可以区分

因为自己是多页面应用,其实路由都是#号前都是一样的,所以引入checkApi.js这一步应该放在授权的时候引入