需求

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域名下进行扫描。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