微信小程序读取nfc获取Ndef写入的数据

微信小程序读取nfc获取Ndef写入的数据

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.新建一个utils工具类里面新建utils.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(':')}`
  return `${[year, month, day].map(formatNumber).join('/')}`
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  formatTime
}

 /**
 * 字节对象转字符串
 * @param {Object} arr
 */
export const byteToString = function (arr) {
  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
}

/**
 * 检验数据是否为空
 */
export const isEmpty = obj => {
  if (obj === '' || obj === null || obj === undefined) {
    return true
  } else if (obj.constructor === Array && obj.length === 0) {
    return true
  } else if (obj.constructor === Object && Object.keys(obj).length === 0) {
    return true
  } else {
    return false
  }
}

/**
 * 生成UUID
 */
export const generateUUID = () => {
  let d = new Date().getTime()
  let uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    // let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    let r = (d + Math.random() * 16) % 16 | 0
    d = Math.floor(d / 16)
    return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
  })
  return uuid
}

/**
 * 字符串转字节
 * @param {Object} str
 */
export const stringToArrayBuffer = function (str) {
  // 首先将字符串转为16进制
  let val = ''
  for (let i = 0; i < str.length; i++) {
    if (val === '') {
      val = str.charCodeAt(i).toString(16)
    } else {
      val += ',' + str.charCodeAt(i).toString(16)
    }
  }
  // 将16进制转化为ArrayBuffer
  return new Uint8Array(
    val.match(/[\da-f]{2}/gi).map(function (h) {
      return parseInt(h, 16)
    })
  ).buffer
}

/**
 * 移除空字符
 */
export const removeNullCharacter = str => {
  return str.replace(/\\u([0-9]|[a-fA-F])([0-9]|[a-fA-F])([0-9]|[a-fA-F])([0-9]|[a-fA-F])/g, '')
}

/**
 * 格式化空字符为空字符串
 */
export const formatNullCharacter = str => {
  if (!str) return ''
  return JSON.parse(removeNullCharacter(JSON.stringify(str)))
}

/**
 * 节流函数
 * fn是我们需要包装的事件回调, interval是时间间隔的阈值
 */
export const throttle = (fn, interval) => {
  // last为上一次触发回调的时间
  let last = 0

  interval = interval || 1000

  // 将throttle处理结果当作函数返回
  return function () {
    // 保留调用时的this上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments
    // 记录本次触发回调的时间
    let now = +new Date()

    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
      last = now
      fn.apply(context, args)
    }
  }
}

/**
 * 格式化得到aid值
 * @param {Object} buffer
 */
// export const ab2hex = function (buffer) {
//   var hexArr = Array.prototype.map.call(
//     new Uint8Array(buffer),

//     function (bit) {
//       return ('00' + bit.toString(16)).slice(-2);
//     }
//   );
//   return hexArr.join('');
// };

2.在add.json里面新建页面

代码如下（示例）：我建的是"pages/NFC/NFC",nfc.js

import { byteToString, isEmpty, formatNullCharacter } from '../../utils/util'
const app = getApp()

Page({
  NFCAdapter: null,
  aaa: [],
  data: {
    nfcInfo: {},
    msgTitle: '',
    typeText: { U: '网址', T: '文本' }
  },
  onShow: function () {
    this.onInit()
  },
  onInit() {
    const platform = app.globalData.platform
    if (platform == 'android') {
      this.NFCAdapter = wx.getNFCAdapter()
      this.NFClistener()
    } else {
      if (platform != 'devtools') {
        wx.showModal({
          title: '提示',
          content: '小程序NFC官方暂仅支持安卓设备',
          confirmColor: '#d93e4b',
          confirmText: '确定',
          showCancel: false
        })
      }

      this.setData({
        msgTitle: '小程序NFC官方暂仅支持安卓设备'
      })
    }
  },
  /**
   * 开始监听 NFC
   */
  NFClistener() {
    this.NFCAdapter.startDiscovery({
      success: () => {
        this.setData({
          msgTitle: '请将设备放入识别区NFC',
          msgContent: ''
        })
        // 监听 NFC 标签
        this.NFCAdapter.onDiscovered(this.discoverHandler)
      },
      fail: error => {
        this.setData({
          msgTitle: '请重试'
        })
        console.error(error)
      }
    })
  },
  /**
   * 监听回调
   */
  discoverHandler(callback) {
    console.log('==================== START ====================')
    // console.log('callback.messages[0].records[0]', callback.messages[0].records[0].payload)
    //获取ArrayBuffer 
    var buffer = callback.messages[0].records[0].payload;
    //获取Uint8Array 
    var dataview = new DataView(buffer);
    console.log('dataview', dataview)
    //获取Uint8Array数组
    var ints = new Uint8Array(buffer);
    console.log('ints', ints)
    //截取数组
    var shuzu = ints.slice(3);
    console.log('shuzu',shuzu)
    // 编译Uint8Array数组
    let unit8Arr = new Uint8Array(shuzu);
    let encodedString = String.fromCharCode.apply(null, unit8Arr),
    // 处理中文乱码
      decodedString = decodeURIComponent(escape((encodedString)));
      // 赋值
    this.setData({ aaa: decodedString })


  },

  /**
   * 注销 NFCAdapter
   */
  onHide() {
    this.closeNFC()
  },
  onUnload: function () {
    this.closeNFC()
  }
})

3.代码如下（示例）：nfc.wxml

<view class="page">
  <view class="ndef-box" bindtap="onClickNDEFContent">
    <view class="title">NDEF信息</view>
    <view class="content">
        <view class="label">类型描述：</view>
        <view>{{ aaa }}</view>
      </view>
  </view>
</view>

4.代码如下（示例）：nfc.wxss

.page {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f1f1f1;
  height: 100vh;
}

.msg-box {
  min-height: 300rpx;
  border-radius: 30rpx;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 30rpx;
}

.msg-box .text {
  text-align: center;
  line-height: 40rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.ndef-box {
  border-radius: 30rpx;
  overflow: hidden;
  min-height: 500rpx;
  padding-bottom: 10px;
  background-color: #fff;
}


.msg-box .title,
.ndef-box .title {
  font-weight: 700;
  text-align: center;
  line-height: 100rpx;
  border-bottom: 1px solid #f2f2f2;
}

.ndef-box .content {
  display: flex;
  padding: 10px;
  font-size: 28rpx;
  line-height: 36rpx;
}

.ndef-box .content .label {
  font-weight: 700;
  min-width: 90rpx;
}

.ndef-box .placeholder {
  line-height: 188rpx;
  text-align: center;
  color: #666;
  font-size: 28rpx;
}