网页获取微信信息——js使用插件生成二维码（1）

靠谱6

于 2021-12-28 15:59:28 发布

阅读量537

点赞数

本文链接：https://blog.csdn.net/m0_38135164/article/details/122194788

版权

js使用插件生成二维码：

一、安装依赖：

npm i qrcodejs2 -S

二、放置二维码的容器,需要给一个ref

<div class="QRcodeCon">
    <!-- 放置二维码的容器,需要给一个ref -->
    <div id="qrcode" ref="qrcode"></div>
</div>

三、设置显示样式：

.QRcodeCon {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        #qrcode {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    }

四、生成二维码

created() {
        this.wxLogin();
    },

    // 组件方法
    methods: {
        wxLogin() {
            this.qrcode =
                'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7e31324eb53276f9&redirect_uri=http%3A%2F%2F10.86.19.116%3A8090%2F%2FwxAuth%2FcallBack&response_type=code&scope=snsapi_userinfo&state=123&connect_redirect=1#wechat_redirect';
            // 使用$nextTick确保数据渲染
            this.$nextTick(() => {
                this.crateQrcode();
            });
        },
        // 生成二维码
        crateQrcode() {
            this.qr = new QRCode('qrcode', {
                width: 200,
                height: 200, // 高度
                text: this.qrcode, // 二维码内容
                //colorDark: 'yellow',
                //colorLight: 'red',
                correctLevel: QRCode.CorrectLevel.H,
            });
        },
    }

五、完成显示到页面