vue+barcode实现扫一扫功能

最新推荐文章于 2024-08-20 09:48:33 发布

羊心眼

最新推荐文章于 2024-08-20 09:48:33 发布

阅读量1.3w

点赞数 10

文章标签： barcode vue 扫一扫

本文链接：https://blog.csdn.net/weixin_40679578/article/details/103045305

版权

附上barcode参考文档添加链接描述
使用它很大一个优点：能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。

主要弄明白他两个方法和成功回调差不多功能技能实现了
在这里插入图片描述

回调里面的type是码的类型，result是扫出来的地址
拿到result我们一般是希望他可以通过跳转链接，如果直接用plus.runtime.openURL(urlStr);的话跳不过去，给他赋给一个变量就好了
首先先安装，然后引用哈

npm install vue-barcode

上代码

<template>
	<div class="msgbox">
		<div class="header">
			<i class="mui-icon mui-icon-back" @click="back"></i>
		</div>
		<div id="code">
			<div style="width:14rem;height:14rem; background-color: #fff; margin: 15% auto 5%; text-align: center"></div>
			<p class="tip" style="text-align: center">...载入中...</p>
		</div>
		<p>将二维码放入框内，即可自动扫描</p>
		<div class="sweep" @click="sweep">开始扫码</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				scan: ""
			}
		},
		mounted() {
			const self = this
			if (window.plus) {
				self.plusReady()
			} else {
				document.addEventListener('plusready', self.plusReady, false);
			}
			document.addEventListener('DOMContentLoaded', function() {
				alert('DOMLoaded')
				self.domready = true;
				self.plusReady()
			}, false)
		},
		methods: {
			//   点击返回并关闭
			back: function() {
				this.$router.push({
					path: "/home"
				})
			},
			plusReady() {
				const self = this
				// 获取窗口               
				self.scan = new plus.barcode.Barcode('code');
				self.scan.onmarked = self.onmarked;
				console.log(self.scan)
			},

			sweep() {
				const self = this
				self.scan.start();
			},

			onmarked(type, result) {
				var text = '未知: ';

				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, '')

				if (result.indexOf('http://') == 0 || result.indexOf('https://') == 0) {
					plus.nativeUI.confirm("二维码类型：" + type + "\n扫描结果：" + result, function(i) {
						if (i.index == 0) {
							var urlStr = encodeURI(result)
							plus.runtime.openURL(urlStr);
						} else {
							self.back(); //返回上个页面  
						}
					}, '', ['打开', '取消']);
				} else {
					self.back(); //返回上个页面  
					plus.nativeUI.alert("二维码类型：" + type + "\n扫描结果：" + result + "\n文件路径：" + f)
				}
			}
		},
	}
</script>

效果图
在这里插入图片描述

打开之后是这样