uniapp链接生成二维码

。找了一下午的插件,不是教程太笼统,就是各种报错,最终用的是插件ay-qrcode。

。下载地址 生成二维码。传入链接,即可使用,可快速扫出链接 - DCloud 插件市场

。教程作者写的很详细,附链接  https://ext.dcloud.net.cn/plugin?id=3870

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


     
 


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;
            },
        }

    }

!!!url:传入需要生成二维码的链接。

。二维码不居中

        评论里的解决办法是:二维码不居中,二维码在不是750像素手机上不能居中问题找到了,源码里宽高用px单位就行了。

        或者自己改样式。

你可能感兴趣的:(javascript,前端框架)