概述

客户需求在h5调用扫一扫来识别二维码，经调研发现使用微信sdk是最好的方式。

官网的文档（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html）写的很好，就是太伤肝，坑太多。

下面我给大家详细描述一下实现过程。

步骤

1、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。ip白名单记得也需要配置，不然后端会报错，无法调用接口。

2、引入JS文件

npm方式安装，npm install jweixin-module --save ，uniapp需要建立package.json

var jWeixin = require('jweixin-module')

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

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

4、java获取token,ticket,签名

下面的三步一个参数都不能错，不然就很难搞，token和ticket需要缓存起来，有访问次数限制。

• 获取token

  String tokenData =
        "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="
                + APPID
                + "&secret="
                + SECRET;
  String resp = HttpUtils.sendGet(tokenData);

• 获取ticket

  String ticketUrl =
        "https://api.weixin.qq.com/cgi-bin/ticket/getticket?"
                + "access_token="
                + accessToken
                + "&type=jsapi";
  String resp = HttpUtils.sendGet(ticketUrl);

• 获取签名

  String url = ??? // 前端的请求页面
  String ticket = String.valueOf(jsonObject.get("ticket"));
  String nonceStr = UUID.randomUUID().toString();
  String timestamp = Long.toString(System.currentTimeMillis() / 1000);
  String string1 =
        new StringBuilder("jsapi_ticket=")
                .append(ticket)
                .append("&noncestr=")
                .append(nonceStr)
                .append("&timestamp=")
                .append(timestamp)
                .append("&url=")
                .append(url)
                .toString();
  // 得到签名
  String signature = encryptSHA(string1);
  
  /**
  * sha
  */
  private static String encryptSHA(String signStr) {
      StringBuffer hexValue = new StringBuffer();
      try {
      MessageDigest sha = MessageDigest.getInstance("SHA-1");
      byte[] byteArray = signStr.getBytes("UTF-8");
      byte[] md5Bytes = sha.digest(byteArray);
      for (int i = 0; i < md5Bytes.length; i++) {
      int val = ((int) md5Bytes[i]) & 0xff;
      if (val < 16) {
      hexValue.append("0");
      }
      hexValue.append(Integer.toHexString(val));
      }
      } catch (Exception e) {
      e.printStackTrace();
      return "";
      }
      return hexValue.toString();
  }

5、调用扫码

this.$wx.scanQRCode((res) =>
{this.$u.route('pages/my/device',   {serialNo:res.resultStr}
);

避坑指南

1、通过后端获取调用微信sdk所需的签名过程中，需要注意跨域问题；

2、用微信sdk前提必须是微信容器，换句话说就是微信浏览器打开，才能使用微信sdk；

3、如何在开发本地环境去测试微信sdk的调用情况，可以做内网穿透，使用微信开发者工具调试；

4、在微信容器使用微信sdk报错，config报错：config:invalid signature，这一步卡了我很久，严格执行步骤4，可以少走很多弯路；

如果你是IOS，请记住SPA不会即时改变url，需要全局缓存页面地址；

5、报错config:fail,invalid url domain，微信公众号接口提前配置好；

最后，祝你好运。