关于微信小程序使用qrcode生成二维码

在开发过程中，我们经常使用 qrcode.js 来生成二维码。然而，在微信小程序中直接使用 qrcode.js 生成二维码可能会遇到一些问题。这是因为 qrcode.js 的大部分方法依赖于原生的 JavaScript canvas，而微信小程序的 canvas 是原生组件，不完全等同于 JavaScript 的原生 canvas。因此，qrcode.js 在微信小程序中直接创建 canvas 并生成二维码的方法可能无法正常工作。

为了继续使用 canvas 生成二维码，必须将 qrcode.js 的原生 canvas 方法改成微信小程序的 canvas 方法，这种方式非常麻烦。或者可以直接使用第三方 npm 依赖（例如：tki-qrcode），但在开发中最好还是不要随便引入外部库。其实在 qrcode.js 中还有一个 QRCode.toString() 方法，该方法可以将字符串生成一个 SVG 格式的二维码，而不需要使用 canvas。在小程序中可以直接使用生成的 SVG 图片进行渲染，只不过这种方法只能创建较简单的二维码。

不过，QRCode.toString() 方法生成的是 SVG 字符串，想要在微信小程序中直接使用还需要做一些转换。可以使用下面的方法将 SVG 字符串转换成 base64 格式，然后直接使用 <image> 标签进行渲染：

const base64Svg = uni.arrayBufferToBase64(new TextEncoder().encode(svgString).buffer)

 

new TextEncoder().encode(svgString):

• TextEncoder 是一个用于将字符串转换为 Uint8Array 的接口。它将字符串按照 UTF-8 编码转换为字节数组。
• encode(string) 方法接受一个字符串作为参数，并返回一个 Uint8Array，表示该字符串的 UTF-8 编码。
  例如，如果 string 是 "Hello", TextEncoder().encode("Hello") 将返回一个 Uint8Array，其内容是 [72, 101, 108, 108, 111]。
  .buffer:
• Uint8Array 是一个视图，它包装了底层的 ArrayBuffer 对象。buffer 属性返回这个底层的 ArrayBuffer。
  例如，new TextEncoder().encode("Hello").buffer 返回一个包含 Hello 字符串 UTF-8 编码字节的 ArrayBuffer。

 

uni.arrayBufferToBase64:

• uni.arrayBufferToBase64 是一个方法，用于将 ArrayBuffer 转换为 Base64 编码的字符串。uni 可能是一个全局对象，提供了一些通用的实用工具方法。
  该方法接受一个 ArrayBuffer 作为参数，并返回一个 Base64 编码的字符串。

总结：

这行代码的总体作用是：将输入的字符串（svgString）首先编码为 UTF-8 格式的字节数组，然后再将这个字节数组转换为 Base64 编码的字符串，结果存储在 base64Svg 变量中。

 

主要代码：

/**
 * 二维码生成配置项类型
 */
type qrOptionsType = {
  /**
   * 纠错级别 low, medium, quartile, high 或者 L, M, Q, H.
   * 决定了二维码在损坏或污损的情况下能够恢复多少信息。
   * 更高的容错率会增加二维码的密度。
   */
  corLevel?: 'low' | 'medium' | 'quartile' | 'high' | 'L' | 'M' | 'Q' | 'H'
  /**
   * 二维码的边距，单位像素。默认为4，
   */
  margin?: number
  /**
   *  模块（点）的颜色   十六进制颜色
   */
  mainColor?: string
  /**
   * 二维码的背景色  十六进制颜色
   */
  bgColor?: string
}

/**
 *
 * @param content 转化内容
 * @param options  （可选）二维码配置项{ corLevel：'M', margin：4, mainColor：'#000000', bgColor：'#ffffff' }
 */
function makeCode(content: string, options: qrOptionsType = {}) {
  const { corLevel = 'M', margin = 4, mainColor = '#000000', bgColor = '#ffffff' } = options

  const newOptions = {
    type: 'svg',
    corLevel,
    margin,
    color: {
      dark: mainColor,
      light: bgColor,
    },
  }
  QRCode.toString(content, newOptions, function (error: any, svgString: string) {
    if (!error) {
      const base64Svg = uni.arrayBufferToBase64(new TextEncoder().encode(svgString).buffer)
      const base64Data = 'data:image/svg+xml;base64,' + base64Svg
      svgImg.value = base64Data
    } else {
      return console.error(error)
    }
  })
}

通过以上方法，可以更方便地在微信小程序中渲染二维码。