纯js实现二维码扫描（脱离微信，不需要APP打包） - 专家坐堂 - Foxtable(狐表) - 新一代数据库软件，完美融合Access、Foxpro、Excel、vb.net之优势，人人都能掌握的快速软件开发工具!

测试好像只支持二维码扫描，不支持中文，不支持在微信里打开网页使用，需要使用手机浏览器测试，比如：夸克、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编辑过]

主题：纯js实现二维码扫描（脱离微信，不需要APP打包）