市场平台
作者 NativeScript.org
nativeScript-nfc
由 eddyverbruggen 编写 | v5.0.0
NFC 插件，用于您的 NativeScript 应用
npm i --save nativescript-nfc

NativeScript NFC 插件

NPM version Downloads Twitter Follow

安装

从命令提示符进入您的应用程序根目录并执行

NativeScript 版本 7+

ns plugin add nativescript-nfc

NativeScript 版本 6 及以下

tns plugin add [email protected]

iOS 设置

iOS 需要您为您的 App ID 启用 'NFC Tag Reading'，请在此处操作 here。

此外，将以下内容添加到您的 App_Resources/iOS/app.entitlements (注意名称！) 文件中

<key>com.apple.developer.nfc.readersession.formats</key>
<array>
	<string>NDEF</string>
</array>

示例应用 demo app 有这个

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.developer.nfc.readersession.formats</key>
	<array>
		<string>NDEF</string>
	</array>
</dict>
</plist>

Android 设置

⚠️ 从插件版本 4.0.0 开始，本节不再需要，但您必须运行 NativeScript 5.4.0 或更高版本。如果您使用的是较旧的 NativeScript，请坚持使用插件版本 < 4.0.0。

更新您的 App_Resources/Android/AndroidManifest.xml 文件中的 activity 条目

<activity
        android:name="com.tns.NativeScriptNfcActivity"
        android:label="@string/title_activity_kimera"
        android:configChanges="keyboardHidden|orientation|screenSize">

所以将 com.tns.NativeScriptActivity 替换为 com.tns.NativeScriptNfcActivity。

Webpack（同样，从插件版本 4.0.0 开始不再需要）

如果您正在使用 Webpack 打包您的应用程序，并且针对 Android，您需要在配置中添加一行。

  • 打开 webpack.config.js（它位于项目根目录中）。
  • 查找名为 appComponents 的数组，它可能包含类似 "tns-core-modules/ui/frame" 的内容。
  • 添加 resolve(__dirname, "node_modules/nativescript-nfc/nfc-activity.android.js") 如图所示。

示例应用（上面的截图）

想快速入门？查看 示例！

您可以通过在项目根目录中键入 npm run demo.ios.device 或 npm run demo.android 来运行示例应用程序。

这是在 iOS 上的实际效果!

API

可用

并非所有设备都有我们可点击的 NFC 芯片（在 iOS 上，您需要使用 Xcode 9+ 构建），所以请先检查一下

JavaScript
// require the plugin
var Nfc = require("nativescript-nfc").Nfc;

// instantiate the plugin
var nfc = new Nfc();

nfc.available().then(function (avail) {
  console.log(avail ? "Yes" : "No");
});
TypeScript
// require the plugin
import { Nfc } from "nativescript-nfc";

// instantiate the plugin
let nfc = new Nfc();

nfc.available().then(avail => {
  console.log(avail ? "Yes" : "No");
});

启用

设备可能具有 NFC 芯片，但需要打开 ✅ 才能供此插件使用。因此，如果 available 返回 true 且 enabled 返回 false，则应在设备设置中提示用户打开 NFC。

JavaScript
nfc.enabled().then(function (on) {
  console.log(on ? "Yes" : "No");
});
TypeScript
nfc.enabled().then(on => {
  console.log(on ? "Yes" : "No");
});

setOnNdefDiscoveredListener

您可能希望收到当发现 Ndef 标签时的通知。您可以传递一个回调函数，当这种情况发生时，该函数将被调用。

注意，这里不返回空白/已擦除的 NFC 标签，而是通过 setOnTagDiscoveredListener 返回。

查看 NfcNdefData 的定义 以了解回调函数返回的内容。

对于 iOS，您可以传递以下选项（请参阅下面的 TypeScript 示例）

  • stopAfterFirstRead: boolean（默认 false）：读取标签后不再继续扫描。
  • scanHint: string（默认 undefined）：在扫描 UI 中显示小提示。
