记录企业微信自建应用扫一扫功能对接

大彭
436 阅读2分钟

我们的应用是Vue2.7开发的H5应用，路由模式是hash模式，有一个扫一扫功能，迁移到企业微信就需要进行配置：

第一步要构建授权否则拿不到用户信息

  1. 在路由拦截里面判断地址栏中是否有code（注意：在业务系统里面页面跳转的时候不要用code作为参数，否则会有意想不到的问题，虽然我没遇到）
   const searchParams = new URLSearchParams(window.location.search)
   const codeStr = searchParams.get('code')
   console.log('获取到的code==========', codeStr)

如果没有code需要跳转到微信授权，一个固定的地址，其中CropId 是企业的Id， AgentId是应用的AgentId，url一定要进行转义

const currentHref = window.location.href
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${CropId}&redirect_uri=${encodeURIComponent(currentHref)}&response_type=code&scope=snsapi_base&agentid=${AgentId}&state=STATE#wechat_redirect`

有code之后正常执行获取用户信息逻辑

2.想要调用企业微信扫一扫功能参考官方文档 https://developer.work.weixin.qq.com/document/path/90514 首先在public/index.html 引入 <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

image.png

也有其他方式的引入，参考官方文档

image.png 引入之后会在全局生产一个wx对象，即window.wx, 想要调用扫一扫等其他接口之前需要进行config接口注入权限验证配置，在注入权限验证配置之前需要先获取到签名，才能进行接口注入权限验证配置

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

image.png 调用后端接口传入当前地址#之前的地址，并且要进行encodeURLComponent转义之后传入后端，如果需要token也可以传入，也可以后端自己获取，前端对url一定要转义，否则会报 config:signature is not same

配置中的jsApiList 传入需要调用的接口，我这里只需要一个扫一扫功能

image.png 上面是完整配置，注释掉的是检查ji接口列表是否有权限等 浅浅记录一下~~

avatar
文章
阅读
粉丝