<返回

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

时间:2022-09-20
介绍 同类 热门
应用介绍

平台兼容性

前言

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

有疑问

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

属性说明

属性类型说明
urlNumber生成二维码的url链接
widthNumber宽,单位px
heightNumber高,单位px
themeColorString二维码颜色,默认#333333
qrcode_idString二维码的id,默认qrcode_id,用于一个页面生成多个码
is_themeImgBoolean是否有中间图片(头像等),默认没有
themeImgString中间图片地址(可本地图片,可网络图片-微信小程序需配置download域名白名单)
h_w_imgNumber图片宽高,单位px
width_imgNumber宽,单位px,已弃
height_imgNumber高,单位px,已弃

素材

图片资源

示例项目可直接运行

开始使用

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

index.vuescript加入如下部分:

复制代码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.vuetemplate加入如下部分(任选之一):

(1)默认黑色二维码:

复制代码
            
        

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

复制代码
 
            
        

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

复制代码        
            
        

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

复制代码        
            
        

汇总组件


同类推荐
热门推荐
最新文章
网友评论