记录--uniapp中生成二维码并展示

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

uniapp生成二维码并展示

1、下载weapp-qrcode.js文件并放在utils文件中
链接: https://pan.baidu.com/s/1VXhq3ZjxmDcH1tFujKg75Q
提取码：vj2y
2、在使用的页面引入

const qrCode = require('../../utils/weapp-qrcode.js')

3、template部分

<text @click='handleShowCodeClick'>点击出现二维码</text>
<view class="model-view" :style="showModal?'':'display:none;'">
			<view class="model-out-box">
				<view class="model-content">
					<canvas  canvas-id="myQrcode" style="margin: 20px;"></canvas>
				</view>
				<image src="/static/image/wrong-white.png" class="wrong-img" @click="handleHideCodeClick"/>
			</view>
		</view>		

4、js部分

export default {
		data(){
			return{
				code:'123456789',
				showModal: false,
			},
		onLoad() {
			
		},
		methods:{
			initQrCode:function(){
				new qrCode('myQrcode', {
					text: this.code,
					width: 160,
					height: 160,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			handleShowCodeClick:function(){
				this.showModal = true
				this.$nextTick(function(){
					this.initQrCode()
				})
			},
			handleHideCodeClick:function(){
				this.showModal = false
			},
		}
	}

5、css部分

.model-view{
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display:flex;
	justify-content: center;
	background-color:rgba(0,0,0,0.4);
}
.model-out-box{
	width: 200px;
	height: 270px;
	margin-top: 45%;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.model-content{
	width: 200px;
	height: 200px;
	border-radius: 10rpx;
	background: #fff;
	display:flex;
	align-items: center;
	justify-content: center;
}
.wrong-img{
	width: 30px;
	height: 30px;
}

6、效果图

本文转载于：

https://blog.csdn.net/weixin_46899191/article/details/110162434

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。