更新记录

0.0.1（2021-08-09）

1. 符合uni_modules规范的二维码生成
2. 对使用进行详细说明

平台兼容性

wxy-code

项目需要二维码功能，开始是使用uQRCode 二维码生成插件,需要自己处理图片显示，而且调用比较麻烦，后来参考了二维码生成器 进行了封装，一个是转化为uni_modules规范，二是对代码进行了优化，三是补充了调用示例代码，解决了使用$refs调用makeCode方法是提示未定义的错误,二维码生成有两种方式：

• 组件方式：使用onval或loadMake属性来监视内容变化,简单需求推荐组件方式
• $refs方式：调用组件的makeCode方法，此时切记若是提示未定义，就需要将调用代码放置在this.$nextTick中即可解决问题

主要功能介绍

1. H5、微信小程序、支付宝小程序、APP，其它平台的小程序没有测试
2. 使用canvas生成
3. 可设置二维码背景色，前景色，角标色
4. 可设置二维码logo

示例代码

1. 场景一：页面加载即显示(固定文本)

<wxy-code val="cls20201090123" loadMake></wxy-code>

2. 场景二：页面加载即显示(文本变量)

<!-- 方法一:在onLoad中一定要使用this.$nextTick来改变,使用onval或loadMake都可以,因为$nextTick是在组件挂载mouted之前 -->
<wxy-code :val="val" loadMake></wxy-code>
<script>
export default {
    data() {
        return {
            val: '',
        };
    },
    onLoad(options) {
        this.$nextTick(()=>{
            this.val = options.qrcode;
        })
    },
};

<!-- 方法二:在onReady中改变，只能用onval，因为onReady是在组件挂载mouted之后 -->
<wxy-code :val="val" onval></wxy-code>
<script>
export default {
    data() {
        return {
            val: '',
        };
    },
    onReady:function(){
        this.val=this.qrcode;
    },
    onLoad(options) {
        this.qrcode = options.qrcode;
    },
};

3. 场景三:弹窗组件中显示二维码

说实在话，这也是测试花费时间最多的地方，上面两个官方插件市场中在这方面感觉未作详细说明，下面示例使用的是弹窗组件wxy-popup

<!-- 组件方式，要注意APP和H5要用loadMake,而小程序则要用onval -->
<template>
    <wxy-page>
        <view class="code" style="margin-top:30vh;">
            <button type="default" @click="btnPopCode">弹窗生成二维码</button>
        </view>
        <wxy-popup v-model="show" mode='center'>
            <!-- #ifdef MP -->
            <wxy-code :val="popval" onval></wxy-code>
            <!-- #endif -->
            <!-- #ifndef MP -->
            <wxy-code :val="popval" loadMake></wxy-code>
            <!-- #endif -->

        </wxy-popup>
    </wxy-page>
</template>
<script>
export default {
    data() {
        return {
            val: '',
            show: false,
        };
    },
    methods: {
        btnPopCode:function(){          
            this.val='cls2020090712789';            
            this.show=true; 
        },
    }
};
</script>

<!-- $refs方式，makeCode要放在$nextTick回调函数中才可以 -->
<template>
    <wxy-page>
        <view class="code" style="margin-top:30vh;">
            <button type="default" @click="btnPopCode">弹窗生成二维码</button>
        </view>
        <wxy-popup v-model="show" mode='center'>
            <wxy-code ref='qrcode' :val="val" ></wxy-code>
        </wxy-popup>
    </wxy-page>
</template>
<script>
export default {
    data() {
        return {
            val: '',
            show: false,
        };
    },
    methods: {
        btnPopCode:function(){          
            this.val='cls2020090712789';            
            this.$nextTick(()=>{
                this.$refs.qrcode.makeCode();
            });
            this.show=true; 
        },
    }
};
</script>

属性

方法

事件

最后要感谢原作者的分享