企业微信调用扫一扫接口

2024-07-09 12:38| 来源: 网络整理| 查看: 265

1.在企业微信的工作台新建应用。打开应用管理。

点击修改，设置打开该应用跳转的网页（该网页所属项目需要部署到服务器，url地址应为测试服或正式服地址）

2.点击如图红框位置，启用网页授权及JS-SDK（图示是已经启用过的）

3.可信域名为当前应用跳转页面的url地址解析出来的域名（找后端的同学解析一下）。然后将该域名发给管理员申请备案验证域名归属（公司的企业微信找领导。领导有管理员权限），如图3-2，官方文档有说明。之后点击申请校验域名

图 3-1

图 3-2

按照提示操作，先下载密钥文件，将文件放在代码入口文件的平级（后端同学将代码部署到服务器可能跟前端入口文件不太一样，可以将文件发给后端同学，让他放在入口文件平级的地方），放好之后测试一下是否可以访问，访问域名地址+文件名（图 3-4），可以访问则将最后一条勾选，点击确认。

图 3-3

图 3-4

显示已验证，则启用成功：

4.按照JS-SDK官方文档操作（如果是低版本企业微信则将js文件版本号改为1.0.0）

官方文档：使用说明 - 接口文档 - 企业微信开发者中心 (qq.com)https://developer.work.weixin.qq.com/document/path/90514

4.1 引入JS文件：

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

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

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

这几个必填的参数需要从后端的接口获取，appId从管理员获取(是唯一的）

生成签名的算法：（可以在后端处理，也可以让后端返回jsapi_ticket，timestamp和nonceStr来自己根据算法生成签名）建议后端处理好直接生成签名和这些参数一起返回到前端。

JS-SDK使用权限签名算法 - 接口文档 - 企业微信开发者中心 (qq.com)https://developer.work.weixin.qq.com/document/path/90506 4.3 通过ready接口处理成功验证

wx.ready(function(){ // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 });

4.4 通过error接口处理失败验证

wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 });

4.5 调用成功也会有弹窗的问题

官方文档最下边有这样的提示：

以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性err_msg，其值格式如下：

调用成功时："xxx:ok" ，其中xxx为调用的接口名用户取消时："xxx:cancel"，其中xxx为调用的接口名调用失败时：其值为具体错误信息

也就是说，调用成功与失败都会返回一个err_msg的属性，在手机端会作为弹窗弹出，因此在确保调用成功之后可以将config中的debug设为false。

5.调用企业微信的扫一扫接口，按照官方文档操作：

企业微信扫一扫 - 接口文档 - 企业微信开发者中心 (qq.com)https://developer.work.weixin.qq.com/document/path/90492直接使用接口代码即可：

wx.scanQRCode({ desc: 'scanQRCode desc', needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果， scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有 success: function(res) { // 回调 var result = res.resultStr;//当needResult为1时返回处理结果 }, error: function(res) { if (res.errMsg.indexOf('function_not_exist') > 0) { alert('版本过低请升级') } } });

needResult为0时，扫描结果由企业微信处理，因此success函数内无需写操作步骤；若需要自己处理，则将needResult设为1，在success内写具体的操作步骤（一般为调用接口，后端接口内做逻辑处理）

6.整体代码：（我直接使用wx报错，网上搜索导入包依然报错，因此我使用的window.wx）

6.1 模板内的内容：

放了一个按钮，点击按钮触发scanCode方法，在方法内部进行调用操作

el-button

6.2 js部分：（注意看注释）

async function scanCode(){ try{ //动态获取当前页面的url地址 const url= window.location.href.split('#')[0] //将url作为参数传入接口，将接口数据解构出来用data对象接受 const {data} = await getParams(url) //可以将接口中数据打印出来看 console.log("data",data) window.wx.config({ beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题 debug: false, // 在测试没问题之后，关闭debug模式，防止弹窗 appId: data.data.appId, // 必填，企业微信的corpID timestamp: data.data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.data.nonceStr, // 必填，生成签名的随机串 signature: data.data.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法 jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来 }) }catch(error){ console.log(error) } window.wx.ready(function () { // 调用企业微信扫一扫接口 window.wx.scanQRCode({ desc: "scanQRCode desc", needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果， scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有 success: res => { // 回调 // 当needResult 为 1 时，扫码返回的结果 //我的vscode开启了eslint校验，定义变量而不使用会报错，在报错代码行后面跟上如下注释即可解决报错 var result = res.resultStr// eslint-disable-line no-unused-vars }, fail: function (err) { console.log(err) } }) }) window.wx.error(function(res){ //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 var result = res.resultStr// eslint-disable-line no-unused-vars console.log("ready失败！") }) }

6.3 index.js中的内容（定义接口方法）：

// 导入post请求 import { get } from "@/utiles/request.js" // 获取企业微信扫一扫参数的接口 export const getParams = (url) => { return get(`http://aaa.bbb.ccc.ddd/api/getxxx?url=${url}`) }

【本文地址】

公司简介

联系我们