uniapp 微信小程序生成二维码

---

uniapp生成二维码

uniapp生成二维码`

最近在写需求的时候遇到了展示二维码入口，扫码后申请获取微信头像数据、微信名称上传至服务器作为待审核员工信息的需求

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

一、二维码实习图

参考了https://blog.csdn.net/lemontealin/article/details/104437584
这篇文章并做了修改，要想实现二维码的生成的话是需要引用相应插件的，
这个插件的作者是echo，echo写了整个Thor UI组件，我个人很佩服他，喜欢他的可以去Thor UI网站看看，学习一下。
1）首先下载你需要下载weapp-qrcode.js（百度网盘下载链接：链接：https://pan.baidu.com/s/1VXhq3ZjxmDcH1tFujKg75Q
提取码：vj2y）
（2）在你的uni-app项目中需要的地方引入下载的weapp-qrcode.js文件。在标签中引入，如下

const qrCode = require(‘@/common/weapp-qrcode.js’)

二、使用步骤

1.引入库

代码如下（示例）：

<template>
	<view class="pages">
		<view class="ame-1">邀请员工扫码</view>
		<view class="ame-2">
			<view class="ame-3">
				<view>
					<view class="qrcode">
						<canvas style="width: 200upx;height: 200upx;" canvas-id="couponQrcode"></canvas>
					</view>
					<view class="title">
						{{ame1.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- <canvas  ref="canvas" canvas-id="qrcode" style="width: 180px;height:180px;" class="canvas" id="qrcode"></canvas>
 -->
	</view>
</template>

<script>
	/* 	import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/u-qrcode/u-qrcode.js' */
	const qrCode = require('@/weapp-qrcode.js')
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			setTimeout(() => {
				this.couponQrCode()
			}, 50)
		},
		methods: {


			ame1: {
				name: "刘勇发",

			},

			couponQrCode() {
				new qrCode('couponQrcode', {
					text: "https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=csdn",
					// http://192.168.1.98:8080/pages/Index/Employeegl/noshenhe/noshenhe
					// /* http://192.168.1.98:8080/pages/Index/Employeegl/noshenhe/Addemployee/Addemployee */
					width: 100,
					height: 100,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},

			/* async make() {
							// 可以在这加一个loading状态
							await uQRCode.make({
								canvasId: 'qrcode',
								componentInstance: this,
								text: this.userInfo.useradd, // 这里是你二维码生成的url 替换即可
								size: 180,
								margin: 5,
								backgroundColor: '#ffffff',
								foregroundColor: '#000000'
							})
							// loading状态在二维码生成后关闭
						},
			 */
			/* onLoad() {
				//请求轮播图数据
				var me = this;
				//#ifdef APP-PLUS || MP-WEIXIN
				//在页面创建的时候，创建一个临时动画对象
				this.animation = uni.createAnimation();
				//#endif
				var serverUrl = me.serverUrl;
			
				uni.request({
					url: 'http://127.0.0.1:4523/m1/1021833-0-default/api/v1/merchant/1',
					method: "GET",
					
					success: (res) => {               //这是一个箭头函数
						console.log("res--->", res)   //看网络那里预览res下的参数
						//debugger;
						//获取真实数据之前，务必判断状态是否为200
						// if (res.data.sattus == 200) {\
						var Details = res.data.data;
							this.Details = Details;  //data里面定义的detail，则是this.detil
						console.log('Details', me.Details);
						// }
			
						this.text = 'request success';
					}
				});
				}, */



		}
	}
</script>

<style>
	.ame-1 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30upx;

		padding: 70upx;

	}

	.ame-3 {

		display: flex;
		justify-content: center;
		align-items: center; 

	}

	.qrcode {
		padding: 50upx 0 20upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		text-align: center;
	}
</style>

总结

要引用相对于的组件，才能实现。