更新记录

1.0.0（2026-05-21） 下载此版本

第一个版本发布

平台兼容性

uni-app(4.87)

mg-qrcode

mg-qrcode 是一个面向 uni-app x 的二维码生成组件，使用 UTS 实现二维码矩阵计算，并通过 uni-app x Canvas 2D 绘制。组件不依赖浏览器对象，适合 App 端跨平台使用。

特性

• 支持 Android、iOS、HarmonyOS App 平台
• 使用 uni.createCanvasContextAsync 获取 Canvas 2D 上下文
• 支持中文、英文、链接、表情等 UTF-8 内容
• 支持二维码尺寸、留白、前景色、背景色、纠错等级配置
• 支持生成成功和失败事件回调
• 无第三方依赖，无网络请求

平台兼容

HarmonyOS 编译建议将项目放在短的纯英文路径下，例如 /Volumes/coder/qrcode，避免 DevEco/鸿蒙工具链因中文路径或过长路径导致编译失败。

安装

将插件放入项目的 uni_modules 目录：

uni_modules/mg-qrcode

组件路径：

uni_modules/mg-qrcode/components/mg-qrcode/mg-qrcode.uvue

uni-app x 支持 easycom 自动识别，通常无需手动引入即可直接使用：

<mg-qrcode value="https://uniapp.dcloud.net.cn/uni-app-x/"></mg-qrcode>

基础用法

<template>
  <view class="page">
    <mg-qrcode
      :value="qrcodeText"
      :size="240"
      :margin="4"
      level="M"
      foreground="#102a43"
      background="#ffffff"
      @ready="onQrcodeReady"
      @error="onQrcodeError"
    ></mg-qrcode>
  </view>
</template>

<script setup lang="uts">
const qrcodeText = ref('https://uniapp.dcloud.net.cn/uni-app-x/')

function onQrcodeReady(value: string): void {
  console.log('二维码生成成功：' + value)
}

function onQrcodeError(message: string): void {
  console.log('二维码生成失败：' + message)
}
</script>

<style>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}
</style>

App 页面滚动用法

uni-app x App 页面默认不可滚动，如页面内容可能超出屏幕，建议使用 <scroll-view> 包裹：

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll">
  <!-- #endif -->
    <view class="page">
      <mg-qrcode :value="qrcodeText" :size="240"></mg-qrcode>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
const qrcodeText = ref('https://uniapp.dcloud.net.cn/uni-app-x/')
</script>

<style>
.page-scroll {
  flex: 1;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}
</style>

属性

纠错等级

纠错等级越高，可承载的内容越少。当前组件支持 QR Code 版本 1-10，内容过长时会触发 error 事件。

事件

完整示例

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll">
  <!-- #endif -->
    <view class="page">
      <mg-qrcode
        :value="text"
        :size="240"
        :margin="4"
        level="M"
        foreground="#102a43"
        background="#ffffff"
        @ready="onReady"
        @error="onError"
      ></mg-qrcode>

      <input class="input" v-model="text" placeholder="请输入二维码内容" />
      <text class="status">{{ status }}</text>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
const text = ref('https://uniapp.dcloud.net.cn/uni-app-x/')
const status = ref('等待生成')

function onReady(value: string): void {
  if (value.length > 0) {
    status.value = '已生成：' + value
  } else {
    status.value = '请输入内容'
  }
}

function onError(message: string): void {
  status.value = message
}
</script>

<style>
.page-scroll {
  flex: 1;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}

.input {
  margin-top: 20px;
  width: 300px;
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  background-color: #f3f7fa;
}

.status {
  margin-top: 12px;
  font-size: 13px;
  color: #486581;
  text-align: center;
}
</style>

注意事项

• App 端页面需要滚动时，请使用 <scroll-view> 包裹内容。
• 使用 display: flex 时建议显式声明 flex-direction，避免多端默认值差异。
• HarmonyOS 编译对路径更敏感，建议项目目录使用短英文路径。
• 当前组件主要面向 uni-app x App 端，不承诺兼容老版 uni-app 小程序端。

常见问题

一直显示等待生成怎么办？

请确认插件版本中组件使用的是 onMounted 初始化 Canvas。自定义组件内不应依赖页面级 onReady 来获取 canvas 上下文。

内容过长生成失败怎么办？

可以降低纠错等级，例如从 H 改为 M 或 L，也可以减少二维码内容长度。

版本

当前版本：1.0.0

许可

免费使用。发布到插件市场前，请根据你的实际授权方式补充许可证信息。