更新记录
1.0.2(2024-04-09)
增加多色自定义配置
1.0.1(2023-12-25)
增加保存图片获取相册权限处理
1.0.0(2023-12-22)
初始化
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.07,Android:9.0,iOS:不支持 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
xwq-qrcode-view
参数说明
属性 |
类型 |
默认值 |
必填 |
描述 |
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 |
自定义多色二维码,第一个参数为左上,第二个为右上,第三个为左下,第四个为右下 |
组件的使用方式
<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:['0xff000000','0xfffd8f55','0xff4b5d00','0xff3fff00']
}
},
methods: {
}
}
</script>
<style>
.page{
background-color:#f2f2f2;
height:100%;
}
.qr-code{
width:100%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>