更新记录

1.0.6(2021-11-19) 下载此版本

优化了logo和背景对网络图片的支持,可以直接使用网络图片作为logo或背景图案了

1.0.5(2021-06-28) 下载此版本

修复:1.0.4版本小程序不生成二维码的BUG,目前测试了H5、APP、快应用和各平台小程序,只有QQ小程序暂不支持同页面生成多个二维码。具体原因是不支持动态canvas-id,也不支持同页面多个组件中使用相同的canvas-id。。有好的建议,欢迎留言,或加QQ共同探讨

1.0.4(2021-06-28) 下载此版本

修复:1.0.3更新后引发的小程序不能生成二维码的BUG,目前只测试了微信小程序,其他的小程序如有遇到问题在评论区提交问题

查看更多

平台兼容性

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

二维码组件

组件名:yuanqi-qr-code

组合框组件。

平台兼容性说明

暂不支持nvue

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

基本用法

template 中使用组件

<yuanqi-qr-code 
    ref="yuanqiQRCode"
    :text="text"
    :color="color"
    :bgColor="bgColor" 
    :logo="logo"
    :bgImg="bgImg" 
    :size="size" 
    :borderSize="borderSize" 
    :fileType="fileType"
    :correctLevel="correctLevel" 
    @onPainted='onPainted'
    @onMakeImged='onMakeImged'></yuanqi-qr-code>

API

yuanqi-qr-code Props

属性名 类型 默认值 说明
text String - 二维码内容
color String #000000 前景颜色(任意有效果颜色格式,rgb、rgba)
bgColor String #FFFFFF 背景颜色(任意有效果颜色格式,rgb、rgba),透明背景设置为:transparent或rgba(0,0,0,0)
logo String - 中间logo图片(支持网络图片,小程序下需先配置download域名白名单才能生效。)
bgImg String - 背景图片(设置了背景图片,背景颜色属性会自动更换成透明,支持网络图片,小程序下需先配置download域名白名单才能生效。)
size Number 256 二维码大小(单位:rpx)
borderSize Number 38 二维码边框大小(单位:rpx)
fileType String png 图片输出格式
correctLevel Number/String H 纠错等级,包含 LMQH 四个级别,L: 最大 7% 的错误能够被纠正;M: 最大 15% 的错误能够被纠正;Q: 最大 25% 的错误能够被纠正;H: 最大 30% 的错误能够被纠正。L与数值1相同,M与数值0相同,Q与数值3相同,H与数值2相同,

yuanqi-qr-code Events

事件称名 说明 返回值
@onPainted 二维码绘制完成事件 -
@onMakeImged 生成图片完成事件 图片临时路径

组件示例

