app场景下uniapp的扫码记录


Posted in Java/Android onJuly 23, 2022

背景

扫码需求日益增多,为了满足客户的需求,扫码演变的多种多样,其中有二维码,条形码居中,条形码又可以细分成几种,以下记录全屏和自定义页面扫码的在uniapp的技术实现

全屏扫码

uniapp自身带的api方法-uni.scanCode

uni.scanCode(OBJECT)

app场景下uniapp的扫码记录

h5平台暂不支持这种形式调起全屏

app场景下uniapp的扫码记录

扫码的格式基本满足日常需求,但是一些格式的码还是没有得到支持

代码示例如下:

// 允许从相机和相册扫码
uni.scanCode({
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});
// 只允许通过相机扫码
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});
// 调起条码扫描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

优点:方便快捷调起全屏扫码

缺点:支持码的种类不多,扫码效率比不过微信、支付宝等商业扫码库。如需更强的扫码效果,参考下方的支付宝插件扫码

支付宝插件扫码

针对app场景,我们使用全屏扫码,可以使用支付宝提供的扫码插件,具体接入,可参考我上一篇 uniapp接入支付宝扫码 ,这个的速度和识别率基本是业内顶尖,特别提醒接入扫一扫这个服务本身是免费的,但是假如你要开启扫码检测,日志记录的话,这些就要额外收费,这点大家根据需求来,但是大部分情况,作为免费测试的话,大家记得关闭这些额外收费的功能

tip:接入这个插件要先自定义基座再打包,不然运行不生效

var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
mpaasScanModule.mpaasScan({
                        // 扫码识别类型,参数可多选,qrCode、barCode,不设置,默认识别所有
                        'scanType':  ['qrCode','barCode'],
                        // 是否隐藏相册,默认false不隐藏
                        'hideAlbum': false
                    },
                    (ret) => {
                        uni.showModal({
                            title: "弹窗标题",
                            // 返回值中,resp_code 表示返回结果值,10:用户取消,11:其他错误,1000:成功
                            // 返回值中,resp_message 表示返回结果信息
                            // 返回值中,resp_result 表示扫码结果,只有成功才会有返回
                            content: JSON.stringify(ret),
                            showCancel: false,
                            confirmText: "确定"
                        })
                    })

优点:支持扫码的格式多,基本涵盖各类码

缺点:uniapp暂时只支持全屏,希望官方可以推出自定义扫码

自定义扫码

自定义扫码的场景也是在市场上的需求占有一定的分量,例如快递员的快递app,经常一个页面嵌套一个半页的扫码框,扫完之后的内容load在下面,直接可视化观看!

uniapp nvue自带的Barcode

app端nvue专用的扫码组件。

  • App下纯nvue项目(manifest中renderer为native),暂不支持uni.scanCode API,此时只能使用barcode组件来替代。
  • 此组件自HBuilderX 2.1.5+起支持。

app场景下uniapp的扫码记录

<barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE" scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>
<template>
	<view>
		<barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE" scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>
		<button class="btn" @click="toStart">开始扫码识别</button>
		<button class="btn" @click="tocancel">取消扫码识别</button>
		<button class="btn" @click="toFlash">开启闪光灯</button>
		<button class="btn" @click="toscan">预览</button>
	</view>
</template>
<script>
	export default {
		onLoad() {
		},
		data() {
			return {
				fil: [0, 2, 1]
			}
		},
		methods: {
			success1(e) {
				console.log("success1:" + JSON.stringify(e));
			},
			fail1(e) {
				console.log("fail1:" + JSON.stringify(e));
			},
			toStart: function() {
				this.$refs.barcode.start({
					conserve: true,
					filename: '_doc/barcode/'
				});
			},
			tocancel:function(){
				this.$refs.barcode.cancel();
			},
			toFlash: function() {
				this.$refs.barcode.setFlash(true);
			},
			toscan: function() {
				console.log("scan:");				
				const barcodeModule = uni.requireNativePlugin('barcodeScan');
				barcodeModule.scan("/static/barcode1.png"
				,(e)=>{
					console.log("scan_error:"+JSON.stringify(e));
				});
			}
		}
	}
