更新记录

1.2.4（2026-03-08）

  • 补充说明文档

1.2.3（2026-01-17）

  • 兼容鸿蒙端

1.2.2（2026-01-05）

  • 修复安卓端缺少参数报错的问题
查看更多

平台兼容性

uni-app(4.66)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android Android插件版本 iOS iOS插件版本 鸿蒙
- - - - - - 9.0 1.0.0 12 1.2.0 11
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - - -

uni-app x(4.66)

Chrome Safari Android Android插件版本 iOS iOS插件版本 鸿蒙 微信小程序
- - 9.0 1.0.0 12 1.2.0 11 -

插件说明文档

注意：使用插件需要打自定义基座运行！

版本说明！

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

注意！IOS、鸿蒙端个别参数不支持，用法请看用例

参数说明

属性 类型 默认值 必填 描述
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']

UniappX 安卓端使用示例

<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 { QrType } from '@/uni_modules/xwq-qrcode/utssdk/interface.uts';

    export default {
        data() {
            return {
                path:''
            }
        },
        methods: {
            //创建二维码
            createQrcode(){
                let initParams={
                    width:300,
                    height:300,
                    content:'https://www.baidu.com',
                    color_BLACK:'#00ff00',
                    color_WHITE:'#ffffff',
                } as QrType;
                let that=this
                createQrcode(initParams,(result:string)=>{
                    that.path=result;
                });
            }
        }
    }
</script>

UniappX IOS端使用示例

<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 { QrType } from '@/uni_modules/xwq-qrcode/utssdk/interface.uts';

    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. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉
加载更多...