前端使用Vue进行企业微信开发之JS-SDK的引入和使用

最近一个在企业微信的项目,使用的是 vue+vant,之前并没有用到 JS-SDK,刚好有一个需求说要用到扫描二维码的功能,就去看了看文档怎么使用企业微信的 JS-SDK,经过搜索发现好像并没有很好的教程. 但是发现了一个就是,企业微信和普通微信开发使用的 JS-SDK 应该是同一个,只是微信开发使用的最新版本是 1.6.0 版本,而企业微信目前只支持到 1.2.0 版本.

官方文档参考地址

JS-SDK

企业微信 JS-SDK 是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。
通过使用企业微信 JS-SDK，网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力，为企业微信用户提供更优质的网页体验。

在企业微信的自建应用里设置可信域名

企业微信管理后台 -> 应用管理 -> 自建中找到自己的应用 -> 网页授权及 JS-SDK 点击'申请域名校验' -> 输入可信域名 -> 申请校验 -> 把验证文本文件上传到域名根目录下

引入 JS-SDK

这里官方文档的引入方法是直接 script 标签插入即可了

然后在项目里面就可以直接使用 wx 对象了

console.log(wx); // 其实就是console.log(window.wx)

插件安装方式引入

1.安装 weixin-js-sdk

npm install [email protected] # 或yarn add [email protected]

2.引入

import wx from "weixin-js-sdk";

console.log(wx);

使用(以调用扫一扫功能为例)

1.注入权限验证配置
通过 config 接口注入权限验证配置

// wxConfig为后端接口,发送url参数,返回配置wx.config的数据(appId,签名和签名时间戳等)
// 官方提示: 出于安全考虑，开发者必须在 服务器端 实现签名的逻辑。
wxConfig({ url: window.location.href }).then((response) => {
  // 返回数据之后配置jssdk
  wx.config(response.data);
});

// 官方使用示例
// wx.config({
//     beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
//     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
//     appId: '', // 必填，企业微信的corpID
//     timestamp: , // 必填，生成签名的时间戳
//     nonceStr: '', // 必填，生成签名的随机串
//     signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
//     jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
// });

2.使用接口功能
在需要使用接口的地方使用以下方法即可

wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  // 扫一扫功能例子
  wx.scanQRCode({
    desc: "scanQRCode desc",
    needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
    success: function (res) {
      // 回调
    },
    error: function (res) {
      if (res.errMsg.indexOf("function_not_exist") > 0) {
        alert("版本过低请升级");
      }
    },
  });
});