需求

H5项目扫描二维码，获取解析的code,传入接口，获取数据。

一、uniapp扫描

在uniapp中有专门扫描的方法，uni.scanCode，但是好巧不巧H5端它却不支持，现在简单的东西就变麻烦了。

二、H5项目扫描二维码-mumu-getQrcode插件

1.mumu-getQrcode插件

下载mumu-getQrcode插件，导入项目中，mumu-getQrcode插件下载地址

##导入到项目中后，就可以创建页面使用了，列如我创建的sacn.vue
sacn.vue代码如下（示例）：
```c
<template>
	<view class="container">
		<mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError" :continue="false">
			<template v-slot:error>
				<view>摄像头启动失败</view>
			</template>
		</mumu-get-qrcode>
	</view>
</template>

<script>
	import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue' //引入

	
	export default {
		components: {
			mumuGetQrcode //注册
		},
		data() {
			return {
			  
			}
		},
		name: 'Qrcode',
		methods: {
			qrcodeSucess(data) { //摄像头扫码成功后返回
				console.log('摄像头扫码成功 =>', data)
				uni.showModal({
					title: '成功',
					content: data,
					success: () => {
					}
				})
			},
			qrcodeError(err) { //摄像头扫码失败返回
				uni.showModal({
					title: '摄像头授权失败',
					content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
					success: () => {
						uni.navigateBack({}) //返回到上一页
					}
				})
			}
			
		},
		onLoad() {
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100%;
	}
</style>

2.在要点击扫描的方法上，跳转到这个sacn.vue页面

scanCode() {
				uni.navigateTo({
					url: '/pages/scan/scan'
				})
	}

特别注意

因为调用了手机摄像头扫描二维码，所以只支持https域名，一开始我就是在http环境下，进入扫描时，摄像头不起作用，扫描不了，所以一定要在https域名下进行扫描。