uniapp根据输入的文本或者地址生成二维码

uniapp根据输入的文本生成二维码，效果如下所示：

 此功能的实现也是通过网上寻找代码进行实现的，主要是通过一个uqrcode.js文件进行实现的，这里我做个总结，方便自己以后使用，也为需要的小伙伴提供一个便捷使用的途径。

html代码：

<template>
	<view>
	<view class='pages'>			
			<view class='father_view'> 
				<view class='son_view'> 
				  <view class="title-bg">需要转换的文本：</view>
				  <textarea class="textarea-bg" v-model="text1" @blur="inputText"  placeholder="请在这里输入" /> 
				</view>
			</view>
			
			<!-- 二维码 -->
			<view class="qr-box">
				<canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;"/>
			</view>		
				
			<button @click='btn'>生成二维码</button>				
		</view>	
	
	</view>
</template>

<script>
	import uQRCode from '@/config/uqrcode.js' //引入uqrcode.js
		export default {
			data() {
				return {
					qrShow: false,				
					// 默认二维码链接
					text1:'http://www.baidu.com'
				}
			},
			onLoad() {
				this.btn()
			},	
			methods: {	
				//*获取文本框内容*//
				inputText:function (e) {
					this.text1 = e.detail.value	
				},
			
				//*按钮*//
				btn: function () {										
					if (this.text1 == '' ) {
						uni.showToast({  //显示对话框
							title: "请输入文本",
							icon: 'none',
							duration: 1000,
						})
					} else {
						this.qrFun(this.text1) //调用二维码方法
					}
				},
				
				//**生成二维码**//
				qrFun: function(text) {
					this.qrShow = true
					uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: this,
						text: text,
						size: 150,
						margin: 0,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'jpg',
						errorCorrectLevel: uQRCode.errorCorrectLevel.H,
						success: res => {}
					})
				}
			}
		}

</script>

<style lang="scss">
.pages {
		width: 98%;
		margin: auto;
		overflow: hidden;
	}	
	
	/* 多行文本 */
	textarea {
		width: 98%;
		height: 250rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	
	.textarea-bg {
		width: 94%;
		border-style: solid;
		border-color: #ff007f;
		font-size: 32rpx;
	}
	
	button {
		width: 80%;
		margin-top: 180rpx;
		background-color: #ffaa00;
	}
	
	.qr-box {
		width: 400rpx;
		height: 460rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

</style>

接下来是封装好的uqrcode代码，这个代码文件过于长了，所以我直接放在网盘了，需要的小伙伴自己下载引入就好了。

地址：链接：https://pan.baidu.com/s/1aqmIcr8oR9RLKEWGBOaf1A 
提取码：tw7m