HTML 页面无法直接调用微信扫码功能，因 wx.scanCode 是微信私有 API，需公众号网页+备案域名+微信内置浏览器；浏览器中可用 @zxing/library 等标准 Web API 实现摄像头扫码，但需 HTTPS、手动处理视频流；若目标是引导用户进入小程序，应生成带参数的小程序码供微信扫描，而非在网页中实现识别。
HTML 页面本身无法直接调用手机摄像头实现微信小程序式的扫码功能——因为 扫码 在小程序里是 wx.scanCode，而纯 HTML 运行在浏览器中，没有微信原生 API 权限。
为什么普通 HTML 打不开微信扫码界面
微信内置浏览器（X5 内核）对非小程序/公众号网页做了严格限制：wx.scanCode、wx.chooseImage 等 JS-SDK 接口，必须满足三个前提：
- 页面部署在已备案的域名下
- 该域名已在公众号后台「JS接口安全域名」中配置
- 页面通过微信内置浏览器打开（不能是 Safari、Chrome 或桌面微信）
即便满足以上，wx.scanCode 也仅支持公众号网页，不支持任意 HTML 页面独立调起扫码；更关键的是：它根本不是 HTML 标准能力，而是微信私有 JS-SDK 的一部分。
浏览器里真能扫码吗？用什么替代
可以，但得换思路：用标准 Web API 实现「基于摄像头的条码识别」，不依赖微信。主流方案是 @zxing/library（Zxing 的 Web 版本），它支持 QR Code、EAN-13、Code 128 等常见码制，且兼容 Chrome、Edge、Safari（iOS 14.5+）。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 必须使用 HTTPS（本地
localhost除外），否则navigator.mediaDevices.getUserMedia被拒绝 - 需手动处理视频流 + canvas + 解码循环，不能只靠一句函数调用
- 移动端需设置
video元素playsinline和autoplay，否则 iOS 会全屏弹出 - 首次扫码成功率受光照、角度、码质量影响大，建议加「手动截图识别」备用入口
最小可用示例片段：
import { BrowserMultiFormatReader } from '@zxing/library';
const codeReader = new BrowserMultiFormatReader();
codeReader.decodeFromVideoDevice(undefined, 'video', (result, err) => {
if (result) console.log('扫码结果：', result.getText());
if (err && !(err instanceof NotFoundException)) console.error(err);
});
想复刻小程序体验？别硬套 HTML，换路径
如果你的目标是“用户扫个码就能进业务”，而不是“在网页里做个扫码框”，那正确路径是：
- 把核心逻辑做成微信小程序（或小游戏），生成带参数的二维码（如
https://myapp.com?scene=xxx） - 用后端生成该小程序码（调用
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit），返回二进制图片流 - HTML 页面只负责展示这个二维码图片，并提示“请用微信扫描”
- 用户扫码后直接拉起小程序，无需在网页里做任何识别
这种方案无兼容性问题、无权限限制、体验一致，且能拿到 scene 参数做后续跳转或数据绑定。
真正卡住人的从来不是“怎么写扫码代码”，而是没分清：你到底要一个「浏览器里的识别工具」，还是一个「通向小程序的入口」。前者得啃 Zxing + MediaStream，后者只需一个 img 标签加一次 HTTP 请求。
