vue项目调用微信扫一扫能力

背景

公司移动端项目需要点击调用微信扫一扫功能，故记录此次开发过程。

准备

1. 微信公众号开发者文档
2. vue调用微信扫一扫
3. 微信JS接口签名校验者工具

开始

1. 首先需有后端配合，拿到wx.config所需的参数

/**
 * nxt - 获取微信相关配置
 */
export const apiGetWechatConfig = (pageUrl) => {
  const url = `xxx?url=${pageUrl}`
  return demoRequest({
    url,
    method: 'GET'
  })
}

2. cdn引入文件jweixin-1.6.0.js

  <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

3. 通过接口拿到的参数后进行wx.config校验，执行ready方法

import wx from 'weixin-jsapi'

getScan() {
  const url = location.href.split('#')[0]
  apiGetWechatConfig(url).then(res => {
    const data = res.data
    wx.config({
      debug: true, // 开启调试模式
      appId: data.appId, // 必填，企业号唯一标识，此处填写corpid
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成随机的字符串
      signature: data.signature, // 必填，签名
      jsApiList: [
        'scanQRCode',
        'checkJsApi'
      ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    })
    // 成功时
    wx.ready(function() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          console.log('success result: ', result)
        },
        error: function(res) {
          console.log('error result: ', res)
        }
      })
    })
  })
}

4. 当调试出config:ok的消息后，证明已成功；此时将wx.config中的debug改为false即可。

常见bug及解决办法

1. invalid signature，与后端确认返回数据signature的正确性。