uniapp使用qrious.js插件生成二维码

uniapp使用qrious.js插件生成二维码

github网址 https://github.com/neocotic/qrious

在项目控制台执行命令安装插件 npm install qrious --save

二维码生成方法

<template>
	<view class="main">
		<view class="title title-img">
			<text style="border-bottom: 10rpx solid #203c42;">点击生成二维码</text>
			<image mode="aspectFill"src="../../static/images/erweima.png" @click="openQrCodeImg()"></image>
		</view>
		
		
		<image :show="invoiceInformShow" mode="aspectFit" :src="qrCodeImg"></image>
			
	</view>


</template>

<script>
	import Qrcode from 'qrious';
	export default {
		data() {

			return {
				invoiceInformShow: false,//是否打开二维码
				qrCodeImg: "",
			}
		},
		methods: {
			
			//获取二维码核心代码
			openQrCodeImg() {
				var that = this
				let qr = new Qrcode({
					size:220 ,// 尺寸大小
					mime:'image/png', // 图片类型
					value: "https://www.baidu.com",//码的内容
				});
				this.qrCodeImg = qr.toDataURL();
				this.invoiceInformShow = true
				
			},
		},
		onLoad(options) {
			
		}
	}
</script>

<style>
	
	.main {
		padding:10rpx 20rpx 20rpx 20rpx;
		background: white;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	.main  .title-img{
		position: relative;
	}
	.main  .title-img image{
		position: absolute;
		right: 10rpx;
		top: 2rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}
	
	
	.main  .title{
		font-size: 35rpx;
		border-bottom: 1rpx solid #e1e1e1;
		font-weight: bold;
		padding: 20rpx 0rpx 30rpx 0rpx;
	}
	
	
</style>

其他参数

效果图