Vue结合uni-app实现手机端的扫码功能

uniApp二维码文档地址：https://www.html5plus.org/doc/zh_cn/barcode.html

步骤：

组件中创建div容纳扫码控件
创建扫描控件
开始扫描
关闭扫描
关闭条码识别控件

tips：

在代码中，我是在mounted函数中就调用了startRecognize()函数，创建了扫码识别控件，为了便于演示，大家可以在页面上加几个按钮，绑定不同的函数调用创建，开始，关闭扫描控件函数

其中startRecognize()函数中的result值就是扫码的结果，可以对这个值进行操作。

其中startRecognize()函数中的type对应的是二维码的类型，可以在上面的文档中获取不同的条码对应的数值。

<template><div class="scan"><div id="bcid"><div style="90%"></div></div></div>
</template>
<script>let scan = null;
export default {mounted() {this.startRecognize()this.startScan()},methods: {//创建扫描控件startRecognize() {let that = this;if (!window.plus) return;scan = new plus.barcode.Barcode('bcid');scan.setStyle({background:"green"})var 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, '');console.log(result)//这里的result就是扫码获取到的值    that.closeScan();}scan.onmarked = onmarked;},//开始扫描startScan() {if (!window.plus) return;scan.start();},//关闭扫描cancelScan() {if (!window.plus) return;scan.cancel();},//关闭条码识别控件closeScan() {if (!window.plus) return;scan.close();}},}
</script>

以上代码仅供个人记录以及复习使用，欢迎大家评论指正

Vue结合uni-app实现手机端的扫码功能相关推荐

基于Vue+Express+Mysql开发的手机端电影购票系统（附源码）
基于Vue+Express+Mysql开发的手机端电影购票系统基于手机的电影购票系统-Vue+Node 一个Vue+Express+Mysql的电影售票项目项目完整源码下载 https://dow ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
利用auto.js实现FIFAol3手机端截卡器功能
利用auto.js实现FIFAol3手机端截卡器功能利用空闲时间写了个小脚本给自己使用,现在分享给大家.最近使用截卡器的人越来越多,导致现在几乎买不到球员了,既失望又无奈.费话不多说,直接上方法. ...
uni-app App端半屏连续扫码
本文简介点赞 + 关注 + 收藏 = 学会了本文用一个简单的 demo 讲解 App端半屏连续扫码的实现方式,包括(条形码.二维码等各种各样的码). 我会从实现思路讲起,如果你比较急可以直接跳 ...
使用vue+weixin-js-sdk实现公众号页面的扫码功能
vue+barcode 实现app端的扫码功能同样的,详细的api文档描述可以看微信官方文档,这里就简单列一下用到的点. 1.引入weixin-js-sdk 依赖 vue全局使用 npm insta ...
APICloud+vue+vant实现二维码扫码功能
使用APICloud+vue+vantUI项目实战--实现二维码扫描功能本次的教程主要是简介如何在APICloud中去使用vue和vantUI来搭建项目.在网上搜索了很多关于vantUI的使用方法, ...
基于Vue+SpringBoot智慧校园疫情防控系统(PC端、手机端)--附源码
介绍智慧校园疫情防控系统--PC 手机端多端并行项目源码下载:https://download.csdn.net/download/DeepLearning_/87340321 软件架构手机端 ...
Python 手机端自动推送功能（利用极光推送API）
Python+Jpush手机端信息推送极光推送API是一种开发者服务,这里不再赘述我们在官网申请账号,创建应用,这里官方有详细的文档描述,这里也不再赘述,下图是我创建好的应用. 我们打开自己的应 ...
vue+elementui实现app布局小米商城，样式美观大方，功能完整
目录一.项目效果在线预览二.效果图 1.首页效果图 2.分类,动态分类+商品数据根据所属分类动态切换 3.购物车,动态添加购物车(增.删.改.查) 4.我的 5.登录注册 6.商品详情 7.搜索( ...
让你的APP轻松加上扫描二维码功能
在这个二维码横行的年代,如果一个APP连扫描二维码的功能都没有是会被耻笑的.今天小老虎教小白们如何为自己的APP添加扫描二维码功能和生成二维码,并做到外部扫描跳转网页,内部扫描跳转具体Activity ...

Vue结合uni-app实现手机端的扫码功能

Vue结合uni-app实现手机端的扫码功能相关推荐

最新文章

热门文章