更新记录

1.0.3(2022-01-17)

兼容二维码静态 / 动态赋值,优化获取二维码图片地址的方法

1.0.2(2022-01-03)

可以自定义二维码解析度

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 小红书小程序
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

功能描述

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

平台兼容性

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

安装方式

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

使用方式

可根据属性自定义二维码

<yz-qr></yz-qr>

属性说明

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

示例代码

    <template>
        <view class="content">
            <!-- .sync修饰符:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。 -->
            <yz-qr :qrPath.sync="qrPath" :text="text" :size="size" :quality="quality" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
            <view class="text">
                二维码内容:<text>{{text}}</text>
            </view>
            <view class="text">
                图片地址:<text>{{qrPath}}</text>
            </view>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                    qrPath: '',
                    text: 'hello',
                    size: 200,
                    quality:'L',
                    colorDark: '#000000',
                    colorLight: '#ffffff'
                }
            },          
            methods: {

            }
        }
    </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并不会绘制显示。解决方法:可以将绘制方法写在异步方法中,同时要注意组件的生命周期,确保实例挂载成功之后再执行。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问