移动端开发vue使用Barcode实现二维码、条形码扫码

实现效果

0 HTML

<template><div class="content"><header><section class="head_goback"  @click="goback"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"/></svg></section><section class="title_head ellipsis"><span class="title_text">扫描设备</span></section></header><div class="Detail"><div id="code"><div style="width:16rem;height:12.8rem; background-color: #000; margin: 15% auto 5%; text-align: center"></div></div><p style="text-align: center">将二维码放入框内，即可自动扫描</p><div style="text-align: center" class="sweep" @click="sweep">开始扫码</div><div style="text-align: center" class="start" @click="next">识别失败，手动录入</div></div></div>
</template>

Tips:引包

npm install vue-awesome-mui -save

在main.js放入：

import Mui from 'vue-awesome-mui'
Vue.use(Mui)

1进入页面执行扫码功能

  activated () {const self = thisif (window.plus) {self.plusReady()} else {document.addEventListener('plusready', self.plusReady, false)}document.addEventListener('DOMContentLoaded', function () {// alert('DOMLoaded')self.domready = trueself.plusReady()}, false)setTimeout(function () {self.sweep() // 扫码函数}, 1000)},

methods:{
//创建
plusReady () {const self = this// 获取窗口self.scan = new plus.barcode.Barcode('code')self.scan.onmarked = self.onmarked},// 开始扫码sweep () {const self = thisself.scan.start()},onmarked (type, result) {let t = thisvar text = '未知: 'switch (type) {case plus.barcode.QR:type = 'QR'breakcase plus.barcode.EAN13:type = 'EAN13'breakcase plus.barcode.EAN8:type = 'EAN8'breakdefault:type = '其他' + typebreak}result = result.replace(/\n/g, '')if (result.indexOf('http://') == 0 || result.indexOf('https://') == 0) {plus.nativeUI.confirm(result, function (i) {if (i.index == 0) {// self.back() // 返回上个页面plus.runtime.openURL(result)console.log(result) // 扫出来的值t.scan.close() //扫码成功后关闭扫码t.$router.push({path: 'Info', query: {id: result}})   // 跳转到对应的页面 } else {// self.back() // 返回上个页面console.log(result)t.scan.close()window.localStorage.scan = resultt.$router.push({path: 'Info', query: {id: result}})}}, '', ['打开', '取消'])} else {// self.back() // 返回上个页面console.log(result)}}
}

Css

<style scoped lang="less">.content{background-color: #000;color: white;height: 100vh;overflow: hidden;header{background-color: #000;height: 2.00533rem;width: 100%;text-align: center;line-height: 2.00533rem;display: flex;/*position: fixed;*/top:0;z-index: 99999;/deep/ .head_goback{padding-top: 0.1rem;width: 0.6rem;height: 0.8533rem;padding-left: 0.2rem;}/deep/ .title_head{width: 92%;text-align: center;color: white;font-size: 0.8533rem;letter-spacing: 2px;}}.Detail{width: 96%;margin: 0 auto;.session{.name{margin: 0.4rem 0;font-size: 0.4rem;color: #333333;font-weight: bold;}.useTutorials{background-color: #3998F7;border-radius: 5px;}.desc{margin: 0.4rem 0;font-size: 0.4rem;color: #333333;.title{font-weight: bold;}.intro{margin-top: 0.1rem;}}}p{font-size: 0.72rem;}.sweep{text-align: center;margin: 0.1rem auto;width:13.8667rem;height:1.7067rem;display: flex;justify-content: center;align-items: center;border-radius:1.024rem;font-size: 0.768rem;position: relative;z-index: 9999;color: white;background:#FF8C99;box-shadow:0px 6px 9px 0px rgba(255, 140, 153, 0.57);margin-top: 2rem;}}.start{text-align: center;margin: 0 auto;width:13.8667rem;height:1.7067rem;display: flex;justify-content: center;align-items: center;border-radius:1.024rem;font-size: 0.768rem;background:white;border: 2px solid rgba(255, 169, 163, 1);color: rgba(255, 169, 163, 1);margin-top: 0.64rem;}}
</style>

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！

移动端开发vue使用Barcode实现二维码、条形码扫码相关推荐

【移动端】vue宣传海报拼接二维码
来源需求项目宣传海报,海报上有项目入口二维码,由于该海报的二维码是实时生成,因此不能用固定的二维码,所以才需要调用后端接口获取到对应的链接,然后转成二维码,最后拼接到海报图上,再进行展示. 功能实现 ...
基于Vue框架开发的页面加载二维地图以及交互
一.在Vue项目中引入二维地图 1.切换到公司的仓库下载地图插件 npm config set registry http://nexus.toops.club/repository/npm-zui/ ...
uniapp开发h5调摄像头识别二维码信息
因为html5+是要在app环境下运行,所以先创建一个5+项目我是觉得一个页面想要扫码识别后拿到数据不是很方便就创建了两个vue来进行测试,也可以在一个页面进行 index.vue <temp ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
AR.js开发问题详解（二维码识别不出来及AR二维码如何进行训练）
AR.js开发问题详解(二维码识别不出来及AR二维码如何进行训练) 1. 大家碰到的很多都是二维码识别不出来的情况. 原因:周围环境的光太强或太暗,遮挡了二维码的信息,摄像头识别不到全部的信 ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...

移动端开发vue使用Barcode实现二维码、条形码扫码

移动端开发vue使用Barcode实现二维码、条形码扫码相关推荐

最新文章

热门文章