记录--uniapp中生成二维码并展示

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

uniapp生成二维码并展示

1、下载weapp-qrcode.js文件并放在utils文件中
链接: https://pan.baidu.com/s/1VXhq3ZjxmDcH1tFujKg75Q
提取码:vj2y
2、在使用的页面引入

1
const qrCode = require('../../utils/weapp-qrcode.js')

3、template部分

1
2
3
4
5
6
7
8
9
<text @click='handleShowCodeClick'>点击出现二维码</text>
<view class="model-view" :style="showModal?'':'display:none;'">
            <view class="model-out-box">
                <view class="model-content">
                    <canvas  canvas-id="myQrcode" style="margin: 20px;"></canvas>
                </view>
                <image src="/static/image/wrong-white.png" class="wrong-img" @click="handleHideCodeClick"/>
            </view>
        </view>      

4、js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default {
        data(){
            return{
                code:'123456789',
                showModal: false,
            },
        onLoad() {
             
        },
        methods:{
            initQrCode:function(){
                new qrCode('myQrcode', {
                    text: this.code,
                    width: 160,
                    height: 160,
                    colorDark: "#333333",
                    colorLight: "#FFFFFF",
                    correctLevel: qrCode.CorrectLevel.H
                })
            },
            handleShowCodeClick:function(){
                this.showModal = true
                this.$nextTick(function(){
                    this.initQrCode()
                })
            },
            handleHideCodeClick:function(){
                this.showModal = false
            },
        }
    }

5、css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.model-view{
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: center;
    background-color:rgba(0,0,0,0.4);
}
.model-out-box{
    width: 200px;
    height: 270px;
    margin-top: 45%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.model-content{
    width: 200px;
    height: 200px;
    border-radius: 10rpx;
    background: #fff;
    display:flex;
    align-items: center;
    justify-content: center;
}
.wrong-img{
    width: 30px;
    height: 30px;
}

6、效果图

本文转载于:

https://blog.csdn.net/weixin_46899191/article/details/110162434

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

posted @   林恒  阅读(360)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
欢迎阅读『记录--uniapp中生成二维码并展示』
点击右上角即可分享
微信分享提示