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中Eval函数的使用
Mar 23 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
javascript基础知识讲解
Jan 11 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
用Zend Encode编写开发PHP程序
2010/02/21 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP递归创建多级目录
2015/11/05 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
layui.js实现的表单验证功能示例
2017/11/15 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python实现文件内容批量追加的方法示例
2017/08/29 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
python之信息加密题目详解
2019/06/26 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
企业指导教师评语
2014/04/28 职场文书
瘦西湖导游词
2015/02/03 职场文书
生死抉择观后感
2015/06/09 职场文书
军训结束新闻稿
2015/07/17 职场文书
大学学生会竞选稿
2015/11/19 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
Python中request的基本使用解决乱码问题
2022/04/12 Python
Python保存并浏览用户的历史记录
2022/04/29 Python