vue移动app扫码功能
第一步:
上面这段代码写在index.html里面,我也不知道为什么,可能是全局的关系;
第二步:
定义一个按钮,点击启动扫码功能,另外再定义一个盒子来当做扫码的容器;我给这个盒子定义了一个id类名:bcid
第三步: 第三步代码多,直接粘贴,方便你我他,我也是在别人手上抄过来,作了部分改变
//创建扫描控件
startRecognize1() {
document.getElementById('bcid').style.display = 'block';
document.getElementsByClassName('scanCode')[0].style.display = 'none';
let that = this;
if (!window.plus) return;
scan = new plus.barcode.Barcode('bcid');
scan.onmarked = onmarked;
setTimeout(function(){
that.startScan1();
},100)
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, '');
that.codeUrl = result;
alert(that.codeUrl);
if(that.codeUrl){
that.cancelScan1();
that.closeScan1();
}
}
},
//开始扫描
startScan1() {
if (!window.plus) return;
scan.start();
},
//关闭扫描
cancelScan1() {
if (!window.plus) return;
scan.cancel();
},
//关闭条码识别控件
closeScan1() {
document.getElementById('bcid').style.display = 'none';
document.getElementsByClassName('scanCode')[0].style.display = 'block';
if (!window.plus) return;
scan.close();
},
————————————————————————————————————————————————————————————————————————————————————————————
vue移动app扫码功能的更多相关文章
- ionic3 实现扫码功能
ionic3 通过插件phonegap-plugin-barcodescanner,调用机器硬件摄像头实现扫码功能. 首先当然先了解下 phonegap-plugin-barcodescanner,这 ...
- 微信小程序实现连续扫码功能(uniapp)
注:本文使用的是 uniapp 语法. 微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件.camera 组件不仅能拍照,还具有扫码功 ...
- vue项目中实现扫码功能
项目地址:https://github.com/wkl007/vue-scan-demo.git 项目主要是做的一个扫码的功能 核心代码为 <div class="scan" ...
- 账号配置vue版本的扫码下单以及对店铺进行装修的步骤
新版vue配置说明文档 管理员后台: 1.配置管理-店铺配置(子账号)-扫码点餐tab页-开启vue版 2.配置管理-店铺配置(主账号)-扫码点餐tab页-开通装修配置 商家后台: 1.主账号-门店设 ...
- PHP--------微信网页开发实现微信扫码功能
今天说说微商城项目中用到的扫一扫这个功能,分享一下,希望对各位有所帮助. 前提:要有公众号,和通过微信认证,绑定域名,得到相应信息,appid,appsecret等. 微信开发文档:https://m ...
- Android | 带你零代码实现安卓扫码功能
目录 小序 背景介绍 前期准备 开始搬运 结语 小序 这是一篇纯新手教学,本人之前没有任何安卓开发经验(尴尬),本文也不涉及任何代码就可以使用一个扫码demo,华为scankit真是新手的福音-- ...
- Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...
- Ionic4 Cordova 调用原生硬件 Api 实现扫码功能
QR Scanner 速度快,样式随心所欲,默认只能扫二维码 https://ionicframework.com/docs/native/qr-scanner/ 安装插件 ionic cordova ...
- iPhone APP 扫码下载
移动互联网发展迅速,各种APP的开发都太疯狂了,一般稍大点儿的应用,都会准备多个版本,比如:iPhone版.iPad版.Android版,我们姑且称之为:终端适配. 业务做的再大点儿的,APP还会考虑 ...
随机推荐
- solr的命令
Start the Server If you didn’t start Solr after installing it, you can start it by running bin/solr ...
- html中a标签的4个伪类样式
在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时 ...
- nginx编译安装和功能介绍
nginx介绍 nginx: engine X,是由1994年毕业于俄罗斯国立莫斯科鲍曼科技大学的同学为俄罗斯rambler.ru公司开发的,开发工作最早从2002年开始,第一次公开发布时间是2004 ...
- Go 性能分析之案例一
思考 相信大家在实际的项目开发中会遇到这么一个事,有的程序员写的代码不仅bug少,而且性能高:而有的程序员写的代码能否流畅的跑起来,都是一个很大问题.而我们今天要讨论的就是一个关于性能优化的案例分析. ...
- 剑指Offer(三十一):整数中1出现的次数(从1到n整数中1出现的次数)
剑指Offer(三十一):整数中1出现的次数(从1到n整数中1出现的次数) 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https:// ...
- SVN安装配置教程
第一步:安装Apache LInux centos6.5 (备注:为了方便可以把linux防火墙关掉,这样就不需要一个一个开端口了,建议开发测试可以这样,正式环境不推荐) 第二步:安装SVN服 ...
- sql index改怎么建
https://stackoverflow.com/questions/11299217/how-can-i-optimize-this-sql-query-using-indexes ------- ...
- Docker那些事儿之编排工具docker-compose
前面已经讲解过docker的一些基础使用,镜像创建的操作过程,如果大量容器需要同时部署,一个一个容器进行服务器上的部署,估计要疯掉,在使用上我们需要找到更好更便捷的使用方式,今天要讲解的容器编排工具d ...
- MySQL的索引优化,查询优化
MySQL逻辑架构 如果能在头脑中构建一幅MySQL各组件之间如何协同工作的架构图,有助于深入理解MySQL服务器.下图展示了MySQL的逻辑架构图. MySQL逻辑架构,来自:高性能MySQL My ...
- jQuery toast 淡入淡出提示
#toast{ position: fixed; top: 44%;left:50%;transform: translateX(-50%); min-width: 80px; max-width: ...