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

·  阅读 610

所有需要使用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

image-20210323181651627.png

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接口了

image-20210323182409680.png

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

参考文档: 企业微信API

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

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

image.png

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

image.png

image.png

分类:
前端
标签:
分类:
前端
标签: