Vue 移动端项目调用扫一扫功能（可条形码）

前言： 项目需求扫描机器条形码，获取编号进行搜索，刚开始获取返回值不完整，后来发现要设置一下filter

提示plus方法要进行真机测试

如果plus没有找到的话，可以用原生监听。
document.addEventListener(“plusready”,function(){})

图片：

代码：

<template><div class="scan"><!-- 我topTitle是封装的全局头部返回 根据自己条件进行休整 --><topTitle>扫一扫</topTitle><div id="bcid"><div style="height:40%"></div><p class="item">...载入中...</p></div></div>
</template><script>
let scan = null;
export default {data() {return {};},mounted() {this.startRecognize();setTimeout(() => {this.startScan();}, 500);},methods: {//创建扫描控件startRecognize() {let that = this;if (!window.plus) return;//filter 扫描类型var filter = [plus.barcode.CODE128,plus.barcode.EAN13,plus.barcode.EAN8,plus.barcode.QR,];scan = new plus.barcode.Barcode("bcid", filter);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;case plus.barcode.CODE128:type = "EAN8";break;default:type = "其它" + type;break;}that.$toast(result); //我这里是封装的vant 需要根据自己情况进行修改that.closeScan();}},// 关闭控件acloseScan() {if (!window.plus) return;scan.close();},startScan() {if (!window.plus) return;scan.start();},// 关闭扫描cancelScan() {if (!window.plus) return;scan.cancel();},},destroyed() {this.cancelScan();this.closeScan();},
};
</script><style lang="scss">
.scan {width: 100%;height: 100vh;background-color: #ccc;
}
#bcid {width: 100%;position: absolute;left: 0;right: 0;top: 1.226667rem;bottom: 0;text-align: center;color: #fff;background: #ccc;
}
.item {font-size: 0.4rem;
}
</style>

测试条形码也特别完整

Vue 移动端项目调用扫一扫功能（可条形码）相关推荐

vue前端移动项目调用微信扫一扫的实现
vue前端移动项目调用微信扫一扫的实现 1安装插件 npm install weixin-jsapi --save 2在main.js中引入 // 在man.js中引入 import wx from ...
vue移动端项目微信公众号授权登录
前言在我们做移动端项目时, 很多功能是以登录后才能进行后续的操作, 并且许多pc端的网页都有微信扫码登录功能, 为了做到pc与移动端统一, 往往移动端项目需要添加微信登录功能, 那么为什么手机端不能 ...
vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖项目目录结构介绍移动端适配头部和底部导航登录注册页面密码登录短信登录 Profile页面未登录已登录 Msite页面首页导航 ShopList ...
vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
Vue 移动端项目创建
前言移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...
vue移动端项目实现真机调试
在vue移动端项目中,我们可以通过真机调试来更好的看到项目实际运行在移动端的效果. 下面就来介绍一下实现的方法: 1.使手机与电脑连接在同一个wifi下 2.修改vue.config.js文件配置将 ...
vue移动端项目实现定位
vue移动端项目实现定位腾讯地图官方地址 <template><div><div id="container&q ...
vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...

Vue 移动端项目调用扫一扫功能（可条形码）

Vue 移动端项目调用扫一扫功能（可条形码）相关推荐

最新文章

热门文章