微信公众号开发调用微信接口（以扫一扫为例）

1. 绑定域名

在微信公众号平台中配置安全域名: 公众号设置 - 功能设置 - JS接口安全域名

2. 引用js文件

npm install weixin-js-sdk --save

<script>
  import wx from 'weixin-js-sdk'
  export default {
  }
</script>

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

签名算法见附录1，所有JS接口列表见附录2

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

4. 具体操作

// 获取微信签名
$.ajax({
   url: '后端给的接口',
   data: { // 具体参数看后台给你的文档，我的只需要一个url
     url: location.href.split('#')[0],
     // 这里是当前页面的url，一定要 location.href 获取，不然签名会无效。
   },
   success: function (res) {
      // res 返回的签名等数据
   }
})
wx.config({
   debug: false,
   appId: res.appId, // 必填,公众号的唯一标识
   timestamp: res.timeStamp, // 必填,生成签名的时间戳
   nonceStr: res.nonceStr, // 必填,生成签名的随机串
   signature: res.signature, // 必填,签名
   jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
})
wx.ready(function () {
  // config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
  // config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
  wx.checkJsApi({ // 判断当前客户端版本是否支持指定JS接口
    jsApiList: [
      'scanQRCode'
    ],
    success: function (res) { // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
      if (res.checkResult.scanQRCode === true) {
         wx.scanQRCode({ // 微信扫一扫接口
           desc: 'scanQRCode desc',
           needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
           scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
           success: function (res) {
             const getCode = res.resultStr // 当needResult 为 1 时，扫码返回的结果
         }
      })
    } else {
       alert('抱歉，当前客户端版本不支持扫一扫')
      }
    },
    fail: function (res) { // 检测getNetworkType该功能失败时处理
      alert('fail' + res)
    }
  })
})

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

具体的签名等数据都是后台处理好了，前端调用接口拿数据就OK。

原文地址：https://www.jianshu.com/p/4e3feddb9c60

最后编辑于：2020.04.02 17:35:14