生成二维码。传入链接，即可使用，可快速扫出链接

平台兼容性

前言

简介： 1.生成二维码。传入链接，即可使用，可快速扫出链接 2.可一个页面生成多个二维码 3.可定义中间图片（头像）

有疑问

微信搜索“慢慢向好”小程序，找客服反馈，相应问题。

属性说明

素材

图片资源

示例项目可直接运行

开始使用

下载源码解压，复制/components 下的组件至项目根目录的 /components 文件夹下

index.vue的script加入如下部分：

复制代码import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
    export default {        components: {
            ayQrcode,

        },
        data() {            return {                //二维码相关参数
                modal_qr: false,                url: 'https://pixabay.com/images/search/?order=ec', // 要生成的二维码值

            }
        },

        onLoad() {            let that = this;
            that.showQrcode();//一加载生成二维码

        },        methods: {            // 展示二维码
            showQrcode() {                let _this = this;                this.modal_qr = true;                // uni.showLoading()
                setTimeout(function() {                    // uni.hideLoading()
                    _this.$refs.qrcode.crtQrCode()
                }, 50)
            },            //传入组件的方法
            hideQrcode() {                this.modal_qr = false;
            },
        }

    }

index.vue的template加入如下部分(任选之一)：

(1)默认黑色二维码：

复制代码
            
        

(2)定义了颜色的二维码：

复制代码
 
            
        

(3)定义了颜色、中心图片（头像：本地图片）的二维码：

复制代码        
            
        

(4)定义了颜色、中心图片（头像：网络图片）的二维码：

复制代码        
            
        

汇总组件