以文本方式查看主题 - 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) 需要引用的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 |