uniapp 二维码展示和扫码_uniapp扫描二维码

前言

在使用 uniapp 开发 APP 或者其他小程序的时候，我们有时候会遇到这样一种场景，那就是展示二维码和扫码，那么对于初次做这个功能的前端小伙伴们来说，有可能不知道怎么进行实现，本人也是第一次做这个功能，也是完美的进行了实现，将如何实现制作二维码和扫码进行分享出来。

制作二维码

对于 uniapp 开发，我们可以去 DCloud 插件市场找各种各样的插件，在这里分享一款制作二维码的插件：二维码插件地址

首先我选择使用 HBuildreX 进行导入插件， 导入失败的注意看一下 HBuildreX 编译器的版本，升级一下，导入成功之后，项目目录下面将会多出一个 ay-qrcode 组件，然后在对应需要用到的界面使用即可。

<template>
	<view>
		<!-- 二维码 -->
		<ay-qrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//二维码相关参数
				modal_qr: false, 
				// 要生成的二维码值
				url: 'https://blog.csdn.net/weixin_53137201?type=blog', 
			};
		},
		onLoad(query) {
			let that = this
			//一加载生成二维码
			that.showQrcode() 
		},
		methods: {
			// 展示二维码
			showQrcode() {
				let _this = this;
				this.modal_qr = true;
				setTimeout(function() {
					_this.$refs.qrcode.crtQrCode()
				}, 50)
			},
			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

完成上述的配置，url 就是扫码出来的内容，到这里我们制作一个二维码就完成了，具体的参数配置，参考

扫描二维码

当我们二维码做出来之后，接下来就是扫码了，例如我当时所做的项目就是通过扫码进入群聊，加入群，这个时候 url 我放的就是当前群 id，通过扫码进行获取群 id，然后请求接口，将扫码出来的内容进行传递到请求之中然后加入群聊，在这里建议使用 uni.scanCode API 进行调用扫码功能，res.result 就是扫码出来的结果

// 扫描二维码方法
scanYard() {
	// 只允许通过相机扫码
	uni.scanCode({
		onlyFromCamera: true,
		success: (res) => {
			console.log(res.result)
		}
	});
},
1
2
3
4
5
6
7
8
9
10

总结

好了，到这里，我们就实现了一个制作二维码和扫码的功能，对于各式各样的制作二维码和扫码的功能都可以实现，可以实现扫码进入某个界面，跳转到某个连接，或者获取指定的内容请求接口。