uniapp链接生成二维码

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

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

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

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

<view style="margin: 40upx;">
     <ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode"                     
      :height="300" :width="300" />
 </view>


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单位就行了。

        或者自己改样式。

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值