JavaScript
nfc
  .setOnNdefDiscoveredListener(function (data) {
    // see the TypeScript example below
  })
  .then(function () {
    console.log("OnNdefDiscovered listener added");
  });
TypeScript
import { NfcNdefData } from "nativescript-nfc";

nfc
  .setOnNdefDiscoveredListener(
    (data: NfcNdefData) => {
      // data.message is an array of records, so:
      if (data.message) {
        for (let m in data.message) {
          let record = data.message[m];
          console.log(
            "Ndef discovered! Message record: " + record.payloadAsString
          );
        }
      }
    },
    {
      // iOS-specific options
      stopAfterFirstRead: true,
      scanHint: "Scan a tag, baby!"
    }
  )
  .then(() => {
    console.log("OnNdefDiscovered listener added");
  });

如果您想移除监听器，可以传递 null 而不是回调函数。

TypeScript
nfc.setOnNdefDiscoveredListener(null).then(() => {
  console.log("OnNdefDiscovered listener removed");
});

setOnTagDiscoveredListener（仅限 Android）

您可能希望收到当发现 NFC 标签时的通知。您可以传递一个回调函数，当这种情况发生时，该函数将被调用。

请注意，这里不返回 Ndef 标签（您可能之前已写入数据），而是通过 setOnNdefDiscoveredListener 返回。

查看 NfcTagData 的定义 以了解回调函数返回的内容。

JavaScript
nfc
  .setOnTagDiscoveredListener(function (data) {
    console.log("Discovered a tag with ID " + data.id);
  })
  .then(function () {
    console.log("OnTagDiscovered listener added");
  });
TypeScript
import { NfcTagData } from "nativescript-nfc";

nfc
  .setOnTagDiscoveredListener((data: NfcTagData) => {
    console.log("Discovered a tag with ID " + data.id);
  })
  .then(() => {
    console.log("OnTagDiscovered listener added");
  });

如果您想移除监听器，可以传递 null 而不是回调函数。

TypeScript
nfc.setOnTagDiscoveredListener(null).then(() => {
  console.log("OnTagDiscovered listener removed");
});

writeTag（仅限 Android）

您也可以使用此插件向标签写入数据。目前您可以写入纯文本或 Uri。如果扫描到标签，后者将在 Android 设备上启动浏览器（除非此时有处理 Ndef 标签的应用程序正在运行，例如具有此插件的应用程序 - 因此请关闭应用程序以测试此功能）。

请注意，您可以向 NFC 标签写入多个项目，因此输入是一个包含各种类型数组（目前支持 textRecord 和 uriRecord）的对象。有关详细信息，请参阅 TypeScript 定义，但以下示例应能帮助您开始

在 JavaScript 中写入 2 个 textRecords
nfc
  .writeTag({
    textRecords: [
      {
        id: [1],
        text: "Hello"
      },
      {
        id: [3, 7],
        text: "Goodbye"
      }
    ]
  })
  .then(
    function () {
      console.log("Wrote text records 'Hello' and 'Goodbye'");
    },
    function (err) {
      alert(err);
    }
  );
在 TypeScript 中写入 uriRecord
nfc
  .writeTag({
    uriRecords: [
      {
        id: [100],
        uri: "https://www.progress.com"
      }
    ]
  })
  .then(
    () => {
      console.log("Wrote Uri record 'https://www.progress.com");
    },
    err => {
      alert(err);
    }
  );

eraseTag（仅限 Android）

最后，如果您喜欢，可以清除标签上的所有内容。

JavaScript
nfc.eraseTag().then(function () {
  console.log("Tag erased");
});
TypeScript
nfc.eraseTag().then(() => {
  console.log("Tag erased");
});

技巧

向空标签写入

您首先需要使用 setOnTagDiscoveredListener “发现”它（见下文）。在您仍然“靠近”标签时，您可以调用 writeTag。

向非空标签写入

与上述相同，但发现是通过 setOnNdefDiscoveredListener 完成的。

未来工作

  • 两个启用 NFC 的设备之间的对等通信。
  • 除了 'text' 和 'uri' 之外，还支持写入其他类型。