概述

客户需求在h5调用扫一扫来识别二维码，经调研发现使用微信sdk是最好的方式。官网的文档（ 概述 | 微信开放文档）写的很好，就是太伤肝，坑太多。下面我给大家详细描述一下实现过程。

java+uniapp实现微信JSSDK扫码功能_java

步骤
1、绑定域名

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

2、引入JS文件

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

var jWeixin = require('jweixin-module')
  • 1.
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);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.


  • 获取ticket
String ticketUrl =
   "https://api.weixin.qq.com/cgi-bin/ticket/getticket?"
       + "access_token="
       + accessToken
       + "&type=jsapi";
String resp = HttpUtils.sendGet(ticketUrl);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.


  • 获取签名
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();
 }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.


5、调用扫码


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


避坑指南

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

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

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

4、在微信容器使用微信sdk报错，config报错：config:invalid signature，这一步卡了我很久，严格执行步骤4，可以少走很多弯路；如果你是IOS，请记住SPA不会即时改变url，需要全局缓存页面地址；

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

最后，祝你好运。