概述
客户需求在 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 需要缓存起来，有访问次数限制。
String tokenData = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRET;String resp = HttpUtils.sendGet(tokenData);
复制代码
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
评论