前言:手机在打开小程序的情况下识别NFC,实现碰一碰NFC,拿到NFC中的参数

难点:文档真的恶心啊

废话不多说直接上代码,写完比想象中的简单,也是最简单的,文档里还有很多玩法,比如NFC直接唤起小程序等等,又比这个麻烦

我的项目是uni-app,所以写法就是vue的

我在nfc中写入的是{id: 123, sort: 9}        这里是重点

onShow() {
  // 我在nfc中写入的是{id: 123, sort: 9}
  const nfc = uni.getNFCAdapter();
  this.nfc = nfc;
  nfc.onDiscovered(this.discoverHandler);
  nfc.startDiscovery({
    success(res) {
      console.log('nfc启动成功', res);
    },
    fail(err) {
      console.log('nfc启动失败', err);
    },
  });
},
methods: {
  discoverHandler(res) {
    console.log('res0:', res);
    if (res.techs.includes(this.nfc.tech.ndef)) {
      let Ndef = this.nfc.getNdef();
      console.log(Ndef);
      // 这层是死的,直接就能读到,仅限于简单的需求
      let payload = res.messages[0].records[0].payload;
      // 这里需要  pnpm add TextDecoder 小程序中没这个控件,但开发者工具有,很恶心
      let text = new TextDecoder().decode(payload);
      // text识别出来是"'en{id: 123, sort: 9}'",结构比较恶心,建议真机看log
      // 我也不知道nfc这里怎么插入了一个en,费解,不过管他呢
      if (text.includes('en')) {
        // 这里得一步一步调试,如果你和我格式一样那这个方法直接拿来用就完了
        let obj = this.convertStringToObjectManual(text);
        console.log(obj); // 这里解析出来就是{id: 123, sort: 9}
        // 接着写你的业务逻辑就行了............
      }
      return;
    }
  },
  convertStringToObjectManual(str) {
    const startIndex = str.indexOf('{');
    const endIndex = str.lastIndexOf('}');
    if (startIndex !== -1 && endIndex !== -1) {
      const content = str.slice(startIndex + 1, endIndex);
      const pairs = content.split(',');
      const result = {};
      pairs.forEach((pair) => {
        const [key, value] = pair.split(':').map((item) => item.trim());
        if (key && value) {
          result[key] = parseInt(value) || value.replace(/['"]/g, '');
        }
      });
      return result;
    }
    return null;
  },
}

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