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还会考虑 ...
随机推荐
- mysql database和schema区别
在MySQL的语法操作中(MySQL5.0.2之后),可以使用CREATE DATABASE和CREATE SCHEMA来创建数据库,两者在功能上是一致的.在使用MySQL官方的MySQL管理工具My ...
- springboot启动流程(目录)
springboot出现有段时间了,不过却一直没有怎么去更多地了解它.一方面是工作的原因,另一方面是原来觉得是否有这个必要,但要持续做java似乎最终逃不开要去了解它的命运.于是考虑花一段时间去学习一 ...
- ElementUI动态表格数据转换formatter
elementUI的表格初始化比较简单,声明prop值对应的字段名即可. 而在实际应用中,我们常常有这种需求:从服务器获取的数据并不是我们要显示的最终结果,涉及一些状态.类型.日期时间等的转换,这时候 ...
- JS权威指南读书笔记(三)
第七章 数组 1 数组的实现是经过优化的,用数字索引来访问数组元素一般来说比访问常规的对象属性要快的多. 2 数组直接量的语法允许有可选的结尾的逗号,故[ ; ; ]只有两个元素而非三个. 3 调用构 ...
- vue动态绘制四分之三圆环
参照网上的一个案例“参照的为绘制的是一个动态的圆环”,现在我的需求是改编成四分之三的圆环实现效果: 样式展示 canvas绘图基本操作设置就可以参考源代码链接:原文:https://blog.csdn ...
- Harbor高可用理论及实践(汇聚篇)
目录 一.理论概述 什么是harbor harbor要解决的问题 有了docker自带的registry为什么还要用harbor harbor的架构组件 Harbor工作原理 二.部署harbor及其 ...
- Shodan全世界在线设备搜索引擎
reproduction from https://danielmiessler.com/study/shodan/ What is Shodan? Shodan is a search engine ...
- 【DRF框架】序列化组件——ModelSerializer
ModelSerializer 1.ModelSerializer类似于ModelForm 2.根据模型自动生成一组字段 3.自带实现了.update()以及.create()方法 ModelSeri ...
- 永远不会执行的cron表达式
场景是这样的,在服务里利用sprint boot的@Scheduled(cron = "${xx.run.schedule}")定义了一个定时服务,xx.run.schedule变 ...
- 刷题小tips
自从认真做题以后,结合自己的做题体验以及网上前人的总结经验贴,罗列下列的小建议: 1.为了避免每一次都要重复输入测试数据的麻烦,利用输入重定向文件 我是只把标准输入stdin重定位到in.txt,然后 ...