86 lines
2.2 KiB
Markdown
86 lines
2.2 KiB
Markdown
|
## 功能描述
|
|||
|
|
根据内容生成二维码，并返回图片地址
|
|||
|
|
|
|||
|
|
## 平台兼容性
|
|||
|
|
兼容APP、H5及微信小程序。其他平台未测试
|
|||
|
|
|
|||
|
|
## 安装方式
|
|||
|
|
安装到components文件夹，支持[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)组件模式。
|
|||
|
|
|
|||
|
|
## 使用方式
|
|||
|
|
**<font color=#FF0000 >可根据属性自定义二维码</font>**
|
|||
|
|
``` javascript
|
|||
|
|
<yz-qr></yz-qr>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 属性说明
|
|||
|
|
|属性名 |类型 |默认值 |说明 |
|
|||
|
|
|-- |-- |-- |-- |
|
|||
|
|
|text |String |'hello' |二维码内容 |
|
|||
|
|
|size |Number |340 |单位是px |
|
|||
|
|
|colorDark |String |'#000000' |黑色二维码 |
|
|||
|
|
|colorLight |String |'#ffffff' |白色背景 |
|
|||
|
|
|
|||
|
|
## 示例代码
|
|||
|
|
``` javascript
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
## <font color=#FF0000 >canvas踩坑</font>
|
|||
|
|
1. uni-app中的canvas的width、height的值依赖于父元素的宽高。canvas的父级如果被隐藏。canvas的width、height则都为0。
|
|||
|
|
2. 当父元素出现，canvas的高度也就有了。但是canvas并不会绘制显示。解决方法：可以将绘制方法写在异步方法中，同时要注意组件的生命周期，确保实例挂载成功之后再执行。
|