H5实现扫描二维码

摘要:
扫描二维码是app常用的一种基础功能,该功能使用户能够方便地登录、浏览网站、获取信息等操作,鉴于此,把该功能引入H5,利用H5实现扫描二维码功能

在把扫描二维码功能引入H5的过程中,通过对比5种工具库找到了两种比较好用的第三方库。接下来就对这两种库进行记录。
本文使用的技术是uniapp+vue3

html5-qrcode

html5-qrcode库是一个JavaScript库,只需要提供一个元素容器即可实现扫码功能,但是扫描的效率很低,对着二维码1个小时都不一定能识别出来。
使用这个库也很简单:

  1. 安装
    npm install html5-qrcode
    
  2. 在需要使用的页面引入
    接下来写一个示例看看效果
<template>
	<view class="container">
		<button class="scan" @click="scanCode">扫一扫button>
		<view class="reader-box" v-if="isScaning">
			<view class="reader" id="reader">view>
		view>
	view>
template>
<script>
	import {
		Html5Qrcode
	} from 'html5-qrcode';
	export default {
		data() {
			return {
				html5Qrcode: null,
				isScaning: false,
			}
		},
		methods: {
			startScan() {
				this.isScaning = true;
				Html5Qrcode.getCameras().then(devices => {
					if (devices && devices.length) {
						this.html5Qrcode = new Html5Qrcode('reader');
						this.html5Qrcode.start({
							facingMode: 'environment',
						}, {
							fps: 24,
							qrbox: 280
						}, (decodeText, decodeResult) => {
							console.log(decodeText)
							if (decodeText) {
								this.stopScan();
								this.isScaning = false;
							}
						}, (err) => {
							console.log(err)
						});
					}
				});
			},
			stopScan() {
				this.html5Qrcode.stop();
			},
			scanCode() {
				console.log('helo')
				this.startScan();
			}
		}
	}
</script>

<style scoped>
	.container{
		height:100%;
	}
	.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.reader {
		width: 540rpx;
		height: 540rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>

当我们点击扫一扫按钮时,出现下面的效果:
H5实现扫描二维码_第1张图片

上面的样式可以根据自己的需要进行修改。
html5-qrcode的优点:

  1. 灵活,不管是样式还是逻辑都可以根据自己的需要灵活处理
  2. 内置基本的样式,减少自定义样式的内容
    html5-qrcode的缺点:
  3. 灵敏度低,扫码扫一两个小时都不一定能够扫出结果,效率很慢

vue-qrcode-reader

vue-qrcode-reader的使用更简单

  1. 安装
npm install vue-qrcode-reader
  1. 在需要的页面引入QrcodeStream组件并注册即可使用
  2. 监听QrcodeStream的detect事件,事件处理函数的参数是识别到的二维码的数组

下面使用一个示例,看看效果:

<template>
	<view class="container">
		<button class="scan" @click="scanCode">扫一扫</button>
		<view class="reader-box" v-if="isScaning">
			<QrcodeStream @detect="onDetect">
				<view class="reader"></view>
			</QrcodeStream>
		</view>
	</view>
</template>

<script>
	import {
		QrcodeStream,
	} from 'vue-qrcode-reader';
	export default {
		components: {
			QrcodeStream,
		},
		data() {
			return {
				isScaning: false,
			}
		},
		methods: {
			onDetect(detectedCodes) {
				const target = detectedCodes[0];
				if (target && target.rawValue) {
					console.log(target.rawValue);
					this.isScaning = false;

				}
			},
			
			scanCode() {
				this.isScaning = true;
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100%;
	}
	.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.reader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 100%;
	}
</style>

当点击扫一扫时出现下面的效果:
H5实现扫描二维码_第2张图片
上面的样式可以根据自己的需要进行修改,QrcodeStream提供了一个默认的插槽,插槽的内容默认在一个position:absolute的盒子里。

vue-qrcode-reader的优点

  1. 灵敏度高,当二维码出现在视图中就能得到其内容,效率很高
  2. 使用很方便,不需要自己处理扫码逻辑,只需要监听一个事件就行

vue-qrcode-reader的缺点:

  1. 没有内置的样式,需要自己写样式

你可能感兴趣的:(Vue,前端,javascript,扫描二维码,H5)