更新记录

1.0.3(2023-08-05) 下载此版本

支持websocket流式响应。 支持微信小程序和抖音小程序平台。 支持微信支付功能,任务系统,推广系统。

技术: 前端:uniapp uview 后端:PHP mysql


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

前言

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

有疑问

微信搜索“AI写作工具旗舰版”小程序,找客服反馈,相应问题。

属性说明

属性 类型 说明
url Number 生成二维码的url链接
width Number 宽,单位px
height Number 高,单位px
themeColor String 二维码颜色,默认#333333
qrcode_id String 二维码的id,默认qrcode_id,用于一个页面生成多个码
is_themeImg Boolean 是否有中间图片(头像等),默认没有
themeImg String 中间图片地址(可本地图片,可网络图片-微信小程序需配置download域名白名单)
h_w_img Number 图片宽高,单位px
width_img Number 宽,单位px,已弃
height_img Number 高,单位px,已弃

素材

图片资源

示例项目可直接运行

开始使用

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

index.vuescript加入如下部分:

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.vuetemplate加入如下部分(任选之一):

(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>

汇总组件

组件汇总

其他有意思组件

动画效果之跳跃(抽奖)

参考链接

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问