H5接入企业微信sdk

黄粱一梦2024-04-1911

背景

企业微信,企业内部应用,扫码识别,刚开始使用的是 vue3-qr-reader 但是反映说识别效率不是很高,由于是在企业微信内部环境使用,所以接入企业微信js-sdk

基本流程

创建应用

https://developer.work.weixin.qq.com/document/path/90487

image.png

所需参数

let data ={}  //data为后台返回值
 
wx.config({
  beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: data.corpId, // 必填,企业微信的corpID
  timestamp: data.timestamp, // 必填,生成签名的时间戳
  nonceStr: data.noncestr, // 必填,生成签名的随机串
  signature: data.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
  jsApiList: ["chooseImage", "invoke"] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
/*wx.ready(function () {
  wx.checkJsApi({
    jsApiList: ["invoke", "scanQRCode"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
    success: function (ress) {
      // 以键值对的形式返回,可用的api值true,不可用为false
      // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
  });
});*/
wx.error(function (res) {
  console.log("错误:" + JSON.stringify(res));
});



/** 使用 */
function scanCode() {
  wx.ready(() => {
    wx.checkJsApi({
      jsApiList: ["invoke", "scanQRCode"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
      success: res => {
        // 以键值对的形式返回,可用的api值true,不可用为false
        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });
    wx.invoke("enterpriseVerify", {}, res => {
      // alert(JSON.stringify(res));
    });
    wx.scanQRCode({
      desc: "scanQRCode desc",
      needResult: 1, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
      scanType: ["qrCode"], // 可以指定扫二维码还是条形码(一维码),默认二者都有
      success: res => {
    
        let data = JSON.parse(res.resultStr);
        //扫码后的后续动作
        
       
      },
      error: res => {
        if (res.errMsg.indexOf("function_not_exist") > 0) {
          alert("版本过低请升级");
        }
      }
    });
  });
}

验签地址
https://developer.work.weixin.qq.com/devtool/signature

生成签名


1.获取access_token

https://developer.work.weixin.qq.com/document/path/91039

2.获取企业jsapi_ticket

https://developer.work.weixin.qq.com/document/22677

企业微信 – 内网穿透回调测试工具

https://developer.work.weixin.qq.com/devtool/introduce?id=40600

参考使用Cpolar进行微信sdk回调测试

https://cloud.tencent.com/developer/article/2390360

分类:前端Vue

标签:前端wx-sdk

上一篇unveilr 文档下一篇vue3,扫码器--vue-qrcode-reader

版权声明

本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~

Preview