QRCode 二维码 1.1.2

手机扫码预览

13:03



---

组件名：rice-qrcode

能够将文本转换生成二维码的组件，支持自定义配色，自定义形状和 Logo 配置
使用前请先阅读FAQ

平台兼容性

uni-app x

Android	iOS	HarmonyOS	HarmonyOS(Vapor)	微信小程序	h5
√	√	√	√	√	√

基础用法

value 的值即二维码的值，值改变时，二维码会自动刷新

<rice-qrcode value="https://riceui.cn/"/>

二维码状态

可在二维码 加载中/已过期/已扫描 等状态下使用

• show-status 为 true 时可以展示二维码状态区域的view；
• status-class 可以自定义状态区域的样式，如背景色，文字对其方式等；

<template>
  <rice-qrcode :value="value" :size="200" :show-status="status!='normal'" class="custom-class"
    status-class="status-class" @complete="onComplete2">
    <template #status>
      <rice-loading v-if="status=='loading'" text="生成中…" vertical />
      <view v-else-if="status=='expire'">
        <text class="statue-text">二维码已过期</text>
        <rice-button size="small" text="点我重新生成" type="primary" @click="refreshCode"></rice-button>
      </view>
    </template>
  </rice-qrcode>
  <view class="flex">
    <rice-count-down :time="expireTime" format="ss秒" @finish="onFinish" />
    <text class="text" style="margin-left:6px"> 后二维码过期</text>
  </view>
</template>

<script setup>
const value = ref('')
const status = ref('loading')
const expireTime = ref(0)
const getQrCodeValue = () => {
  setTimeout(() => {
    value.value = 'https://riceui.cn/components/quickstart.html'
    expireTime.value = 15 * 1000
  }, 1500)
}

const onComplete2 = () => {
  status.value = 'normal'
}

const onFinish = () => {
  if (value.value != '') {
    status.value = 'expire'
  }
}

//重新生成二维码
const refreshCode = () => {
  status.value = 'loading'
  setTimeout(() => {
    value.value = `https://riceui.cn/components/count-down.html?t=${Date.now()}`
    expireTime.value = 10 * 1000
  }, 1500)

}

onReady(() => {
  getQrCodeValue()
})
</script>

<style scoped lang="scss">
.custom-class {
  border: none;
}
.status-class {
  // background-color:rgba(255,255,255,.4)
}

.statue-text {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}
</style>

API

Props

属性名	类型	说明	默认值
value	String	二维码的值
size	Number	二维码的尺寸	160
color	String	二维码颜色	#000
icon	String	logo 地址，支持本地和网络图片
icon-option	UTSJSONObject	logo的宽高	{height:30,width:30}
level	String	纠错等级 L/M/Q/H	无icon时，默认为 M，有icon时默认为 Q
auto-export	Boolean	二维码绘制完成后是否生成图片，可在complete中拿到	false
padding	Number	二维码的边距	2个色块的码边距
eye-shaper	String	码眼的形状 square\circle\round	square
dot-shape	String	点的形状 square\dot	square
show-status	Boolean	是否显示状态区域	false
status-class	String	自定义状态区域的class

Events

事件名	说明	回调参数
complete	二维码绘制完成后触发，只要二维码改变了就会触发，不管是形状还是value值	payload:QRCodeCompletePayload
error	二维码绘制失败时触发	err:QRCodeError

方法

通过 ref 可以获取到 QRCode 实例并且调用实例的方法

方法名	说明	返回值
getTempFilePath	获取二维码图片的地址	异步方法，App端返回的是临时地址，web/小程序返回的是base64 ，图片生成失败会返回空字符串

App 端返回的图片是带静区的，即 padding 的值，web/小程序不带

调用方法示例

const qrCodeRef = ref<RiceQrcodeComponentPublicInstance | null>(null)
//获取二维码图片的地址，app端返回的是临时地址，web/小程序返回的是base64
const value =await qrCodeRef.value!.getTempFilePath()

Slots 插槽

名称	说明	参数
status	自定义二维码状态	-

类型定义

组件导出如下类型

//二维码绘制完成
type QRCodeCompletePayload = {
	tempFilePath : string | null, //仅当 autoExport 为 true 时才返回字符串
	autoExport : boolean,
}

//二维码绘制失败
type QRCodeError = {
	code : number, // 0 uni.createCanvasContextAsync 失败 ,1 value 为空 2：绘制二维码失败
	errMsg : string, //错误信息
}

组件类型

// 组件类型
const qrCodeRef = ref<RiceQrcodeComponentPublicInstance | null>(null)

FAQ

关于二维码纠错等级
纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。

通常情况下二维码分为 4 个纠错级别：L级 可纠正约 7% 错误、M级 可纠正约 15% 错误、Q级 可纠正约 25% 错误、H级 可纠正约 30% 错误。但并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。 可参阅官方文档相关资料

生成的二维码无法扫描？

1. 可能是因为链接地址过长导致像素过于密集，可以通过 size 配置二维码更大，或者通过短链接服务等方式将链接变短。
   
2. 带 icon 时，纠错等级请 至少不低于 Q，目前组件内部的逻辑是：无icon时，默认为 M，有icon时默认为 Q，如果传了level，以传的为准
3. 带 icon 时不建议同时把样式做得太激进，比如同时使用很小的 padding、dot-shape="dot"、 icon尺寸过大等
4. padding 本质上是二维码静区，太小会影响扫码识别，尤其是在小尺寸、复杂背景、低端设备或相机对焦一般的情况下，如果没有特殊设计要求，建议保留默认值或只做小幅调整

怎么改变二维码父级的样式

直接在组件上使用 class 或 style 即可