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 },
其余更多扩展自行查询文档。