DaShangDao/daShangDao_scanBook
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

扫码页:改.vue页面+本地quagga2库,无蒙版实时扫码

Browse Source
This commit is contained in:
97694732@qq.com 2026-06-04 16:11:05 +08:00
parent 8ca9ac9ff9
commit 6b4e082cd1
4 changed files with 51 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
hybrid/html/scanner.html
View File

@ -20,60 +20,32 @@
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
} }
/* 隐藏 quagga 的取景框 canvas */ #scanner-container canvas { display: none !important; }
#scanner-container canvas {
display: none !important;
}
/* 关闭按钮 */
.close-btn { .close-btn {
position: fixed; position: fixed; top: 30px; left: 15px;
top: 60rpx; width: 40px; height: 40px;
left: 30rpx;
width: 60rpx;
height: 60rpx;
border-radius: 50%; border-radius: 50%;
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
display: flex; display: flex; align-items: center; justify-content: center;
align-items: center;
justify-content: center;
z-index: 9999; z-index: 9999;
color: #fff; color: #fff; font-size: 22px;
font-size: 36rpx;
} }
/* tip */
.tip { .tip {
position: fixed; position: fixed; bottom: 60px; left: 0; right: 0;
bottom: 120rpx; text-align: center; z-index: 9999;
left: 0;
right: 0;
text-align: center;
z-index: 9999;
} }
.tip-text { .tip-text {
display: inline-block; display: inline-block;
color: #fff; color: #fff; font-size: 14px;
font-size: 28rpx;
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);
padding: 12rpx 30rpx; padding: 6px 16px; border-radius: 20px;
border-radius: 40rpx;
} }
/* 加载/错误提示 */
.loading { .loading {
position: fixed; position: fixed; top: 50%; left: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #fff; color: #fff; font-size: 14px; z-index: 9999;
font-size: 28rpx;
z-index: 9999;
text-align: center; text-align: center;
} }
/* 适配 rpx 单位：假设 750rpx = 屏幕宽 */
@media (min-width: 400px) {
.close-btn { width: 40px; height: 40px; font-size: 22px; top: 40px; left: 20px; }
.tip-text { font-size: 16px; padding: 8px 20px; border-radius: 28px; }
.tip { bottom: 80px; }
}
</style> </style>
</head> </head>
<body> <body>
@ -82,17 +54,24 @@
<div class="tip"><span class="tip-text" id="tipText">对准条码自动识别</span></div> <div class="tip"><span class="tip-text" id="tipText">对准条码自动识别</span></div>
<div class="loading" id="loadingText">正在启动摄像头...</div> <div class="loading" id="loadingText">正在启动摄像头...</div>
<script src="https://cdn.jsdelivr.net/npm/quagga2/dist/quagga.min.js"></script> <script src="../js/quagga.min.js"></script>
<script> <script>
var detected = false; var detected = false;
var closeBtn = document.getElementById('closeBtn');
var loadingText = document.getElementById('loadingText');
var tipText = document.getElementById('tipText'); var tipText = document.getElementById('tipText');
var loadingText = document.getElementById('loadingText');
function sendToApp(action, code) { function sendToApp(action, code) {
// UniApp WebView postMessage
if (window.uni && window.uni.postMessage) { if (window.uni && window.uni.postMessage) {
window.uni.postMessage({ data: { action: action, code: code || '' } }); window.uni.postMessage({ data: { action: action, code: code || '' } });
} }
// fallback: 5+ webview API
if (window.plus && window.plus.webview) {
var wv = plus.webview.currentWebview();
if (wv && wv.postMessageToParent) {
wv.postMessageToParent({ action: action, code: code || '' });
}
}
} }
function closeCamera() { function closeCamera() {
@ -100,50 +79,46 @@
sendToApp('close'); sendToApp('close');
} }
closeBtn.addEventListener('click', closeCamera); document.getElementById('closeBtn').addEventListener('click', closeCamera);
function startQuagga() { function startQuagga() {
if (typeof Quagga === 'undefined') {
loadingText.innerText = '加载解码库失败';
return;
}
Quagga.init({ Quagga.init({
inputStream: { inputStream: {
name: 'Live', name: 'Live',
type: 'LiveStream', type: 'LiveStream',
target: document.querySelector('#scanner-container'), target: document.querySelector('#scanner-container'),
constraints: { constraints: {
width: { ideal: 640 }, width: 640, height: 480, facingMode: 'environment'
height: { ideal: 480 },
facingMode: 'environment'
} }
}, },
decoder: { decoder: {
readers: [ readers: ['ean_reader', 'ean_8_reader', 'upc_reader', 'code_128_reader', 'code_39_reader'],
'ean_reader',
'ean_8_reader',
'upc_reader',
'code_128_reader',
'code_39_reader'
],
debug: false debug: false
}, },
locator: { locator: { halfSample: false, patchSize: 'large' },
halfSample: false,
patchSize: 'large'
},
numOfWorkers: 2, numOfWorkers: 2,
frequency: 5 frequency: 5
}, function(err) { }, function(err) {
if (err) { if (err) {
loadingText.innerText = '摄像头启动失败，请检查权限'; loadingText.innerText = '摄像头启动失败，请检查权限';
console.error('Quagga init error:', err); console.error('Quagga error:', err);
setTimeout(function() {
loadingText.innerText = '点击返回';
closeBtn.addEventListener('click', function() {
sendToApp('close');
});
}, 2000);
return; return;
} }
loadingText.style.display = 'none'; loadingText.style.display = 'none';
Quagga.start(); Quagga.start();
// 启动成功后定期检查有没有画面
setTimeout(function() {
var video = document.querySelector('#scanner-container video');
if (video && video.videoWidth > 0) {
console.log('Camera OK:', video.videoWidth, 'x', video.videoHeight);
} else {
console.warn('Camera may not have started');
}
}, 2000);
}); });
} }
@ -151,48 +126,23 @@
if (detected) return; if (detected) return;
var code = result && result.codeResult && result.codeResult.code; var code = result && result.codeResult && result.codeResult.code;
if (!code) return; if (!code) return;
// ISBN 通常是 13 位数字，但也接受其他格式
code = code.replace(/\D/g, ''); code = code.replace(/\D/g, '');
if (code.length === 13 || code.length === 12 || code.length === 10) { if (code.length >= 10 && code.length <= 14) {
detected = true; detected = true;
tipText.innerText = '识别成功'; tipText.innerText = '识别成功';
Quagga.stop(); try { Quagga.stop(); } catch(e) {}
setTimeout(function() { setTimeout(function() {
sendToApp('scanned', code); sendToApp('scanned', code);
}, 300); }, 300);
} }
}); });
// 等待 UniApp 桥接就绪后启动 // 启动
function waitForBridge() {
if (window.uni && window.uni.postMessage) {
startQuagga();
} else {
document.addEventListener('UniAppJSBridgeReady', function() {
startQuagga();
});
// 降级：2秒后直接启动
setTimeout(function() {
if (typeof Quagga !== 'undefined') {
startQuagga();
}
}, 2000);
}
}
// 页面加载完成后启动
if (document.readyState === 'complete') { if (document.readyState === 'complete') {
waitForBridge(); startQuagga();
} else { } else {
window.addEventListener('load', waitForBridge); window.addEventListener('load', startQuagga);
} }
// 页面不可见时停止摄像头节省资源（可选）
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
try { Quagga.stop(); } catch(e) {}
}
});
</script> </script>
</body> </body>
</html> </html>

6
hybrid/js/quagga.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
pages.json
View File

@ -58,10 +58,7 @@
"path": "pages/upload/scan-isbn", "path": "pages/upload/scan-isbn",
"style": { "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"navigationStyle": "custom", "navigationStyle": "custom"
"app-plus": {
"render": "native"
}
} }
} }
], ],

1
pages/upload/scan-isbn.nvue → pages/upload/scan-isbn.vue
View File

@ -15,7 +15,6 @@
if (!data) return if (!data) return
const action = data.action || '' const action = data.action || ''
if (action === 'scanned' && data.code) { if (action === 'scanned' && data.code) {
// 发送结果回上传页面
uni.$emit('scan-isbn-result', data.code) uni.$emit('scan-isbn-result', data.code)
uni.navigateBack() uni.navigateBack()
} else if (action === 'close') { } else if (action === 'close') {