微信小程序接入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
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
/**
* 生成指定长度随机数
*/
function genRandom(n) {
let a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //生成的随机数的集合
let res = [];
for (let i = 0; i < n; i++) {
let index = parseInt(Math.random() * (a.length)); //生成一个的随机索引，索引值的范围随数组a的长度而变化
res.push(a[index]);
a.splice(index, 1) //已选用的数，从数组a中移除， 实现去重复
}
return res.join('');
}
/**
* 字符串转换为时间
* @param {String} src 字符串
*/
function strToDate(dateObj){
dateObj = dateObj.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/(-)/g, '/')
dateObj = dateObj.slice(0, dateObj.indexOf("."))
return new Date(dateObj)
}
function isFunctinMethod(name) {
if (name != undefined && typeof name === 'function') {
return true
}
return false
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
// ArrayBuffer转16进度字符串
function ab2hex(buffer) {
var hexArr = Array.prototype.map.call(
new Uint8Array(buffer),
function (bit) {
return ('00' + bit.toString(16)).slice(-2)
}
)
return hexArr.join('');
}
//十六进制字符串转字节数组
function hex2Bytes(str) {
var pos = 0;
var len = str.length;
if (len % 2 != 0) {
return null;
}
len /= 2;
var hexA = new Array();
for (var i = 0; i < len; i++) {
var s = str.substr(pos, 2);
var v = parseInt(s, 16);
hexA.push(v);
pos += 2;
}
return hexA;
}
function hex2ArrayBuffer(hex){
var pos = 0;
var len = hex.length;
if (len % 2 != 0) {
return null;
}
len /= 2;
var buffer = new ArrayBuffer(len)
var dataview=new DataView(buffer)
for (var i = 0; i < len; i++) {
var s = hex.substr(pos, 2);
var v = parseInt(s, 16);
dataview.setInt16(i,v)
pos += 2;
}
return buffer
}
/**
* string转16进制
*/
function stringToHex(str) {
var val = "";
for (var i = 0; i < str.length; i++) {
if (val == "")
val = str.charCodeAt(i).toString(16);
else
val += str.charCodeAt(i).toString(16);
}
return val;
}
/**
* 16进制转string
*/
function hexCharCodeToStr(hexCharCodeStr) {
var trimedStr = hexCharCodeStr.trim();
var rawStr =
trimedStr.substr(0, 2).toLowerCase() === "0x"
?
trimedStr.substr(2)
:
trimedStr;
var len = rawStr.length;
if (len % 2 !== 0) {
alert("Illegal Format ASCII Code!");
return "";
}
var curCharCode;
var resultStr = [];
for (var i = 0; i < len; i = i + 2) {
curCharCode = parseInt(rawStr.substr(i, 2), 16); // ASCII Code Value
resultStr.push(String.fromCharCode(curCharCode));
}
return resultStr.join("");
}
function pad(num, n) {
var len = num.toString().length;
while (len < n) {
num = "0" + num;
len++;
}
return num;
}
function strToHexCharCode(str) {
if (str === "")
return "";
var hexCharCode = [];
hexCharCode.push("0x");
for (var i = 0; i < str.length; i++) {
hexCharCode.push((str.charCodeAt(i)).toString(16));
}
return hexCharCode.join("");
}
/**
* string转byte数组
*/
function stringToByteArray(str) {
var bytes = new Array();
var len, c;
len = str.length;
for (var i = 0; i < len; i++) {
c = str.charCodeAt(i);
if (c >= 0x010000 && c <= 0x10FFFF) {
bytes.push(((c >> 18) & 0x07) | 0xF0);
bytes.push(((c >> 12) & 0x3F) | 0x80);
bytes.push(((c >> 6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if (c >= 0x000800 && c <= 0x00FFFF) {
bytes.push(((c >> 12) & 0x0F) | 0xE0);
bytes.push(((c >> 6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if (c >= 0x000080 && c <= 0x0007FF) {
bytes.push(((c >> 6) & 0x1F) | 0xC0);
bytes.push((c & 0x3F) | 0x80);
} else {
bytes.push(c & 0xFF);
}
}
return bytes;
}
/**
* byte数组转string
*/
function byteToString(bytearr) {
if (typeof arr === 'string') {
return arr;
}
var str = '',
_arr = arr;
for (var i = 0; i < _arr.length; i++) {
var one = _arr[i].toString(2),
v = one.match(/^1+?(?=0)/);
if (v && one.length == 8) {
var bytesLength = v[0].length;
var store = _arr[i].toString(2).slice(7 - bytesLength);
for (var st = 1; st < bytesLength; st++) {
store += _arr[st + i].toString(2).slice(2);
}
str += String.fromCharCode(parseInt(store, 2));
i += bytesLength - 1;
} else {
str += String.fromCharCode(_arr[i]);
}
}
return str;
}
/**
* 二进制转10
*/
function bariny2Ten(byte){
return parseInt(byte, 2)
}
function bariny2Hex(a){
return parseInt(a, 16)
}
/**
* 10/16进制转2进制
*/
function ten2Bariny(ten){
return ten.toString(2)
}
function str2Hex(str){
return parseInt(str, 10).toString(16)
}
/**
* 16进制转2进制
*/
function hex2bariny(hex){
return parseInt(hex, 16).toString(2)
}
module.exports = {
formatTime: formatTime,
isFunctinMethod: isFunctinMethod,
ab2hex: ab2hex,
hex2Bytes: hex2Bytes,
stringToByteArray: stringToByteArray,
byteToString: byteToString,
hex2ArrayBuffer: hex2ArrayBuffer,
bariny2Ten: bariny2Ten,
bariny2Hex: bariny2Hex,
ten2Bariny: ten2Bariny,
str2Hex: str2Hex,
hex2bariny: hex2bariny,
genRandom: genRandom,
stringToHex: stringToHex,
hexToString: hexCharCodeToStr,
pad: pad
}
它里面包括了 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 。如果不是那就找一找你们的客户端开发，让他帮你找一下。
好了，文章就到这里。后面大家若是在开发过程有疑问，欢迎提问、私信我。