更新记录
1.0.5(2024-10-28)
修复由工具4.31版本引起的颜色设置失效问题,注意:调整了多色的传值类型,可参照下列文档说明
1.0.4(2024-10-27)
适配hbx 4.31版本readFile接口调整引起的类型错误
1.0.3(2024-06-16)
修改文件读取API失败函数的回调参数类型
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | 9.0 | × | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | - | × | × | × | × |
uni-app x
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | 9.0 | × | - | × |
插件说明
版本说明!
由于开发工具 4.31版本会引起设置的颜色不生效,
所以为了适配这个版本,将多色传值改为16进制字符串,
例如#ffffff;可参考下列文档。
参数说明
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
content | string | - | Y | 二维码内容,有中文需要编码 |
logoPath | string | - | N | 二维码中间的logo,根据需要不设置 |
margin | string | 2 | N | 二维码四周的间隙值 |
preColor | string | #000000 | N | 二维码前景色 |
backColor | string | #ffffff | N | 二维码背景色 |
longSave | boolean | false | N | 是否开启长按保存 |
multipleColor | string[] | N | N | 自定义多色二维码,第一个参数为左上,第二个为右上,第三个为左下,第四个为右下,例如:['#000000', '#fd8f55', '#4b5d00', '#3fff00'] |
组件的使用方式
<template>
<view class="page">
<view class="qr-code">
<xwq-qrcode-view :longSave="true" content="fgsgd22222" :multipleColor="multipleColor" preColor="#ff0000" margin='1' logoPath="/static/logo.jpg" :style="{width:'200px',height:'200px'}"></xwq-qrcode-view>
</view>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
multipleColor:['#000000', '#fd8f55', '#4b5d00', '#3fff00']
}
},
methods: {
}
}
</script>
<style>
.page{
background-color:#f2f2f2;
height:100%;
}
.qr-code{
width:100%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>