uniapp模拟卡
uniapp模拟卡实现方法
在uniapp中实现模拟卡功能通常涉及使用NFC(近场通信)技术或自定义UI组件模拟卡片效果。以下是几种常见方法:
使用NFC技术(需真机支持) 确保设备支持NFC功能,在manifest.json中配置NFC权限:
"permissions": {
"android": ["android.permission.NFC"],
"ios": []
}
通过uni对象调用NFC API:

uni.startHCE({
aid_list: ['A0000000031010'],
success: res => {
console.log('HCE服务启动成功');
}
});
自定义UI组件模拟卡片 通过视图层构建卡片外观,结合动画效果:
<view class="card-simulator" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag">
<image src="/static/card-bg.png" mode="aspectFill"></image>
</view>
data() {
return {
startX: 0,
currentX: 0
}
},
methods: {
startDrag(e) {
this.startX = e.touches[0].clientX;
},
onDrag(e) {
this.currentX = e.touches[0].clientX - this.startX;
}
}
HCE主机卡模拟(Android特有) 在原生层实现HCE服务后与uniapp通信:

// Android原生代码示例
public class HceService extends HostApduService {
@Override
public byte[] processCommandApdu(byte[] apdu, Bundle extras) {
// 处理APDU指令
return new byte[]{(byte)0x90, (byte)0x00};
}
}
注意事项
- iOS系统对NFC卡模拟有严格限制,仅支持读取模式
- 真机调试时必须使用支持HCE的Android设备(API 19+)
- 涉及支付等敏感功能需通过微信/支付宝等官方SDK实现
- 自定义组件方案无法实现真正的NFC通信,仅适用于视觉演示
调试技巧
在HBuilderX中开启NFC调试日志:
uni.onHCEMessage(res => {
console.log('收到HCE消息:', res);
});
使用模拟数据测试UI组件:
mockData() {
return {
cardNumber: '•••• •••• •••• 1234',
expiry: '12/24',
holderName: 'UNIAPP USER'
}
}
以上方法可根据实际需求选择组合使用,NFC相关功能需发布到正式环境才能完整测试。






