第一步:

  

  上面这段代码写在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扫码功能的更多相关文章

  1. ionic3 实现扫码功能

    ionic3 通过插件phonegap-plugin-barcodescanner,调用机器硬件摄像头实现扫码功能. 首先当然先了解下 phonegap-plugin-barcodescanner,这 ...

  2. 微信小程序实现连续扫码功能(uniapp)

    注:本文使用的是 uniapp 语法. 微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件.camera 组件不仅能拍照,还具有扫码功 ...

  3. vue项目中实现扫码功能

    项目地址:https://github.com/wkl007/vue-scan-demo.git 项目主要是做的一个扫码的功能 核心代码为 <div class="scan" ...

  4. 账号配置vue版本的扫码下单以及对店铺进行装修的步骤

    新版vue配置说明文档 管理员后台: 1.配置管理-店铺配置(子账号)-扫码点餐tab页-开启vue版 2.配置管理-店铺配置(主账号)-扫码点餐tab页-开通装修配置 商家后台: 1.主账号-门店设 ...

  5. PHP--------微信网页开发实现微信扫码功能

    今天说说微商城项目中用到的扫一扫这个功能,分享一下,希望对各位有所帮助. 前提:要有公众号,和通过微信认证,绑定域名,得到相应信息,appid,appsecret等. 微信开发文档:https://m ...

  6. Android | 带你零代码实现安卓扫码功能

    目录 小序 背景介绍 前期准备 开始搬运 结语 小序   这是一篇纯新手教学,本人之前没有任何安卓开发经验(尴尬),本文也不涉及任何代码就可以使用一个扫码demo,华为scankit真是新手的福音-- ...

  7. Vue+abp微信扫码登录

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...

  8. Ionic4 Cordova 调用原生硬件 Api 实现扫码功能

    QR Scanner 速度快,样式随心所欲,默认只能扫二维码 https://ionicframework.com/docs/native/qr-scanner/ 安装插件 ionic cordova ...

  9. iPhone APP 扫码下载

    移动互联网发展迅速,各种APP的开发都太疯狂了,一般稍大点儿的应用,都会准备多个版本,比如:iPhone版.iPad版.Android版,我们姑且称之为:终端适配. 业务做的再大点儿的,APP还会考虑 ...

随机推荐

  1. Android SDK版本号 与 API Level 对应关系 201911

    API是开发用的,所以API LEVEL可以认为是内部的:而SDK的版本提供了新特性给用户,是外部可见的. 可以查看以下网址以获取最新的对应关系:  http://developer.android. ...

  2. 【转载】 C#通过File类实现文件拷贝复制的功能

    在Windows系统的使用过程中,一个较常使用的功能就是文件的复制拷贝操作,其实在C#开发中,也可以使用File类库中的Copy方法来实现文件的拷贝,支持设定原文件地址,以及拷贝复制后的文件存放路径. ...

  3. 【转载】Asp.Net MVC网站提交富文本HTML标签内容抛出异常

    今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...

  4. win10 下的YOLO v3 的编译与使用

    部署环境:win10 +CUDA 10.0 + vs2017 + opencv 3.4.0  代码版本是 https://github.com/AlexeyAB/darknet 1.初始准备 (1)下 ...

  5. 前台.cshtml得到session值方法

    方法一 <script> var s="@Session["visitor_name"]"; if(s=="")//解决报错问题 ...

  6. spring--分类索引

    1.过时api Spring(一)解决XmlBeanFactory过时问题 元素 'ref' 中不允许出现属性 'local' Spring学习笔记 关于spring 2.x中dependency-c ...

  7. C#一些不太熟悉的类——扩展学习

    Process.CloseMainWindow Method 通过向进程的主窗口发送关闭消息来关闭拥有用户界面的进程. 注解 进程执行时,其消息循环处于等待状态. 每次操作系统将 Windows 消息 ...

  8. 小程序数据绑定和setData

    我们wxml没有直接调用数据的能力,我们的逻辑是通过js调用数据,再由js传递给wxml才能够显示出来.那么怎么由js传递给wxml?   首先我的js里面有这样一段代码 process: funct ...

  9. 轻院校赛-zzuli 2266: number【用每位的二进制的幂的和来进行hash(映射)处理】

    zzuli 2266: number 大致题意:   给定n,问有多少数对<x, y>满足: x, y∈[1, n], x < y            x, y中出现的[0, 9] ...

  10. flask 框架 转载:https://cloud.tencent.com/developer/article/1465949

    1.cookie.py """ - 解释: 用来保持服务器和浏览器交互的状态的, 由服务器设置,存储在浏览器 - 作用: 用来做广告推送 - cookie的设置和获取 - ...