更新记录

1.0.0 下载此版本

1.0.0

平台兼容性

云端兼容性

uni-app(4.06)

uni-app x(4.06)

Poster-Code 二维码组件

poster-code 是一个用于生成和显示二维码的组件，支持自定义大小、颜色、添加Logo等功能。该组件基于Canvas绘制，支持多平台使用。

特性

• 生成高质量二维码
• 支持自定义二维码大小
• 支持自定义前景色和背景色
• 支持在二维码中间添加Logo图片
• 支持长按保存二维码
• 支持预览二维码
• 兼容多平台（H5、App、小程序等）

安装

在项目中导入 poster-ui 模块即可使用。

属性说明

事件

使用示例

基础用法

<template>
  <view>
    <poster-code :cid="'qrcode1'" :size="150" val="https://example.com"></poster-code>
  </view>
</template>

<script>
export default {
  // ...
}
</script>

带Logo的二维码

<template>
  <view>
    <poster-code 
      :cid="'qrcode2'" 
      :size="150" 
      val="https://example.com" 
      :icon="logo">
    </poster-code>
  </view>
</template>

<script setup>
import logo from '@/static/logo.png';
</script>

自定义颜色

<template>
  <view>
    <poster-code 
      :cid="'qrcode3'" 
      :size="150" 
      val="https://example.com" 
      background="#f0f0f0" 
      foreground="#007AFF">
    </poster-code>
  </view>
</template>

完整示例

<template>
  <view class="container">
    <view class="qrcode-item">
      <text class="title">基础二维码</text>
      <poster-code 
        :cid="'qrcode1'" 
        :size="150" 
        val="https://example.com">
      </poster-code>
    </view>

    <view class="qrcode-item">
      <text class="title">带Logo的二维码</text>
      <poster-code 
        :cid="'qrcode2'" 
        :size="150" 
        val="https://example.com" 
        :icon="logo">
      </poster-code>
    </view>

    <view class="qrcode-item">
      <text class="title">自定义颜色的二维码</text>
      <poster-code 
        :cid="'qrcode3'" 
        :size="150" 
        val="https://example.com" 
        background="#f0f0f0" 
        foreground="#007AFF">
      </poster-code>
    </view>
  </view>
</template>

<script setup>
import logo from '@/static/logo.png';
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.qrcode-item {
  margin-bottom: 30px;
}
.title {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}
</style>

注意事项

1. 在同一页面使用多个二维码组件时，需要为每个组件设置不同的cid
2. Logo图片建议使用透明背景的PNG图片
3. 当设置了Logo时，建议提高二维码的容错级别（lv属性）
4. 在小程序环境中使用时，需要注意小程序对Canvas的限制

方法

组件内部提供了一些方法，可以通过ref调用：

• _makeCode(): 手动生成二维码
• _clearCode(): 清除二维码
• _saveCode(): 保存二维码到相册