• 微信小程序接入NFC,使用HCE模拟主机卡完成NFC刷卡发送消息


    NFC相信大家都很熟悉,现实中经常使用的门禁卡,公交卡,地铁卡,饭卡等都是采用NFC功能,那么你知道吗,NFC也可以用微信小程序来实现。使用微信小程序可以读取/写入让手机成为一个刷卡器,也可以使用微信小程序模拟一个主机卡,来刷开门禁/饭卡等等。本章就带大家来一起看看微信小程序的NFC有何不同!

    目录

    一、什么是NFC

    二、NFC可以做什么

    三、微信小程序的NFC

    四、使用步骤

    1.研究API

    2.使用方法

    一:新项目

    二:设置简单页面及对应的js

    三:根据上述我们理清的 NFC生命周期顺序来搭建我们的NFC项目。

    四:需要开始初始化StartHCE(初始化NFC,将手机初始化为一个主机模拟卡)

    五:onHCEMEssage 监听

    六:使用wx.sendHCEMessage 发送NFC消息

    总结


    一、什么是NFC

    NFC是一种采用13.56MHz频带的近距离无线通讯技术,虽然通讯距离仅为10cm左右,不过和非接触式IC卡技术一样,我们只需要“触碰一下”即可在不同的电子产品之间交换数据。

    与非接触IC卡不同,NFC与非接触式IC卡不同,NFC可进行双向通信。只要是支持NFC的产品和IC卡,就可以读出或写入数据。还可在手机等便携产品间进行通信。数据传输速度不高,有106kbit/秒、212kbit/秒、424kbit/秒以及848kbit/秒四种速度可供选择。

    NFC介绍

    二、NFC可以做什么

    NFC具有“卡模拟”、“读写器模拟”以及“产品间通信(P2P)”三种功能。

    1. 卡模拟:举例来说,我们可以用手机来模拟门禁卡,公交卡,饭卡等等。但是要注意的是,它是模拟出来的,也就是说并不实体存在的一个卡。

    2. 读写器模拟:指的就是,你可以模拟一个读写器,别人用NFC卡来你这里刷卡,你就可以获取其卡片上的信息。

    3. 通讯讲就是数据通信,使用NFC卡在刷的时候都会进行数据交换。用来做一些事情,比如:配置网络,设置信息,传输文件等等。

    三、微信小程序的NFC

    NFC | 微信开放文档

    我们打开文档可以看到,对于NFC,微信给它的名字叫:近场通讯

    首先一定要强调的是,因为苹果手机权限的缘故,所以NFC在微信小程序中只支持:Android

    微信将NFC分为了三部分

    • HCE(基于主机的卡模拟),也就是将安卓手机模拟成实体的智能卡。我们可以通过模拟的智能卡来刷对应的读卡器,给读卡器传递数据。
    • 支持NFC读写,也就是将手机作为读卡器来使用。也就是我们可以将一些实体的NFC卡通过贴在手机上从而实现读取卡内容。
    • NFC标签打开小程序。指的就是我们可以通过NFC卡片触碰手机,快速唤起小程序页面的能力。

    1. HCE(基于主机的卡模拟)的使用场景:

    • 使用手机做门禁卡/公交卡/地铁卡
    • 使用手机给读卡器传递数据(配网、登记)

    2. NFC读写的使用场景:

    • 使用手机做刷卡器,来获取NFC卡的信息。

    3. NFC标签打开小程序的使用场景

    • 设备的快速配网
    • 文件快速传输等快捷控制

    官网文档写的也很齐全了,大家可以根据自己的需求选择不同的场景来进行使用。

    本章我就选择了HCE(基于主机的卡模拟)场景。

    四、使用步骤

    1.研究API

    wx.stopHCE(Object object) | 微信开放文档

    微信官方文档中,卡模拟一共有六个API。

    分别为:

    wx.stopHCE 关闭NFC模块。

    wx.startHCE 初始化NFC

    wx.sendHCEMessage 发送NFC消息

    wx.onHCEMessage  监听接收NFC设备消息事件。

    wx.offHCEMessage  移除接收 NFC 设备消息事件的监听函数

    wx.getHCEState 判断当前设备是否支持 HCE 能力。

    再次特别要强调的是,NFC仅在Android系统下支持。

    2.使用方法

    有过开发经验的同学其实比较清楚。

    以上API 很明显就是一个生命周期

    从开始到销毁。我们该如何去操作这个NFCapi呢?

    1. 首先调用 wx.getHCEState, 判断设备是否支持NFC

    2. 调用 wx.startHCE(OBJECT) 初始化手机的NFC模块;

    3. 初始化完成后,调用 wx.onHCEMessage 监听芯片响应的消息;

    4. 点击页面上的“询卡”按钮,调用 wx.sendHCEMessage发送询卡指令;

    5. 这时 wx.onHCEMessage(应该可以收到带有uid信息的芯片响应数据;

    6. 业务处理。

    7.  全部操作完成后之后,调用 wx.stopHCE停止手机的NFC模块

    好了,废话不多说,直接进入我们的正式项目。

    一:新项目

    我们需要利用微信开发者工具,来新建一个我们的项目。APPID大家如果有的话就用自己的,没有的话则使用测试号即可。

    二:设置简单页面及对应的js

    三:根据上述我们理清的 NFC生命周期顺序来搭建我们的NFC项目。

    顺序自然为:页面打开初始化的时候就需要 getHCEState 判断设备是否支持NFC。不支持则需要做兼容。

    当返回值的errCode为 0  的时候则一切正常,是支持NFC的。

    同时,为了更有效的避免大家判断code,所以我们可以将官网的 getHCEState返回code 声明出来,以便后面使用。

    四:需要开始初始化StartHCE(初始化NFC,将手机初始化为一个主机模拟卡)

     wx.startHCE接收一个参数为 aid_list。

    官方解释意思为,需要注册到系统AID列表中,AID列表其实就是每个刷卡器的唯一标识,不清楚的就问下你们的安卓或者默认填写:F22222222。与其它API 类似,它也有自己的返回值,默认0为正常成功的。

    五:onHCEMEssage 监听

    在说这里之前,网上许多朋友碰到的类似,wx.onHCEMessage,不管怎么调都没有返回值?

    不知道有没有伙伴仔细看我上面的话,初始化完成后,onHCEMessage其实就要开始监听。至于为什么没有返回值。是因为,wx.onHCEMessage是一个监听。它需要读卡器来响应它,也就是说要给需要读卡器(设备)通过render 指令 给它发消息,这时候它才能拿得到值。

     

    它有三个返回值,但是我们只一般取第一个也就是 messageType。

    messageType的值 = 1 时,也就是说,读卡器给我们响应了,说它接收到了NFC。这时候我们就可以调用 sendHCEMessage 来给读卡器发送消息了。

    messageType的值 = 2 时,就是说,手机已经从读卡器上拿开了。

     所以我们在这里只判断 messageType的值为1. 当等于1 的时候我们就可以开始发消息了。

    六:使用wx.sendHCEMessage 发送NFC消息

    细心的朋友会发现,发个消息不就是 wx.sendHCEMessage就够了。为啥我的有一大堆的ArrayBuffer 甚至还有comm.

    这是因为文档有标注:

    wx.sendHCEMessage 的data 必须是一个二进制数据。也就是我们不能将普通的JSON,字符串等数据 传递给它。否则会报错。

    那这时候我们需要怎么办呢?

    转换!

    我在项目中的comm 就是一个封装的 转换文件。内容如下:

    comm.js

    1. const formatTime = date => {
    2. const year = date.getFullYear()
    3. const month = date.getMonth() + 1
    4. const day = date.getDate()
    5. const hour = date.getHours()
    6. const minute = date.getMinutes()
    7. const second = date.getSeconds()
    8. return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    9. }
    10. /**
    11. * 生成指定长度随机数
    12. */
    13. function genRandom(n) {
    14. let a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //生成的随机数的集合
    15. let res = [];
    16. for (let i = 0; i < n; i++) {
    17. let index = parseInt(Math.random() * (a.length)); //生成一个的随机索引,索引值的范围随数组a的长度而变化
    18. res.push(a[index]);
    19. a.splice(index, 1) //已选用的数,从数组a中移除, 实现去重复
    20. }
    21. return res.join('');
    22. }
    23. /**
    24. * 字符串转换为时间
    25. * @param {String} src 字符串
    26. */
    27. function strToDate(dateObj){
    28. dateObj = dateObj.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/(-)/g, '/')
    29. dateObj = dateObj.slice(0, dateObj.indexOf("."))
    30. return new Date(dateObj)
    31. }
    32. function isFunctinMethod(name) {
    33. if (name != undefined && typeof name === 'function') {
    34. return true
    35. }
    36. return false
    37. }
    38. const formatNumber = n => {
    39. n = n.toString()
    40. return n[1] ? n : '0' + n
    41. }
    42. // ArrayBuffer转16进度字符串
    43. function ab2hex(buffer) {
    44. var hexArr = Array.prototype.map.call(
    45. new Uint8Array(buffer),
    46. function (bit) {
    47. return ('00' + bit.toString(16)).slice(-2)
    48. }
    49. )
    50. return hexArr.join('');
    51. }
    52. //十六进制字符串转字节数组
    53. function hex2Bytes(str) {
    54. var pos = 0;
    55. var len = str.length;
    56. if (len % 2 != 0) {
    57. return null;
    58. }
    59. len /= 2;
    60. var hexA = new Array();
    61. for (var i = 0; i < len; i++) {
    62. var s = str.substr(pos, 2);
    63. var v = parseInt(s, 16);
    64. hexA.push(v);
    65. pos += 2;
    66. }
    67. return hexA;
    68. }
    69. function hex2ArrayBuffer(hex){
    70. var pos = 0;
    71. var len = hex.length;
    72. if (len % 2 != 0) {
    73. return null;
    74. }
    75. len /= 2;
    76. var buffer = new ArrayBuffer(len)
    77. var dataview=new DataView(buffer)
    78. for (var i = 0; i < len; i++) {
    79. var s = hex.substr(pos, 2);
    80. var v = parseInt(s, 16);
    81. dataview.setInt16(i,v)
    82. pos += 2;
    83. }
    84. return buffer
    85. }
    86. /**
    87. * string转16进制
    88. */
    89. function stringToHex(str) {
    90. var val = "";
    91. for (var i = 0; i < str.length; i++) {
    92. if (val == "")
    93. val = str.charCodeAt(i).toString(16);
    94. else
    95. val += str.charCodeAt(i).toString(16);
    96. }
    97. return val;
    98. }
    99. /**
    100. * 16进制转string
    101. */
    102. function hexCharCodeToStr(hexCharCodeStr) {
    103.   var trimedStr = hexCharCodeStr.trim();
    104.   var rawStr =
    105.   trimedStr.substr(0, 2).toLowerCase() === "0x"
    106.   ?
    107.   trimedStr.substr(2)
    108.   :
    109.   trimedStr;
    110.   var len = rawStr.length;
    111.   if (len % 2 !== 0) {
    112.     alert("Illegal Format ASCII Code!");
    113.     return "";
    114.   }
    115.   var curCharCode;
    116.   var resultStr = [];
    117.   for (var i = 0; i < len; i = i + 2) {
    118.     curCharCode = parseInt(rawStr.substr(i, 2), 16); // ASCII Code Value
    119.     resultStr.push(String.fromCharCode(curCharCode));
    120.   }
    121.   return resultStr.join("");
    122. }
    123. function pad(num, n) {
    124. var len = num.toString().length;
    125. while (len < n) {
    126. num = "0" + num;
    127. len++;
    128. }
    129. return num;
    130. }
    131. function strToHexCharCode(str) {
    132.   if (str === "")
    133.     return "";
    134.   var hexCharCode = [];
    135.   hexCharCode.push("0x");
    136.   for (var i = 0; i < str.length; i++) {
    137.     hexCharCode.push((str.charCodeAt(i)).toString(16));
    138.   }
    139.   return hexCharCode.join("");
    140. }
    141. /**
    142. * string转byte数组
    143. */
    144. function stringToByteArray(str) {
    145. var bytes = new Array();
    146. var len, c;
    147. len = str.length;
    148. for (var i = 0; i < len; i++) {
    149. c = str.charCodeAt(i);
    150. if (c >= 0x010000 && c <= 0x10FFFF) {
    151. bytes.push(((c >> 18) & 0x07) | 0xF0);
    152. bytes.push(((c >> 12) & 0x3F) | 0x80);
    153. bytes.push(((c >> 6) & 0x3F) | 0x80);
    154. bytes.push((c & 0x3F) | 0x80);
    155. } else if (c >= 0x000800 && c <= 0x00FFFF) {
    156. bytes.push(((c >> 12) & 0x0F) | 0xE0);
    157. bytes.push(((c >> 6) & 0x3F) | 0x80);
    158. bytes.push((c & 0x3F) | 0x80);
    159. } else if (c >= 0x000080 && c <= 0x0007FF) {
    160. bytes.push(((c >> 6) & 0x1F) | 0xC0);
    161. bytes.push((c & 0x3F) | 0x80);
    162. } else {
    163. bytes.push(c & 0xFF);
    164. }
    165. }
    166. return bytes;
    167. }
    168. /**
    169. * byte数组转string
    170. */
    171. function byteToString(bytearr) {
    172. if (typeof arr === 'string') {
    173. return arr;
    174. }
    175. var str = '',
    176. _arr = arr;
    177. for (var i = 0; i < _arr.length; i++) {
    178. var one = _arr[i].toString(2),
    179. v = one.match(/^1+?(?=0)/);
    180. if (v && one.length == 8) {
    181. var bytesLength = v[0].length;
    182. var store = _arr[i].toString(2).slice(7 - bytesLength);
    183. for (var st = 1; st < bytesLength; st++) {
    184. store += _arr[st + i].toString(2).slice(2);
    185. }
    186. str += String.fromCharCode(parseInt(store, 2));
    187. i += bytesLength - 1;
    188. } else {
    189. str += String.fromCharCode(_arr[i]);
    190. }
    191. }
    192. return str;
    193. }
    194. /**
    195. * 二进制转10
    196. */
    197. function bariny2Ten(byte){
    198. return parseInt(byte, 2)
    199. }
    200. function bariny2Hex(a){
    201. return parseInt(a, 16)
    202. }
    203. /**
    204. * 10/16进制转2进制
    205. */
    206. function ten2Bariny(ten){
    207. return ten.toString(2)
    208. }
    209. function str2Hex(str){
    210. return parseInt(str, 10).toString(16)
    211. }
    212. /**
    213. * 16进制转2进制
    214. */
    215. function hex2bariny(hex){
    216. return parseInt(hex, 16).toString(2)
    217. }
    218. module.exports = {
    219. formatTime: formatTime,
    220. isFunctinMethod: isFunctinMethod,
    221. ab2hex: ab2hex,
    222. hex2Bytes: hex2Bytes,
    223. stringToByteArray: stringToByteArray,
    224. byteToString: byteToString,
    225. hex2ArrayBuffer: hex2ArrayBuffer,
    226. bariny2Ten: bariny2Ten,
    227. bariny2Hex: bariny2Hex,
    228. ten2Bariny: ten2Bariny,
    229. str2Hex: str2Hex,
    230. hex2bariny: hex2bariny,
    231. genRandom: genRandom,
    232. stringToHex: stringToHex,
    233. hexToString: hexCharCodeToStr,
    234. pad: pad
    235. }
    '
    运行

     它里面包括了 string 转 字节数组等常用转换方法。

    至于 ArrayBuffer  以及 DataView 等方法,相信各位也都知道,就不在这里做详解。不了解的可以在CSDN上搜索学习。

    由于我在这里给后台需要传递的是一个JSON,所以我就将JSON转换为字符串。然后再将字符串转换为字节数组,传递给了消息。

    comm就是 上述封装的转化文件。comm.js 

    stringToByteArray 方法就是 comm.js 文件中封装的 string转 字节数组的方法。

    当我们完成这一切后使用“真机调试”前往对应刷卡器跟前刷卡即可!会发现前端已经成功了,并且读卡器也已经在控制台上打印出了我们传递的数据。

    至此,我们的项目就结束了。

    总结

    以上就是今天分享给大家的微信小程序HCE模拟主机卡的功能。

    但是其中不缺乏有一些坑。我列出来供大家参考!

    1. wx.onHCEMessage 没有返回值。

    这个可能是我见过最多的问题了,其实它没有返回值的原因就是,读卡器没有 返回信息。通俗点讲就是,你手机开启了NFC,当你挨着读卡器的时候,手机不知道你有没有挨上读卡器,所以需要读卡器给你说一句,你挨上我了,可以发消息了。所以这块的处理是需要对应的客户端开发来处理的,小程序端已经结束了。如果客户端开发不会的话,在此处放一个大佬的文章,可以让客户端开发参考下。微信小程序 NFC HCE卡模拟+AndroidNFC读取优必果

    2. 我的手机刷卡没反应。是我哪里写错了吗?

    如果你是按照上面的步骤同时结合官网文档来进行的,那么就基本没错。如果刷卡没反应,并且这时候客户端已经是处理好了的。那么只有一个可能,手机兼容性不够。你换个安卓手机试试。(PS:我试了 vivo跟华为。vivo 有两个手机不支持。华为目前使用的一款是支持的)、

    3. aid_list 是什么,怎么找呢?

    其实最简单的就是找你们客户端开发,他们有办法找到你的读卡器的 aid, 默认一般都是F222222222 。如果不是那就找一找你们的客户端开发,让他帮你找一下。

    好了,文章就到这里。后面大家若是在开发过程有疑问,欢迎提问、私信我。

  • 相关阅读:
    and-design-vue 3.2.20官方离线文档(中文)
    使用python实现一个文件搜索功能,类似于Everything功能
    Electron+Vue3整合-开发时整合-一条命令启动vue3和electron两个服务
    番外--命令操作
    一本通OJ 1376
    服务器监控软件(二 、具体安装篇)
    OSI模型与数据的封装
    (附源码)aap火车抢票 毕业设计 081827
    【LeetCode第366场周赛】8028. 执行操作使两个字符串相等 | 线性DP | 中等
    【仿真建模】第四课:AnyLogic入门基础课程 - 轨道交通仿真入门讲解
  • 原文地址:https://blog.csdn.net/qq_31281245/article/details/126937283