vue 调用手机nfc

Question

目前BS考勤项目需要读取卡号，vue做的网页前端，想在前端通过NFC读取卡号信息，网上查到的都是uniapp相关的NFC文章，想问问vue能不能调用到手机的NFC功能？用那些模块？如果不行的话就得考虑vue转uniapp项目了，再问一下vue转uniapp项目麻烦吗？

Answer 1

在Vue中调用移动设备的NFC功能,可以这么做:

1. 使用Cordova / PhoneGap构建移动应用。这些框架可以在应用中使用设备原生功能,比如NFC。

2. 在Vue项目中安装cordova-plugin-nfc插件:

cordova plugin add cordova-plugin-nfc

1. 在mounted生命周期中注册NDEF_DISCOVERED事件监听:

mounted() {
  window.addEventListener('NDEF_DISCOVERED', this.onNdef, false);
}

1. 定义onNdef事件处理方法:

 methods: {
   onNdef(event) {
     // 处理读取到的NDEF消息事件
   }
 } 

1. 在beforeDestroy生命周期中删除事件监听:

beforeDestroy() {
  window.removeEventListener('NDEF_DISCOVERED', this.onNdef); 
}

1. 读取NFC标签:

methods: {
  readNfc() {
    cordova.plugins.NFCReader.read({
      // Android设置
      android: { 
        mimeType: 'text/plain'  // 只读取text/plain类型的NDEF消息
      },
      ios: {...}  // iOS设置
    }, this.onNdef, this.onError);
  }  
}

1. also可以注册其它NFC事件,如NFC_ENABLED,NDEF_WRITE_SUCCESS等。

这就是在Vue应用中调用NFC的基本过程。通过Cordova构建,在mounted中注册监听,在methods中定义读写NFC的方法。并在beforeDestroy中删除监听,防止内存泄漏。