uni-app二维码生成，点击按钮展示二维码

前言

提示：这里可以添加本文要记录的大概内容：

大致就是点击按钮显示二维码，然后不同按钮代表不同的支付方式，展示二维码也不同

提示：以下是本篇文章正文内容，下面案例可供参考

一、首先我用的是HBuilderX，新建uni-app项目

HBuilderX相对新手来说还是比较简单易上手的

二、使用步骤

1.先下载插件uQRCode

https://ext.dcloud.net.cn/plugin?id=1287安装到项目里就可以了

2.新建个在index里新建个页面

代码如下：

在这里插入图片描述

<template>
	<view class="content" style="background-color: #007AFF;">
		<view class="qrcode">
			<uqrcode ref = "uQRCode" :mode="mode" :text="text" :size="size" :margin="margin" :backgroundColor="backgroundColor" 
			:foregroundColor="foregroundColor" :errorCorrectLevel="errorCorrectLevel" :typeNumber="typeNumber" :fileType="fileType"/>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode'
	export default {
		data(){
			return{
				mode: 'view',
				text: 'http://www.baidu.com',
				size: 256,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				typeNumber: -1,
				fileType: 'png',
				defaultErrorCorrectLevel: uQRCode.errorCorrectLevel
			}
		}
	}
</script>
<style>
	.qrcode {
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  width: 750rpx;
	  padding: 32rpx 0;
	  background-color: #F0F0F0;
	}
</style>

大概就是uqrcode参数都在data里写好就行了，然后调用就好。

俩个按钮点击展示不同二维码，我是这样写的，这里用到一个一个组件popup弹出层，我把二维码放到popup里，因为是点击按钮展示嘛。然后给按钮添加点击事件，点击事件里把二维码的url放入就可以了，然后展示一下。

总结

以上就是花了俩天时间做出来的内容，因为一开始不知道怎么做，看了许多博客，看了个大概，有的是完全自己去写那个二维码，一块一块写，代码冗杂，能看明白是干嘛，但是自己写的话就不好说了，相对来说，这个插件还是很好用的，不会太麻烦，写入参数就可以了。要注意的就是mode里的兼容模式，这个根据自己情况而定，基本就是这样，细节问题可以去看看uqrcode插件的代码示例 / 概述。