uniapp 插件 uqrcode 如何控制二维码大小？

在uniapp中使用uqrcode插件生成二维码时，如何调整二维码的尺寸？我尝试修改width和height参数但效果不明显，是否有其他属性或方法可以精确控制二维码的显示大小？希望了解具体代码示例和注意事项。

2 回复

在uqrcode中，通过size参数控制二维码大小。例如：new UQRCode().make({ size: 200 })，数值越大二维码越大。


在 uniapp 中使用 uqrcode 插件控制二维码大小，主要通过以下方式实现：

核心方法： 在调用 uqrcode.make() 时传入 size 参数即可控制二维码尺寸。

示例代码：

// 引入 uqrcode
import UQRCode from '@/js_sdk/uqrcode/uqrcode.js'

// 创建二维码
createQRCode() {
  // 实例化UQRCode
  let qr = new UQRCode()
  
  // 设置二维码内容
  qr.data = "https://example.com"
  
  // 关键：设置二维码大小（单位：px）
  qr.size = 200 // 这里设置二维码为200x200像素
  
  // 其他可选设置
  qr.margin = 10      // 边距
  qr.darkColor = "#000000" // 深色块颜色
  qr.lightColor = "#FFFFFF" // 浅色块颜色
  
  // 生成二维码
  qr.make()
  
  // 获取base64图片数据
  let qrCodeBase64 = qr.toDataURL()
  
  // 在页面中显示
  this.qrCodeImage = qrCodeBase64
}

在模板中使用：

<image :src="qrCodeImage" mode="widthFix"></image>

主要参数说明：

  • size：控制二维码的宽度和高度（正方形）
  • margin：控制二维码周围的白边大小
  • 建议根据实际显示容器的尺寸来设置合适的 size 值

注意事项：

  1. size 值不宜过小，否则会影响二维码的识别率
  2. 建议尺寸至少 100px 以上
  3. 可通过调整容器大小配合 mode="widthFix" 实现响应式效果

通过调整 size 参数即可灵活控制生成的二维码尺寸大小。

回到顶部