博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HBuilder开发WAP2APP增加扫一扫功能
阅读量:6265 次
发布时间:2019-06-22

本文共 1861 字,大约阅读时间需要 6 分钟。

需求明确

开启常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

知识点明确

Barcode模块:plus.barcode,提供开启摄像头扫描功能。
Gallery模块:plus.gallery,提供读取相册二维码图片功能。
效果展示:
图片描述

实现步骤

创建条码扫描识别控件实例对象,涉及到Barcode模块,具体参数设置可参考5+ API Barcode在plusReady事件触发之后创建一个Barcode实例对象,此对象提供四个方法:start: 开始条码识别cancel: 结束条码识别close: 关闭条码识别控件setFlash: 是否开启闪光灯和两个事件:onmarked: 条码识别成功事件onerror: 条码识别错误事件
function plusReady() {    if(ws || !window.plus || !domready) {        return;    }    // 获取窗口对象    ws = plus.webview.currentWebview();    // 开始扫描    ws.addEventListener('show', function() {        scan = new plus.barcode.Barcode('bcid');        // 定义识别成功事件        scan.onmarked = onmarked;        // 定义开始条码识别        scan.start({            conserve: true, // 是否保存成功扫描到的条码数据时的截图            filename: '_doc/barcode/'  // 保存成功扫描到的条码数据时的图片路径        });    }, false);    // 显示页面并关闭等待框    ws.show('pop-in');}

// 二维码扫描成功

function onmarked(type, result, file) {    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;    }    result = result.replace(/\n/g, '');    plus.nativeUI.alert('扫描结果:' + JSON.stringify(result), function() {        console.log('扫描成功')    }, "helloW2A", "OK");    back();}

2.从相册中选择图片识别,涉及到Gallery模块,具体参数设置可参考5+ API:Gallery

// 从相册中选择二维码图片** function scanPicture() {    plus.gallery.pick(function(path) {        plus.barcode.scan(path, onmarked, function(error) {            plus.nativeUI.alert('无法识别此图片');        });    }, function(err) {        console.log('Failed: ' + err.message);    });}

3.DOM结构参考

    

...载入中...

取  消
从相册选择二维码

转载地址:http://pkcpa.baihongyu.com/

你可能感兴趣的文章
容易犯错的面试题
查看>>
django框架 restful规范 CBV源码分析
查看>>
jdk 配置(已验证,但是并不是完全相同)
查看>>
《代码敲不队》第九次团队作业:Beta冲刺与验收准备
查看>>
迭代器和生成器
查看>>
requests库入门05-参数类型
查看>>
go语言 windows 32位编译环境搭建
查看>>
我的家庭私有云计划-20
查看>>
手把手教你封装属于自己的Windows7安装镜像
查看>>
《作业指导书》的发布管理问题与解决办法
查看>>
55.Azure内容分发网络(CDN)
查看>>
MySQL常见错误代码(error code)及代码说明
查看>>
微软MVP社区巡讲
查看>>
总结一下,MariaDB 10(MySQL5.6企业版分支)的主要新特性
查看>>
MS UC 2013-0-虚拟机-标准化-部署-2-模板机-制作-3-安装-Tool
查看>>
IDS与IPS的区别
查看>>
初试Windows 8 RTM
查看>>
Linux 下rpm包搭建LAMP环境
查看>>
Windows Server 2016-Nano Server介绍
查看>>
未来架构师的平台战略范例(4)_大数据
查看>>