更新记录

1.0.7（2021-04-02）

二维码校正及时更新

1.0.6（2021-04-01）

解决部分安卓手机显示不全的问题：长按矫正一次解决

1.0.5（2021-03-23）

小程序保存图片无边框

平台兼容性

前言

简介： 1.生成二维码。传入链接，即可使用，可快速扫出链接 2.可一个页面生成多个二维码 3.可定义中间图片（头像）

有疑问

微信搜索“慢慢向好”小程序，找客服反馈，相应问题。

属性说明

素材

图片资源

示例项目可直接运行

开始使用

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

index.vue的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;
            },
        }

    }

index.vue的template加入如下部分(任选之一)：

(1)默认黑色二维码：

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

(2)定义了颜色的二维码：

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

(3)定义了颜色、中心图片（头像：本地图片）的二维码：

        <view style="margin: 40upx;">
            <ayQrcode ref="qrcode3" qrcode_id="qrcode3" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300"
             themeColor="#dd524d" 
             :is_themeImg="true"
              themeImg="../../static/logo.png"
              :h_w_img="40" 
              />
        </view>

(4)定义了颜色、中心图片（头像：网络图片）的二维码：

        <view style="margin: 40upx;">
            <ayQrcode ref="qrcode4" qrcode_id="qrcode4" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300"
             themeColor="#ddd890" 
             :is_themeImg="true"
              themeImg="https://cdn.pixabay.com/photo/2016/11/29/13/24/balloons-1869816__340.jpg"
              :h_w_img="40" 
              />
        </view>

汇总组件

组件汇总

其他有意思组件

动画效果之跳跃（抽奖）

参考链接

参考链接 参考链接 参考链接 参考链接 参考链接 参考链接