Foxtable(狐表)用户栏目专家坐堂 → 纯js实现二维码扫描(脱离微信,不需要APP打包)


  共有947人关注过本帖树形打印复制链接

主题:纯js实现二维码扫描(脱离微信,不需要APP打包)

帅哥哟,离线,有人找我吗?
有点蓝
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:52879 积分:268032 威望:0 精华:8 注册:2015/6/24 9:21:00
纯js实现二维码扫描(脱离微信,不需要APP打包)  发帖心情 Post By:2020/6/15 14:35:00 [只看该作者]

测试好像只支持二维码扫描,不支持中文,不支持在微信里打开网页使用,需要使用手机浏览器测试,比如:夸克、UC等。

如果打不开摄像头,注意到应用管理里启用浏览器的摄像头权限。第一次使用可能会弹出使用摄像头的权限要求,点击同意启用。

方法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

附件

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

[此贴子已经被作者于2020/6/16 21:46:08编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
bohe
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:四尾狐 帖子:970 积分:8399 威望:0 精华:0 注册:2008/9/2 11:34:00
  发帖心情 Post By:2020/6/15 14:37:00 [只看该作者]

kankan

 回到顶部
帅哥哟,离线,有人找我吗?
tianhao0817
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:婴狐 帖子:10 积分:174 威望:0 精华:0 注册:2020/5/16 10:30:00
  发帖心情 Post By:2020/6/15 15:05:00 [只看该作者]

很棒

 回到顶部
帅哥哟,离线,有人找我吗?
laipiwen
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:童狐 帖子:215 积分:1620 威望:0 精华:0 注册:2015/4/29 11:50:00
  发帖心情 Post By:2020/6/15 15:40:00 [只看该作者]

学习了

 回到顶部
帅哥哟,离线,有人找我吗?
swagger
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:614 积分:4678 威望:0 精华:0 注册:2012/8/25 20:50:00
  发帖心情 Post By:2020/6/15 15:43:00 [只看该作者]

学习学习

 回到顶部
帅哥哟,离线,有人找我吗?
lihe60
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:狐神 帖子:6185 积分:38436 威望:0 精华:0 注册:2009/3/2 14:07:00
  发帖心情 Post By:2020/6/15 16:18:00 [只看该作者]


 回到顶部
帅哥哟,离线,有人找我吗?
天一生水
  7楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:四尾狐 帖子:850 积分:7911 威望:0 精华:0 注册:2017/9/26 16:30:00
  发帖心情 Post By:2020/6/15 16:32:00 [只看该作者]

谢谢版主!

 回到顶部
帅哥哟,离线,有人找我吗?
WELOVEFOX
  8楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:童狐 帖子:268 积分:1799 威望:0 精华:0 注册:2016/12/21 22:58:00
  发帖心情 Post By:2020/6/15 16:37:00 [只看该作者]

这个赞

 回到顶部
帅哥哟,离线,有人找我吗?
菜鸟王中王
  9楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:小狐 帖子:309 积分:3610 威望:0 精华:0 注册:2016/11/17 9:49:00
  发帖心情 Post By:2020/6/15 16:47:00 [只看该作者]

看看

 回到顶部
帅哥哟,离线,有人找我吗?
jony_zhou9273
  10楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:幼狐 帖子:126 积分:856 威望:0 精华:0 注册:2015/6/10 16:35:00
  发帖心情 Post By:2020/6/15 20:00:00 [只看该作者]

OK

 回到顶部
总数 42 1 2 3 4 5 下一页