HTML项目打包APK：二维码扫码功能实现
在HTML项目中，可以使用 html5-qrcode 调用手机摄像头并识别二维码。完成页面代码后，再通过HTML一键打包APK工具勾选相机权限，即可生成支持扫码的安卓APP。
如果你不了解HTML打包APK工具, 想要进一步了解, 可以查看官网:
创建扫码页面
在HTML项目入口目录中创建 index.html，写入以下代码。页面点击“开始扫码”后会申请摄像头权限，识别成功时停止摄像头并显示二维码内容。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>二维码扫码</title>
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
padding: 20px;
display: grid;
place-items: center;
font-family: 'Microsoft YaHei', sans-serif;
background: #f4f7f5;
color: #17221c;
}
main {
width: min(100%, 440px);
}
h1 {
margin: 0 0 8px;
font-size: 30px;
}
p {
margin: 0 0 18px;
color: #526159;
}
#reader {
width: 100%;
min-height: 280px;
overflow: hidden;
border: 1px solid #cad4ce;
border-radius: 8px;
background: #101511;
}
#reader video {
object-fit: cover;
}
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
button {
min-height: 48px;
border: 0;
border-radius: 6px;
padding: 0 16px;
font: inherit;
font-weight: 700;
}
#startButton {
background: #197447;
color: white;
}
#stopButton {
background: #dfe6e2;
color: #26352d;
}
button:disabled {
opacity: 0.5;
}
#status {
min-height: 24px;
margin-top: 12px;
font-size: 14px;
color: #526159;
}
</style>
</head>
<body>
<main>
<h1>二维码扫码</h1>
<p>点击开始后，将摄像头对准二维码。</p>
<div id="reader" aria-label="摄像头扫码区域"></div>
<div class="actions">
<button id="startButton" type="button">开始扫码</button>
<button id="stopButton" type="button" disabled>停止扫码</button>
</div>
<div id="status" role="status">等待开始</div>
</main>
<script>
const reader = new Html5Qrcode('reader');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const status = document.getElementById('status');
let isScanning = false;
let resultHandled = false;
async function stopScanning() {
if (!isScanning) return;
await reader.stop();
isScanning = false;
startButton.disabled = false;
stopButton.disabled = true;
status.textContent = '扫码已停止';
}
async function startScanning() {
startButton.disabled = true;
status.textContent = '正在请求摄像头权限...';
resultHandled = false;
try {
await reader.start(
{ facingMode: 'environment' },
{ fps: 10, qrbox: { width: 240, height: 240 } },
async decodedText => {
if (resultHandled) return;
resultHandled = true;
await stopScanning();
alert(decodedText);
},
() => {}
);
isScanning = true;
stopButton.disabled = false;
status.textContent = '正在扫描...';
} catch (error) {
startButton.disabled = false;
status.textContent = '无法打开摄像头，请检查相机权限。';
console.error(error);
}
}
startButton.addEventListener('click', startScanning);
stopButton.addEventListener('click', () => {
stopScanning().catch(console.error);
});
window.addEventListener('pagehide', () => {
if (isScanning) reader.stop().catch(() => {});
});
</script>
</body>
</html>
示例通过 CDN 加载 html5-qrcode。如果APP需要完全离线运行，请提前下载 html5-qrcode.min.js 放入项目目录，并将页面中的脚本地址改为本地相对路径。
打包APK并勾选相机权限
打开HTML一键打包APK工具，选择包含 index.html 的项目目录，填写应用名称、包名等打包信息。在权限设置中勾选“相机权限”，否则APP无法调用手机摄像头。
确认配置后开始打包，等待工具生成APK文件。
安装并测试扫码
将生成的APK安装到安卓手机。首次点击“开始扫码”时，系统会弹出相机授权提示，选择允许后，将摄像头对准二维码。识别成功后，页面会停止扫描并弹出二维码中的文字或链接。
如果页面提示无法打开摄像头，请先在手机的应用权限设置中确认相机权限已经允许。扫码页面使用 CDN 脚本时，还需要确保手机能够正常访问网络；改用本地脚本后则不受此限制。
扫描二维码推送至手机访问。
版权声明：本文由YLong软件发布，如需转载请注明出处。
本文链接：http://ylongsoft.com/post/html-apk-qrcode-scanner-ylongsoft.html
