H5识别二维码

最新推荐文章于 2025-04-17 09:49:25 发布

撸猫@冒泡泡

最新推荐文章于 2025-04-17 09:49:25 发布

阅读量682

点赞数

分类专栏： qrcode.js Zepto.js 前端文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/github_37553763/article/details/125653525

版权

前端同时被 3 个专栏收录

10 篇文章

订阅专栏

qrcode.js

1 篇文章

订阅专栏

Zepto.js

1 篇文章

订阅专栏

本文介绍了如何在H5中实现二维码识别，通过引入js和css文件，展示项目的实际效果，并提供了Html和JavaScript的相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5识别二维码

项目效果

在这里插入图片描述

一.js和css文件引入

    <link rel="stylesheet" type="text/css" href="lib/my.css">
    <script src="lib/zepto.js"></script>
    <script src="lib/qrcode.lib.min.js"></script>
    <script src="lib/qrcode.js"></script>

项目地址

二.Html文件

 <div>
        <div class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
        </div>
    </div>
    <div>
        <div class="qr-btn" node-type="qr-btn">扫描二维码2
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码2" />
        </div>
    </div>
    <div class="result-qrcode">
    </div>

JavaScript

   <script>
    //初始化扫描二维码按钮，传入自定义的 node-type 属性
    $(function() {
        Qrcode.init($('[node-type=qr-btn]'));
    });
    </script>