ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uniapp 将 url 地址转化为二维码展示

2021-06-01 16:30:16  阅读:421  来源: 互联网

标签:uniapp qr flex url 100% qrious 二维码


文章目录

项目需求

uniapp 开发 H5 过程中会有邀请、分享等相关的需求。邀请与分享的 url地址 要以 二维码 的形式进行展示,并且 url地址 是动态可变化。

解决问题

1. qrious.js插件

npm 中有一个叫 Qrious 二维码生成插件;

npm install qrious --save

2. 简单认识 qrious 配置参数

参数类型默认值说明
valueString需要编码为二维码的值、url字符
sizeNumber100二维码的尺寸,单位像素
levelStringL二维码的误差校正级别(L, M, Q, H)
mimeStringimage/png二维码输出为图片时的MIME类型
foregroundStringblack二维码的前景颜色
backgroundStringwhite二维码的背景颜色

3.现实二维码生成

话不多说看代码:

<template>
	<view class="content">
		<view class="popup" v-if="show">
			<view style="position: relative;" @tap="show = false">
				<image :src="qrCodeImage" class="custom-qrcode" />
			</view>
		</view>
		<button @tap="getQriousCode" v-else>立即邀请</button>
	</view>
</template>
<script>
	import Qrcode from 'qrious';
	export default {
		data() {
			return {
				title: 'Hello',
				show: false,
				qrCodeImage: ''
			}
		},
		methods: {
			getQriousCode() {
				this.show = true;
				let qr = new Qrcode({
					value: "www.baidu.com"
				});
				this.qrCodeImage = qr.toDataURL();
			},
		}
	}
</script>
<style>
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}

	.popup {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(135, 135, 135, 0.6);
	}

	.custom-qrcode {
		width: 300rpx;
		height: 300rpx;
	}
</style>

在这里插入图片描述

4. 核心代码

根据需求改变相关参数,获得想要的结果。

getQriousCode() {
	this.show = true;
	let qr = new Qrcode({
		value: "https://blog.csdn.net/weixin_49175501", // url地址
		background:'white', // 背景色
		foreground:'#8dc63f' ,// 二维码颜色
		level:'L', // 二维码复杂程度
		size:200 ,// 尺寸大小
		mime:'image/png' // 图片类型
	});
	this.qrCodeImage = qr.toDataURL();	// 生成url图片	
},

在这里插入图片描述


有疑惑的小伙伴,可能是我表达不清楚,可以留言讨论,如有错误,也希望大家不吝指出。

标签:uniapp,qr,flex,url,100%,qrious,二维码
来源: https://blog.csdn.net/weixin_49175501/article/details/117445550

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有