uniapp 生成二维码

本文出自：https://www.cnblogs.com/2186009311CFF/p/14261604.html

uniapp 生成二维码插件：https://ext.dcloud.net.cn/plugin?id=3870

公司的二维码链接有加密，原先的uniapp是生成二维码的插件，扫码反应太慢，故在网上搜索，整理此插件，最新的请移步插件市场。

<template>
    <view>
        <view style="margin-top: 26upx;margin: 40upx;">
            <ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" />
        </view>
    </view>
</template>

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

    }
</script>

<style lang="scss">
</style>

 

所需的js文件，请在插件链接获取：https://ext.dcloud.net.cn/plugin?id=3870

 

<template>
    <view :class="modal?'show':'hide'">
        <view :style="{'margin-left':  marginLeft + 'px'}">
            <canvas class="canvas" style="width: 550rpx;height: 550rpx;" :canvas-id="qrcode_id"></canvas>
            <!-- <image mode="scaleToFill" :src="imagePath"></image> -->
        </view>
    </view>
</template>

<script>
    var qr_we = require("./qrcode_wx.js");
    const qrCode = require('./weapp-qrcode.js')
    export default {
        data() {
            return {
                show: true,
                imagePath: '',
                qrcode_id: 'qrcode_id',
                marginLeft : 0,
            }
        },
        props: {
            modal: {
                type: Boolean,
                default: false
            },
            url: {
                type: String,
                default: ''
            }
        },
        created: function() {
            let _this = this ;
            try {
                let isAndroid = false ;
                const res = uni.getSystemInfoSync();
                if(res.platform == 'android'){
                    isAndroid = true ;
                }else{
                    isAndroid = false ;
                }
                //app苹果二维码不居中
                //#ifdef APP-PLUS
                if (!isAndroid) {
                    _this.marginLeft = 46;
                }
                // #endif
                
            } catch (e) {
                // error
            }
            
            //#ifdef MP-WEIXIN
            _this.marginLeft = 40;
            // #endif
            
        },
        methods: {
            
            hideQrcode() {
                this.$emit("hideQrcode")
            },
            // 二维码生成工具
            crtQrCode() {
                let _this = this;
                //#ifndef MP-WEIXIN
                new qrCode(_this.qrcode_id, {
                    text: this.url,
                    width: 260,
                    height: 260,
                    colorDark: "#333333",
                    colorLight: "#FFFFFF",
                    correctLevel: qrCode.CorrectLevel.H
                })
                // #endif
                //#ifdef MP-WEIXIN
                _this.createQrCode(this.url, _this.qrcode_id, 260, 260);
                // #endif
            },
            //#ifdef MP-WEIXIN

            createQrCode: function(url, canvasId, cavW, cavH) {
                //调用插件中的draw方法，绘制二维码图片
                qr_we.api.draw(url, canvasId, cavW, cavH, this, this.canvasToTempImage);
                // setTimeout(() => { this.canvasToTempImage();},100);

            },
            //获取临时缓存照片路径，存入data中
            canvasToTempImage: function() {
                var _this = this;
                // uni.canvasToTempFilePath({
                //     canvasId: _this.qrcode_id,
                //     success: function(res) {
                //         var tempFilePath = res.tempFilePath;
                //         console.log(tempFilePath);
                //         _this.imagePath = tempFilePath;
                //     },
                //     fail: function(res) {
                //         console.log(res);
                //     }
                // }, _this);
            },
            // #endif
        },
        mounted() {}
    }
</script>

<style scoped lang="scss">
    .qrcode-box {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        width: 100vw;
        background-color: rgba(59, 59, 59, 0.6);
        // opacity: 0.8;
        text-align: center;
        display: flex;
        align-items: center;
        display: none;

        .qrcode-item {
            flex: 1;
            position: relative;
            text-align: center;

            .item-box {
                width: 90%;
                margin: auto;
                display: inline-block;
                margin-top: 30%;
                padding-bottom: 30rpx;

                // animation: show 0.7s;
                .title {
                    font-size: 46rpx;
                    text-align: center;
                    margin-bottom: 24rpx;
                }

                .canvas {
                    margin: auto;
                    display: inline-block;
                    margin: auto;
                }

                background-color: #FFFFFF;
            }

        }
    }

    .opacity {
        opacity: 0;
        display: block;
    }

    .show {
        display: block;
        animation: fade 0.7s;

        // -moz-animation: fade 0.5s; /* Firefox */
        // -webkit-animation: fade 0.5s; /* Safari 和 Chrome */
        // -o-animation: fade 0.5s;
    }

    .hide {
        animation: hide 0.7s;
    }

    @keyframes fade {
        from {
            opacity: 0.8;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes hide {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
</style>

 

 

参考链接：https://www.cnblogs.com/chenjianbao/p/13594687.html

微信小程序生成：https://www.cnblogs.com/zitjubiz/p/10019789.html