<template>
    <view class="yuanqi-qrcode">
        <yuanqi-qr-code ref="yuanqiQRCode" :fileType="fileType" :correctLevel="correctLevel" :logo="logo" :size="size"
        @onPainted='onPainted' @onMakeImged='onMakeImged' :borderSize="borderSize" :bgImg="bgImg" :color="color" :bgColor="bgColor" :text="text"></yuanqi-qr-code>
        <view class="controller">
            <view class="title">
                <text>参数</text>
            </view>
            <view class="row">
                <text>内容:</text>
                <view class="row-right">
                    <input type="text" v-model="text" placeholder="内容" />
                </view>
            </view>
            <view class="row">
                <text>Logo:</text>
                <view class="row-right">
                    <input type="text" v-model="logo" placeholder="logo Url" />
                </view>
                <button type="warn" size="mini" @click="chooseLogo">选择LOGO</button>
            </view>
            <view class="row">
                <text>背景图片:</text>
                <view class="row-right">
                    <input type="text" v-model="bgImg" placeholder="bgImg Url" />
                </view>
                <button type="primary" size="mini" @click="chooseBgImg">选择背景图片</button>
            </view>
            <view class="row">
                <view class="row">
                    <text>前景颜色:</text>
                    <view class="row-right">
                        <input type="text" v-model="color" placeholder="前景颜色" />
                    </view>
                </view>
                <view class="row">
                    <text>背景颜色:</text>
                    <view class="row-right">
                        <input type="text" v-model="bgColor" placeholder="背景颜色" />
                    </view>
                </view>
            </view>
            <view class="row">
                <text>容错等级:</text>
                <view class="row-right">
                    <picker mode="selector" :value="correctLevel" :range="correctLevelList"
                        @change="correctLevelChange">
                        <view>{{correctLevel}}</view>
                    </picker>
                </view>

            </view>
            <view class="row">
                <text>输出图片格式:</text>
                <view class="row-right">
                    <picker mode="selector" :value="fileTypeList.indexOf(fileType)" :range="fileTypeList"
                        @change="fileTypeChange">
                        <view>{{fileTypeList[fileTypeList.indexOf(fileType)]}}</view>
                    </picker>
                </view>
            </view>
            <view class="row">
                <text>二维码大小:</text>
                <view class="row-right">
                    <slider max="680" :value="size" :show-value="true" @change="sizeChange" />
                </view>

            </view>
            <view class="row">
                <text>边框大小:</text>
                <view class="row-right">
                    <slider max="60" :show-value="true" :value="borderSize" @change="borderSizeChange" />
                </view>
            </view>
        </view>
        <button type="default" @click="make">生成</button>
        <button type="default" @click="save">保存到相册</button>
        <button type="default" @click="clear">清除</button>
        <button type="default" @click="test">生成多个二维码演示</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                text: "https://uniapp.dcloud.net.cn",
                size: 256,
                logo: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9a952c80-6080-11eb-a16f-5b3e54966275.png",
                bgColor: "#FFFFFF",
                color: "#000000",
                correctLevel: "H",
                correctLevelListIndex:3,
                borderSize: 90,
                bgImg: "https://img0.baidu.com/it/u=2999772846,389396931&fm=26&fmt=auto",
                fileType: "png",
                fileTypeList: ['png', 'jpg'],
                correctLevelList: ["L(7%)", "M(15%)", "Q(25%)", "H(30%)"]
            };
        },
        methods: {
            test(){
                uni.navigateTo({
                    url:'/pages/mulit/mulit'
                })
            },
            save() {
                this.$refs.yuanqiQRCode.save()
            },
            make() {
                this.$refs.yuanqiQRCode.make()
            },
            clear() {
                this.$refs.yuanqiQRCode.clear()
            },
            correctLevelChange(e) {
                const index=e.detail.value
                this.correctLevel = this.correctLevelList[index].charAt(0)
                this.correctLevelListIndex=index
            },
            fileTypeChange(e) {
                this.fileType = this.fileTypeList[e.detail.value]
            },
            sizeChange(e) {
                this.size = e.detail.value
            },
            borderSizeChange(e) {
                this.borderSize = e.detail.value
            },
            chooseLogo() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        this.logo = res.tempFilePaths[0]
                    }
                })
            },
            chooseBgImg() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        this.bgImg = res.tempFilePaths[0]
                    }
                })
            },
            onPainted(){

            },
            onMakeImged(e){

            }
        }
    }
</script>

<style lang="scss">
    .title {
        text-align: center;
        background-color: #333;
        color: #fff;
        font-size: 18px;
        padding: 5px;
        margin-top: 5px;
    }

    .row {
        display: flex;
        flex-direction: row;
        margin: 5px;
        border-bottom: 1px solid #999;
        &-right {
            flex: 1;
            padding: 0 5px;
            margin: 0 10px;
        }
    }
</style>

只测试了google、firefox、微信浏览器、手机浏览器、微信小程序、安卓APP,目前没有发现问题 如果发现问题或有好的建议和不明白的地方可以加QQ交流一下,联系方式:QQ:85308607。

隐私、权限声明

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

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

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

许可协议

MIT协议

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