HTML5转APP后NFC是否可用取决于打包方案和运行环境：纯Web页面无法调用，需通过H5+、Cordova等原生容器桥接；Web NFC API（NDEFReader）仅Chrome Android 91+有限支持，iOS完全不支持；正确路径是使用原生插件（如plus.nfc），并配置权限与前台调度机制。
HTML5转APP后NFC是否可用，取决于打包方案和运行环境
纯Web页面（如用WebView加载的H5）无法直接调用NFC，因为浏览器本身不开放底层硬件访问权限；但通过原生容器打包（如HBuilderX的H5+、Cordova、Capacitor）可桥接系统NFC能力。关键不是“HTML5能不能”，而是你用的打包框架是否集成了NFC原生插件，并且目标设备/系统版本支持。
NDEFReader 在H5+或Cordova中基本无效，别白费力气调用
Web NFC API（NDEFReader）目前仅在Chrome for Android 91+（需HTTPS+用户手势触发）有限支持，iOS Safari完全不支持，桌面端几乎全军覆没。HBuilderX的H5+ runtime、Cordova等环境默认不启用该API——即使检测到 'NDEFReader' in window 为 true，调用 scan() 也会静默失败或抛 SecurityError。
- 正确路径是：使用平台提供的原生NFC插件（如H5+的
plus.nfc、Cordova的phonegap-nfc） - 必须在
plusready后初始化，不能在页面DOMContentLoaded时就尝试 - Android需在
AndroidManifest.xml中声明android.permission.NFC权限
HBuilderX中实现“后台扫描唤醒APP并传入标签ID”的真实写法
这是企业级扫码场景刚需，但官方文档藏得深。核心是利用Android的前台调度（Foreground Dispatch）机制，而非Web API。
document.addEventListener('plusready', function() {
const nfc = plus.nfc;
if (!nfc) return;
// 注册NFC监听（只对TECH_DISCOVERED事件有效）
nfc.addEventListener('tag', function(e) {
const tagId = Array.from(e.tag.id).map(b => b.toString(16).padStart(2, '0')).join('');
// 保存到本地，供resume后读取
plus.storage.setItem('lastNfcTagId', tagId);
// 若APP在前台，直接更新UI
if (plus.runtime.isApplicationRunning()) {
document.getElementById('nfc-id').textContent = tagId;
}
});
// resume时检查是否有待处理的NFC数据
document.addEventListener('resume', function() {
const savedId = plus.storage.getItem('lastNfcTagId');
if (savedId) {
document.getElementById('nfc-id').textContent = savedId;
plus.storage.removeItem('lastNfcTagId');
}
});
});
⚠️ 注意：e.tag.id 是 ArrayBuffer，必须手动转为十六进制字符串；H5+不提供自动解析NDEF内容的能力，如需读文本记录，得自己解析NDEF格式或换用更重的插件。
立即学习“前端免费学习笔记（深入）”；
为什么iOS上几乎做不了？不是技术问题，是苹果策略封锁
iOS从系统层禁止第三方App在后台监听NFC标签（除Apple Pay和特定企业授权外），连原生Swift代码都受限，更别说H5转APP了。即便你用Capacitor + @capacitor-community/nfc，在iOS上也只能做到“前台扫码”，且需在 Info.plist 中配置 NFCReaderUsageDescription 并通过App Store审核——而HBuilderX打包的H5+ App根本过不了这关。
所以如果你的业务强依赖iOS后台NFC唤醒，这条路实际走不通，得考虑改用原生开发或服务端扫码替代方案。
