以文本方式查看主题

-  Foxtable(狐表)  (http://foxtable.net/bbs/index.asp)
--  专家坐堂  (http://foxtable.net/bbs/list.asp?boardid=2)
----  纯js实现二维码扫描(脱离微信,不需要APP打包)  (http://foxtable.net/bbs/dispbbs.asp?boardid=2&id=151105)

--  作者:有点蓝
--  发布时间:2020/6/15 14:35:00
--  纯js实现二维码扫描(脱离微信,不需要APP打包)
测试好像只支持二维码扫描,不支持中文,不支持在微信里打开网页使用,需要使用手机浏览器测试,比如:夸克、UC等。

如果打不开摄像头,注意到应用管理里启用浏览器的摄像头权限。第一次使用可能会弹出使用摄像头的权限要求,点击同意启用。(148楼用户测试需要使用https,可能是现在app都提高了安全控制,http不行的可以试试https

方法1、来自web开发板块
zhenghangbo提供的用法:http://www.foxtable.com/bbs/dispbbs.asp?boardid=24&Id=150591

需要引用的js文件:llqrcode.js和test.js,把附件这个2个文件复制到“C:\\web\\lib”,HttpServer.WebPath 设置为 "c:\\web"【HttpServer.WebPath = "c:\\web"】

httprequest事件
    Case "test.htm"
        Dim wb As New weui
        wb.AddForm("","form1","tongji.htm")
        wb.AppendHTML("<script src=\'./lib/llqrcode.js\'></script>",True) \'引入脚本文件

        With wb.AddInputGroup("form1","ipg1","销售统计")
            .AddInput("cp","产品","text")
        End With
        With wb.AddButtonGroup("form1","btg1",False)
            .Add("scan", "扫码", "button")
            .Add("btn2", "统计", "button").Attribute= "onclick= \'tongji()\'"
        End With
        wb.InsertHTML("<video id=""video"" muted autoplay playsinline width=""360"" height=""240""></video><canvas id=""qr-canvas"" style=""display:none;""></canvas>") \'注意这里的控件id都是固定的,不要改变
        wb.InsertHTML("<div id=\'p1\' style=\'margin:0.5em\'></div>") \'插入一个div,用于显示服务器返回的查询结果
        wb.AppendHTML("<script src=\'./lib/test.js\'></script>") \'引入脚本文件
        wb.AppendHTML("<script>Scan.init(\'scan\',\'cp\');</script>") \'调用初始化方法,传入按钮id"scan"和接收数据的文本框id"cp"

本地测试,以内网IP启动服务,如:
HttpServer.Close()
HttpServer.Prefixes.Add("http://192.168.0.100/") \'192.168.0.100改为自己服务器IP
HttpServer.WebPath = "c:\\web"
HttpServer.Start()

手机连接本地wifi,然后使用浏览器访问:http://192.168.0.100/test.htm
如果手机连接本地wifi无法打开网页,关闭服务端电脑防火墙

方法2、使用html5-qrcode组件:https://github.com/mebjas/html5-qrcode

需要引用的js文件:html5-qrcode.min.js和test2.js,把附件这个2个文件复制到“C:\\web\\lib”,HttpServer.WebPath 设置为 "c:\\web"【HttpServer.WebPath = "c:\\web"】

httprequest事件

    Case "test2.htm"
        Dim wb As New weui
        wb.AddForm("","form1","tongji.htm")
        wb.AppendHTML("<script src=\'./lib/html5-qrcode.min.js\'></script>",True) \'引入脚本文件

        With wb.AddInputGroup("form1","ipg1","销售统计")
            .AddInput("cp","产品","text")
        End With
        With wb.AddButtonGroup("form1","btg1",False)
            .Add("scan", "扫码", "button").Attribute= "onclick= \'onScan()\'" \'调用开始扫码的js函数
            .Add("btn2", "统计", "button").Attribute= "onclick= \'tongji()\'"
        End With
        wb.InsertHTML("<div id=""reader"" width=""300px""></div>")
        wb.InsertHTML("<div id=\'p1\' style=\'margin:0.5em\'></div>") \'插入一个div,用于显示服务器返回的查询结果
        wb.AppendHTML("<script src=\'./lib/test2.js\'></script>") \'引入脚本文件
        \'wb.AppendHTML("<script>let html5QrcodeScanner = new Html5QrcodeScanner(\'reader\', { fps: 10, qrbox: 250 } , true);</script>" ) \'引入脚本文件
        wb.AppendHTML("<script>const html5QrCode = new Html5Qrcode( ""reader"");</script>" ) \'初始化二维码对象,绑定id为"reader"的div控件
        e.WriteString(wb.Build)

打开实例启动服务,手机连接本地wifi,然后使用浏览器访问:http://192.168.0.100/test2.htm

附件

以下内容只有回复后才可以浏览

[此贴子已经被作者于2024/4/14 20:09:25编辑过]

--  作者:bohe
--  发布时间:2020/6/15 14:37:00
--  
kankan
--  作者:tianhao0817
--  发布时间:2020/6/15 15:05:00
--  
很棒
--  作者:laipiwen
--  发布时间:2020/6/15 15:40:00
--  
学习了
--  作者:swagger
--  发布时间:2020/6/15 15:43:00
--  
学习学习
--  作者:lihe60
--  发布时间:2020/6/15 16:18:00
--  

--  作者:天一生水
--  发布时间:2020/6/15 16:32:00
--  
谢谢版主!
--  作者:WELOVEFOX
--  发布时间:2020/6/15 16:37:00
--  
这个赞
--  作者:菜鸟王中王
--  发布时间:2020/6/15 16:47:00
--  
看看
--  作者:jony_zhou9273
--  发布时间:2020/6/15 20:00:00
--  
OK