uniapp在app端扫码核销（支持自定义内容）
效果图如下本文将详细介绍如何使用 nvue Barcode 模块实现一个完整的自定义扫码页面。为什么选择 nvue因为uniapp中这个组件的限制配置首先需要在 manifest.json 中启用 Barcode 模块{ app-plus: { modules: { Barcode: {}, Camera: {} }, distribute: { android: { permissions: [ uses-permission android:name\android.permission.CAMERA\/ ] } } } }2. pages.json 配置在 pages.json 中注册页面并隐藏导航栏 { path: pages/Shops/code, style: { navigationBarTitleText: 扫一扫, app-plus: { titleNView: false } } }页面完整代码template view classpage !-- 状态栏占位 -- view classstatus-bar :style{ height: statusBarHeight px }/view !-- 自定义导航栏 -- view classnav-bar view classnav-back clickgoBack uni-icons typeleft size18 color#333333/uni-icons /view text classnav-title订单核销/text view classnav-placeholder/view /view !-- 扫码区域容器 -- view classscan-container !-- Barcode 组件 -- barcode refbarcode classbarcode :autostartfalse markedonMarked erroronError /barcode !-- 底部提示 -- view classbottom-tip clickgoToManualInput text classtip-text无法识别试试/text text classtip-link手动输入核销码/text /view /view /view /templateJs逻辑代码export default { data() { return { statusBarHeight: 0, isScanning: false // 防止重复扫码 } }, created() { // 获取状态栏高度适配不同机型 const systemInfo uni.getSystemInfoSync(); this.statusBarHeight systemInfo.statusBarHeight || 0; }, onReady() { // 页面首次加载时启动扫码 this.startScan(); }, onShow() { // 页面显示时重新启动扫码处理返回场景 this.isScanning false; this.startScan(); }, methods: { // 启动扫码 startScan() { this.$nextTick(() { try { const barcode this.$refs.barcode; if (barcode barcode.start) { barcode.start(); console.log(扫码已启动); } } catch (e) { console.log(启动扫码失败, e); } }); }, // 扫码成功回调 onMarked(e) { // 防止重复处理 if (this.isScanning) { return; } this.isScanning true; const result e.detail.code; console.log(扫码结果, result); // 处理扫码结果 this.handleScanResult(result); // 延迟重置标志 setTimeout(() { this.isScanning false; }, 2000); }, // 扫码失败回调 onError(e) { console.log(扫码错误, e); uni.showToast({ title: 扫码失败, icon: none }); }, // 处理扫码结果 handleScanResult(code) { // 跳转到处理页面或调用接口 uni.navigateTo({ url: /pages/result?code code }); }, // 手动输入 goToManualInput() { uni.navigateTo({ url: /pages/manualInput }); }, // 返回 goBack() { uni.navigateBack({}); } } }关于css就不公布了大家可以自己定义。遇到的一些问题1.页面黑屏考虑Barcode 组件未正确启动// 确保在 $nextTick 中启动 this.$nextTick(() { const barcode this.$refs.barcode; if (barcode barcode.start) { barcode.start(); } });2.扫码后卡死扫码成功后组件未停止继续占用摄像头- 使用 isScanning 标志防止重复处理- 在 onShow 中重置状态3.返回后无法扫码autostart 只在首次加载时生效onShow() {this.startScan(); // 手动重启}
)
)
)
