博客

H5纯页面方式手机端实现“扫一扫”功能（不是直接调起摄像头）

  • Post author:
  • Post category:其他


问题：由于浏览器权限问题，无法直接通过调起手机的摄像头功能，从而实现扫一扫功能。

解决思路：

1、做文件上传的工作

2、通过调用手机摄像头实现拍照的功能

3、或者通过打开图库得到二维码图片

附上js，css下载路径

链接：https://pan.baidu.com/s/1-TeW4EG8YwOvTB2elnKV3w

提取码：1030

页面HTML代码： 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>二维码扫描</title>
    <link rel="stylesheet" type="text/css" href="lib/my.css">
</head>

<body>
    <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>
    <script src="lib/zepto.js"></script>
    <script src="lib/qrcode.lib.min.js"></script>
    <script src="lib/qrcode.js"></script>
    <script>
    //初始化扫描二维码按钮，传入自定义的 node-type 属性
    $(function() {
        Qrcode.init($('[node-type=qr-btn]'));
    });
    </script>
</body>

</html>


需要注意的点

：本人是通过Springboot搭建的web项目作为Demo实践，在引入css文件和js文件的时候，要把html文件放在templates下面，js和css放在static下面，如下图：

在这里插入图片描述

我的调用流程是：在DemoController里面有请求路径，然后localhost:8080/index来进行返回我的页面，具体如下图：

在这里插入图片描述

本人使用开发工具用的IDEA2020.3.2；浏览器谷歌火狐都有用，手机是IPhone7 plus 14.2的版本；

具体结果如图：

在这里插入图片描述

有问题欢迎留言，有机会一起搬砖！


版权声明：本文为weixin_41895817原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。