更新记录

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，目前只测试了微信小程序，其他的小程序如有遇到问题在评论区提交问题

平台兼容性

二维码组件

组件名：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

yuanqi-qr-code Events

组件示例

<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。