html5+plus(5+app) 扫一扫(plus.条形码)
最编程
2024-04-29 08:33:38
...
uniapp扫描二维码:
官方API地址:https://uniapp.dcloud.io/api/system/barcode?id=scancode;
1 uni.scanCode({ 2 scanType: ['barCode'], 3 success: function (res) { 4 console.log('条码类型:' + res.scanType); 5 console.log('条码内容:' + res.result); 6 } 7 });
官方API解释的很清楚,不再多记 (以上即可实现app扫码) ;
5+app 扫码:
官方API地址:http://www.html5plus.org/doc/zh_cn/barcode.html;
本人使用思路:创建一个空页面当做扫描页面载体 ---> 创建扫描框 ---> 正常扫描 ---> 扫描成功 ---> 处理逻辑
| |
↓ ↓
非正常扫描 扫描失败 ---> 处理逻辑
↓
取消扫描
①:新建页面
……
②:创建webview承载扫描控件:
1.
1 //创建webview 2 var cw = plus.webview.currentWebview();
2.创建扫描控件(我个人是直接在onload中实现所有内容,可拆分):
· 正常扫描:
let _that = this; this.barcode = null; if (!_that.barcode) { // 创建扫描控件对象 _that.barcode = plus.barcode.create('barcode',[plus.barcode.QR], { scanbarColor: '#2E49C0', frameColor: '#2E49C0' }); cw.append(_that.barcode); // (以下可单独拆分为方法)扫码成功回调 _that.barcode.onmarked = (type,result) => { // 此时已经可以直接获取结果自行处理结果 _that.result = result; switch (type) { case plus.barcode.QR: type = 'QR'; break; case plus.barcode.EAN13: type = 'EAN13'; break; case plus.barcode.EAN8: type = 'EAN8'; break; default: type = '其它' + type; break; } //结束对摄像头获取图片数据进行条码识别操作,同时关闭摄像头的视频捕获。 结束后可调用start方法重新开始识别。 _that.barcode.cancel(); //释放控件占用系统资源,调用close方法后控件对象将不可使用。 _that.barcode.close(); // (自行处理逻辑)可以判断是否是自己需要的二维码(方法多变,) 扫描成功……
扫描失败…… } }
* 此时可能会出现不准备扫描,想要直接返回的情况。但是5+app的控件相当于在扫描二维码的页面创建了一个webview覆盖了本页面,所以物理按键返回是关闭不了扫码界面的;
* 当扫码界面覆盖原页面时,点击扫码按钮的位置可以多次打开或创建多个扫码控件(肯定还有其他解决方法),我这边直接在点击扫码按钮跳转到扫码页面时,隐藏扫码按钮,然后在正常扫描完成和非正常扫描后重新显示按钮。
·非正常扫描:
1 // 关闭当前webview 2 plus.key.addEventListener('backbutton', function() { 3 cw.canBack(function(e) { 4 if (e.canBack) { 5 uni.$emit('scanShow','show') 6 //关闭扫描 7 _that.cancelScan() 8 _that.barcode.close() 9 } 10 }) 11 }); 12
扫描:
1 this.barcode.start();
注:本人以上代码全部一体在onload()生命周期函数内部编写。
扩展:
1 //开启闪光灯 2 open() { 3 this.setFlash = !this.setFlash 4 this.barcode.setFlash(this.setFlash); 5 },
其余更多扩展自行查询文档。
原文地址:https://www.cnblogs.com/chenghuayike/p/14121490.html
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
html5+plus(5+app) 扫一扫(plus.条形码)
-
实用APP推荐:一扫即得!二维码/条形码扫描及历史记录查询
-
用HTML5+Plus(5+App)轻松实现扫码功能(plus.barcode)