</script>
<style>
	.barcode {
		width: 750rpx;
		height: 700rpx;
		background-color: #808080;
	}
	.btn {
		top: 20rpx;
		width: 730rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		background-color: #458B00;
		border-radius: 10rpx;
	}
</style>

优点:该场景可以自由设置宽高嵌套在页面
缺点:有时候处理不当容易黑屏,容易样式错乱

操作原生的可视化控件Barcode

uni-app可以调用plus的api操作扩展能力,这块很简单,在app的条件编译里直接写就好了,也不需要plus ready。 但是HTML5 里有很多原生的可视化控件,包括map、video、livepusher、barcode、nview(包括原生头、原生tab),获取这些对象和操作他们需要有特殊写法。

5+app开发时,我们可以用plus.webview.currentWebview获取当前页面,但uni-app里用法不一样,需要这样取当前显示的webview:

const currentWebview = this.$mp.page.$getAppWebview(); //注意相关操作写在APP-PLUS条件编译下

还有一种写法比较冗余,可以获取页面栈中任意一个webview对象:

var pages = getCurrentPages();  
var page = pages[pages.length - 1];  
// #ifdef APP-PLUS  
var currentWebview = page.$getAppWebview(); //页面栈最顶层就是当前webview  
// #endif

注意uni-app不需要像5+App那样等待plus ready,可以直接用。核心代码:

var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {  
    top:'100px',  
    left:'0px',  
    width: '300px',  
    height: '300px',  
    position: 'static'  
});  
//此处未演示扫码成功回调的地址设置,实际请参考HTML5Plus API自行处理  
//注意扫码区域需为正方形,否则影响扫码识别率  
currentWebview.append(barcode);

这也是目前比较稳定的自定义扫码

优点:稳定识别率高,自由度高

缺点:需要自己进行封装组件,可能没有上面的单纯的调用,更多依靠自己的封装组件能力

这篇记录了全屏扫码,自定义扫码分别两种方式来记录,请大家各取所需,有什么更好的,欢迎大家踊跃评论,这篇只是讲了app场景,假如是h5选项的情况,以上的记录可能将不适用,更多关于uniapp扫码记录的资料请关注三水点靠木其它相关文章!


Tags in this post...

Java/Android 相关文章推荐
总结一下关于在Java8中使用stream流踩过的一些坑
Jun 24 Java/Android
简单总结SpringMVC拦截器的使用方法
Jun 28 Java/Android
解析mybatis-plus中的resultMap简单使用
Nov 23 Java/Android
使用Java去实现超市会员管理系统
Mar 18 Java/Android
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
Mar 21 Java/Android
SpringBoot2零基础到精通之数据库专项精讲
Mar 22 Java/Android
mapstruct的用法之qualifiedByName示例详解
Apr 06 Java/Android
Java Spring Boot 正确读取配置文件中的属性的值
Apr 20 Java/Android
详解Android中的TimePickerView(时间选择器)的用法
Apr 30 Java/Android
Spring中的@Transactional的工作原理
Jun 05 Java/Android
springboot实现string转json json里面带数组
Jun 16 Java/Android
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
Jun 21 Java/Android
IDEA中sout快捷键无效问题的解决方法
Jul 23 #Java/Android
Spring Boot 的创建和运行示例代码详解
阿里面试Nacos配置中心交互模型是push还是pull原理解析
Jul 23 #Java/Android
java实现web实时消息推送的七种方案
前端与RabbitMQ实时消息推送未读消息小红点实现示例
springboot+rabbitmq实现智能家居实例详解
Spring Boot优化后启动速度快到飞起技巧示例
You might like
php正则表达式(regar expression)
2011/09/10 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
win10安装python3.6的常见问题
2020/07/01 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
法律六进活动方案
2014/03/13 职场文书
关于安全演讲稿
2014/05/09 职场文书
大型会议策划方案
2014/05/17 职场文书
超市收银员岗位职责
2015/04/07 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
Golang二维数组的使用方式
2021/05/28 Golang
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL