vue实现扫码功能


Posted in Javascript onJanuary 17, 2020

最近在项目中碰见一个打开摄像头扫码的功能,项目最后打包成app,用的是hBuilder打的包,刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。

demo地址:vue-scan-demo

代码实现:

<template>
 <div class="scan">
 <div id="bcid">
  <div style="height:40%"></div>
  <p class="tip">...载入中...</p>
 </div>
 <footer>
  <button @click="startRecognize">1.创建控件</button>
  <button @click="startScan">2.开始扫描</button>
  <button @click="cancelScan">3.结束扫描</button>

  <button @click="closeScan">4.关闭控件</button>
 </footer>
 </div>
</template>

<script type='text/ecmascript-6'>
 let scan = null;

 export default {
 data() {
  return {
  codeUrl: '',
  }
 },
 methods: {
  //创建扫描控件
  startRecognize() {
  let that = this;
  if (!window.plus) return;
  scan = new plus.barcode.Barcode('bcid');
  scan.onmarked = onmarked;

  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(result);
   that.closeScan();

  }
  },
  //开始扫描
  startScan() {
  if (!window.plus) return;
  scan.start();
  },
  //关闭扫描
  cancelScan() {
  if (!window.plus) return;
  scan.cancel();
  },
  //关闭条码识别控件
  closeScan() {
  if (!window.plus) return;
  scan.close();
  },
 }
 }
</script>
<style lang="less">
 .scan {
 height: 100%;
 #bcid {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom:3rem;
  text-align: center;
  color: #fff;
  background: #ccc;
 }
 footer {
  position: absolute;
  left: 0;
  bottom: 1rem;
  height: 2rem;
  line-height: 2rem;
  z-index: 2;
 }
 }
</style>

预览:

打开Hbuilder,新建项目,将目录指向 /dist ,然后右键转换成移动App,真机usb连接运行

效果图:

vue实现扫码功能

通过这个例子,像其他的调用手机原生功能如:语音输入、摇一摇、摄像头、文件系统、微信分享等也可以通过上述方式实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
ES6基础之默认参数值
Feb 21 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
js实现轮播图效果 z-index实现轮播图
Jan 17 #Javascript
js键盘事件实现人物的行走
Jan 17 #Javascript
javascript实现简易的计算器
Jan 17 #Javascript
JavaScript简易计算器制作
Jan 17 #Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 #Javascript
js布局实现单选按钮控件
Jan 17 #Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 #Javascript
You might like
php经典算法集锦
2015/11/14 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
使用tensorflow实现AlexNet
2017/11/20 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
自荐信怎么写呢?
2013/12/09 职场文书
英语自荐信常用语句
2013/12/13 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
《春天来了》教学反思
2014/04/07 职场文书
2014年母亲节寄语
2014/05/07 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
稽核岗位职责范本
2015/04/13 职场文书
庆七一主持词
2015/06/29 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2016国培研修心得体会
2016/01/08 职场文书
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers