概述

客户需求在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("×tamp=")
       .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，微信公众号接口提前配置好；

最后，祝你好运。

如若转载，请注明出处：开源字节 https://sourcebyte.vip/article/349.html