更新记录

1.1.0(2024-10-28)

修复由工具4.31版本引起的颜色设置失效问题,注意:调整了多色的传值类型,可参照下列文档说明

1.0.10(2024-10-27)

适配hbx 4.31版本readFile接口调整引起的类型错误

1.0.9(2024-06-16)

修改文件读取API失败函数的回调参数类型

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.31,Android:9.0,iOS:不支持,HarmonyNext:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

插件说明

版本说明!

 由于开发工具 4.31版本会引起设置的颜色不生效,
 所以为了适配这个版本,将多色传值改为16进制字符串,
 例如#ffffff;可参考下列文档。

参数说明

属性 类型 默认值 必填 描述
width number - Y 二维码宽度
height number - Y 二维码高度
content string - Y 二维码内容,有中文需要编码
logoPath string - N 二维码中间的logo,根据需要不设置
margin string 2 N 二维码四周的间隙值
color_BLACK string #000000 N 二维码前景色
color_WHITE string #ffffff N 二维码背景色
multipleColor string[] N N 自定义多色二维码,第一个参数为左上,第二个为右上,第三个为左下,第四个为右下,例如:['#000000', '#fd8f55', '#4b5d00', '#3fff00']

使用示例

<template>
    <view class="page">
        <view id="content">
            <button @click="createQrcode">创建二维码</button>
        </view>
        <view class="pic-wrap">
            <view :style="{width:'200px'}">
                <image class="pic" :src="path" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script lang="uts">
    import {createQrcode} from '../../uni_modules/xwq-qrcode';
    import type {QrType} from '../../uni_modules/xwq-qrcode';

    export default {
        data() {
            return {
                path:''
            }
        },
        methods: {
            //创建二维码
            createQrcode(){
                let initParams={
                    width:300,
                    height:300,
                    content:'https://www.baidu.com',
                    logoPath:'/static/logo.jpg',
                    margin:'2',
                    color_BLACK:'#00ff00',
                    color_WHITE:'#ffffff',
                    multipleColor:['#000000', '#fd8f55', '#4b5d00', '#3fff00']
                } as QrType;
                let that=this
                createQrcode(initParams,(result:string)=>{
                    that.path=result;
                });
            }
        }
    }
</script>

隐私、权限声明

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

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

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

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