uniapp在h5页面实现扫码功能(html5-qrcode)

npm install html5-qrcode

<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>