从0到1：Ant Design Vue Pro实现近场通信(NFC)功能的完整指南
项目地址: https://gitcode.com/gh_mirrors/ant/ant-design-vue-pro 你是否想为企业级应用快速集成NFC（近场通信）功能？在移动支付、身份验证、设备互联等场景中，NFC技术正发挥着越来越重要的作用。本文将以Ant Design Vue Pro为基础，带你从零构建一个支持NFC读写的企业级应用模块，无需深入底层硬件交互，只需通过组件化开发即可实现专业级NFC功能。
项目环境准备
在开始开发前，请确保你的开发环境满足以下要求：
- Node.js 14+ 环境
- 已安装Ant Design Vue Pro项目依赖
- 支持Web NFC API的浏览器（Chrome 89+、Edge 89+）
首先克隆项目仓库：
git clone https://gitcode.com/gh_mirrors/ant/ant-design-vue-pro
cd ant-design-vue-pro
npm install
项目的核心配置文件位于vue.config.js，如需自定义构建配置可在此文件中进行修改。应用入口文件为src/main.js，我们将在后续步骤中在此注册NFC相关组件。
NFC功能模块设计
模块目录结构
在Ant Design Vue Pro项目中，我们建议将NFC功能模块放置在src/views/other目录下，遵循项目现有的代码组织规范：
src/views/other/
├── NfcReader.vue # NFC读取组件
├── NfcWriter.vue # NFC写入组件
├── NfcHistory.vue # NFC操作历史记录
└── NfcSettings.vue # NFC功能设置
可通过查看src/views/other目录了解现有功能模块的实现方式，保持一致的代码风格。
状态管理设计
NFC功能需要在多个组件间共享状态，我们可以扩展项目现有的Vuex存储结构。在src/store/modules/app.js中添加NFC相关状态：
// 在app.js中添加
const state = {
// 现有状态...
nfcStatus: 'idle', // idle, scanning, connected, error
nfcData: null,
nfcHistory: []
}
const mutations = {
// 现有mutations...
SET_NFC_STATUS(state, status) {
state.nfcStatus = status
},
SET_NFC_DATA(state, data) {
state.nfcData = data
},
ADD_NFC_HISTORY(state, record) {
state.nfcHistory.unshift({
...record,
timestamp: new Date().toISOString()
})
// 限制历史记录数量
if (state.nfcHistory.length > 100) {
state.nfcHistory.pop()
}
}
}
NFC核心功能实现
Web NFC API封装
创建NFC服务工具类src/utils/nfcUtil.js，封装Web NFC API的核心操作：
export default {
isSupported() {
return 'NDEFReader' in window
},
async scanNdefMessage(callback) {
if (!this.isSupported()) {
throw new Error('当前浏览器不支持Web NFC API')
}
const reader = new NDEFReader()
await reader.scan()
reader.onreading = event => {
const message = event.message
callback({
success: true,
data: message.records.map(record => ({
type: record.recordType,
data: new TextDecoder().decode(record.data),
encoding: record.encoding || 'unknown'
}))
})
}
reader.onerror = error => {
callback({
success: false,
error: error.message
})
}
return reader
},
async writeNdefMessage(message) {
if (!this.isSupported()) {
throw new Error('当前浏览器不支持Web NFC API')
}
const writer = new NDEFWriter()
await writer.write(message)
return true
}
}
NFC读取组件开发
创建NFC读取组件src/views/other/NfcReader.vue，使用Ant Design Vue组件库构建UI界面：
<template>
<div class="nfc-reader-container">
<a-card title="NFC标签读取" :bordered="false">
<div class="status-indicator">
<a-tag :color="statusColor">{{ statusText }}</a-tag>
</div>
<div class="reader-area">
<a-spin :spinning="scanning" size="large">
<div class="reader-prompt">
将NFC标签靠近设备感应区域
</div>
<div class="reader-icon">
<a-icon type="sync" spin :style="{ fontSize: '48px', color: '#1890ff' }" />
</div>
</a-spin>
</div>
<a-button
type="primary"
@click="toggleScan"
:loading="scanning"
style="margin-top: 20px"
>
{{ scanning ? '停止扫描' : '开始扫描' }}
</a-button>
<a-divider>读取结果</a-divider>
<a-card v-if="nfcData" :bordered="false">
<a-list>
<a-list-item v-for="(record, index) in nfcData" :key="index">
<a-list-item-meta
title="数据记录 #{{ index + 1 }}"
description="类型: {{ record.type }}"
/>
<div>{{ record.data }}</div>
</a-list-item>
</a-list>
</a-card>
<a-empty v-else description="暂无NFC数据"></a-empty>
</a-card>
</div>
</template>
<script>
import nfcUtil from '@/utils/nfcUtil'
import { mapState, mapMutations } from 'vuex'
export default {
name: 'NfcReader',
data() {
return {
scanning: false,
reader: null
}
},
computed: {
...mapState({
nfcStatus: state => state.app.nfcStatus,
nfcData: state => state.app.nfcData
}),
statusText() {
const statusMap = {
idle: '未激活',
scanning: '扫描中',
connected: '已连接',
error: '错误'
}
return statusMap[this.nfcStatus] || '未知状态'
},
statusColor() {
const colorMap = {
idle: 'default',
scanning: 'processing',
connected: 'success',
error: 'error'
}
return colorMap[this.nfcStatus] || 'default'
}
},
methods: {
...mapMutations({
setNfcStatus: 'app/SET_NFC_STATUS',
setNfcData: 'app/SET_NFC_DATA',
addNfcHistory: 'app/ADD_NFC_HISTORY'
}),
async toggleScan() {
if (this.scanning) {
await this.stopScan()
} else {
await this.startScan()
}
},
async startScan() {
if (!nfcUtil.isSupported()) {
this.$notification.error({
message: '浏览器不支持',
description: '请使用Chrome 89+或Edge 89+浏览器以支持NFC功能'
})
return
}
try {
this.scanning = true
this.setNfcStatus('scanning')
this.reader = await nfcUtil.scanNdefMessage(result => {
if (result.success) {
this.setNfcStatus('connected')
this.setNfcData(result.data)
this.addNfcHistory({
type: 'read',
action: '读取标签',
status: 'success',
data: result.data
})
this.$notification.success({
message: '读取成功',
description: '已成功读取NFC标签数据'
})
// 自动停止扫描
setTimeout(() => {
this.stopScan()
}, 3000)
} else {
this.setNfcStatus('error')
this.$notification.error({
message: '读取失败',
description: result.error
})
}
})
} catch (error) {
this.setNfcStatus('error')
this.$notification.error({
message: '初始化失败',
description: error.message
})
this.scanning = false
}
},
async stopScan() {
if (this.reader) {
await this.reader.abort()
this.reader = null
}
this.scanning = false
this.setNfcStatus('idle')
}
},
beforeDestroy() {
if (this.scanning) {
this.stopScan()
}
}
}
</script>
<style scoped>
.nfc-reader-container {
padding: 20px;
}
.status-indicator {
margin-bottom: 20px;
}
.reader-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
border: 2px dashed #e8e8e8;
border-radius: 8px;
margin: 20px 0;
}
.reader-prompt {
font-size: 16px;
color: #666;
margin-bottom: 16px;
}
.reader-icon {
margin-top: 16px;
}
</style>
路由配置
修改路由配置文件src/config/router.config.js，添加NFC功能模块的路由信息：
{
path: '/other',
name: 'other',
component: RouteView,
meta: { title: '其他组件', icon: 'setting', permission: ['dashboard'] },
children: [
// 现有路由...
{
path: 'nfc-reader',
name: 'NfcReader',
component: () => import('@/views/other/NfcReader'),
meta: { title: 'NFC读取', keepAlive: true, permission: ['nfc'] }
},
{
path: 'nfc-writer',
name: 'NfcWriter',
component: () => import('@/views/other/NfcWriter'),
meta: { title: 'NFC写入', keepAlive: true, permission: ['nfc'] }
},
{
path: 'nfc-history',
name: 'NfcHistory',
component: () => import('@/views/other/NfcHistory'),
meta: { title: 'NFC历史', keepAlive: true, permission: ['nfc'] }
}
]
}
功能集成与测试
权限配置
在src/config/defaultSettings.js中添加NFC功能权限配置：
export default {
// 现有配置...
permissions: {
// 现有权限...
nfc: {
label: 'NFC功能',
description: '允许使用NFC读写功能'
}
}
}
测试界面展示
集成完成后，NFC读取组件的界面效果如下所示（可参考项目中src/views/other/TableInnerEditList.vue的界面布局）：
界面主要包含以下元素：
- 状态指示器：显示当前NFC功能状态
- 扫描区域：引导用户放置NFC标签
- 操作按钮：控制扫描过程的开始与停止
- 结果展示区：显示读取到的NFC数据
实际应用场景
会议签到系统
利用NFC功能实现企业会议签到，参会人员只需使用手机触碰NFC读卡器即可完成签到，签到记录将实时同步到系统中。可结合项目中的表格组件src/views/list/TableList.vue实现签到数据的管理与展示。
设备身份验证
在src/views/account/settings/Security.vue页面中集成NFC身份验证功能，用户可将NFC标签作为二次验证方式，提升账户安全性。
产品信息查询
结合项目中的搜索功能src/views/list/search/，通过NFC标签快速查询产品信息，用户触碰产品上的NFC标签即可显示详细信息。
总结与注意事项
浏览器兼容性
Web NFC API目前仅在部分浏览器中支持，需在应用中做好兼容性检测和降级处理。可参考src/utils/request.js中的错误处理方式，为不支持NFC的浏览器提供友好提示。
安全考虑
在处理NFC数据时，需注意以下安全事项：
- 验证NFC数据来源的合法性
- 对敏感数据进行加密处理
- 限制NFC功能的访问权限
未来扩展
NFC功能模块可进一步扩展以下功能：
- 支持更多NFC数据格式
- 添加NFC数据加密功能
- 实现NFC标签的格式化功能
- 集成NFC标签的批量管理功能
通过本文介绍的方法，你可以在Ant Design Vue Pro项目中快速集成NFC功能，为企业级应用添加近场通信能力。如有任何问题，可参考项目官方文档README.md或查阅src/core/permission/permission.js了解权限控制相关实现。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
