更新记录
1.2.0(2025-02-26)
支持ios端
1.1.0(2024-10-28)
修复由工具4.31版本引起的颜色设置失效问题,注意:调整了多色的传值类型,可参照下列文档说明
1.0.10(2024-10-27)
适配hbx 4.31版本readFile接口调整引起的类型错误
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.52,Android:9.0,iOS:9,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
插件说明
版本说明!
由于开发工具 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 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',
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 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>