hengmei-two/components/yz-qr/changelog.md

2.2 KiB
Raw Blame History

功能描述

根据内容生成二维码,并返回图片地址

平台兼容性

兼容APP、H5及微信小程序。其他平台未测试

安装方式

安装到components文件夹支持easycom组件模式。

使用方式

可根据属性自定义二维码

<yz-qr></yz-qr>

属性说明

属性名 类型 默认值 说明
text String 'hello' 二维码内容
size Number 340 单位是px
colorDark String '#000000' 黑色二维码
colorLight String '#ffffff' 白色背景

示例代码

	<template>
		<view class="content">
			<!-- 通过 ref 为子组件赋予一个 ID 引用,访问子组件实例 -->
			<yz-qr ref="qrPath" :text="text" :size="size" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
	
			<view class="text">
				二维码内容:<text>{{text}}</text>
			</view>
			<view class="text">
				图片地址:<text>{{canvasQrPath}}</text>
			</view>
		</view>
	</template>
	
	<script>
		export default {
			data() {
				return {
					canvasQrPath: '',
					text: 'hello',
					size: 200,
					colorDark: '#ff0000',
					colorLight: '#ffffff'
				}
			},
			onLoad() {
				this.getQrPath()
			},
			methods: {
				getQrPath() {
					var that = this;
					setTimeout(function() {
						that.canvasQrPath = that.$refs.qrPath.canvasQrPath;
						console.log('获取二维码地址:', that.canvasQrPath)
					}, 1000)
				}
			}
		}
	</script>
	
	<style>
		.text {
			background-color: #f3f3f3;
			margin: 24rpx;
			padding: 24rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		.text text {
			font-weight: 700;
			margin-left: 16rpx;
		}
	</style>
	
	

canvas踩坑

  1. uni-app中的canvas的width、height的值依赖于父元素的宽高。canvas的父级如果被隐藏。canvas的width、height则都为0。
  2. 当父元素出现canvas的高度也就有了。但是canvas并不会绘制显示。解决方法可以将绘制方法写在异步方法中同时要注意组件的生命周期确保实例挂载成功之后再执行。