更新记录

1.1.0（2026-06-15） 下载此版本

1. 优化颜色控制
2. 解决用户端无法显示出思维导图问题
3. 思维导图可下载

平台兼容性

uni-app(3.8.0)

codex-mindmap

基于 uni-app 的高性能思维导图组件，使用原生 Canvas 2D API 绘制，无第三方图表库依赖。支持微信小程序和 H5 双端运行。

特性

• 原生 Canvas 2D 绘制，requestAnimationFrame 驱动渲染，拖拽缩放流畅
• 根据文字长度自动计算节点宽度，三次贝塞尔曲线连线
• 三种排布模式：向右（right）、向左（left）、居中发散（center）
• 一指拖拽漫游 + 双指捏合缩放（移动端）；鼠标拖拽 + 滚轮缩放（H5）
• 自适应视图（Fit View）：自动缩放使整棵树完整停靠在视口内
• 节点展开/收起（折叠子树），点击拾取（AABB 碰撞检测）
• 导出为高清图片（小程序离屏 Canvas / H5 DataURL）
• 支持节点文字换行、自定义颜色

文件结构

uni_modules/codex-mindmap/
├── components/
│   └── codex-mindmap/
│       ├── codex-mindmap.vue   # 视图层（Canvas 渲染、手势交互、生命周期）
│       └── layout.js           # 布局引擎（纯数学计算，无 DOM 依赖）
├── package.json
├── changelog.md
└── readme.md

基本用法

<template>
  <view class="page">
    <codex-mindmap
      ref="mindmap"
      mindMapId="myMindmap"
      layoutMode="right"
      :fitView="true"
      :rawData="treeData"
      :contentStyle="{ height: '80vh', background: '#f7f8fa' }"
      @node-click="onNodeClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        id: 'root',
        topic: '法律服务',
        children: [
          {
            id: 'c1',
            topic: '合同审查',
            children: [
              { id: 'c1_1', topic: '劳动合同' },
              { id: 'c1_2', topic: '租赁合同' }
            ]
          },
          {
            id: 'c2',
            topic: '法律咨询',
            children: [
              { id: 'c2_1', topic: '婚姻家庭' },
              { id: 'c2_2', topic: '债权债务' }
            ]
          }
        ]
      }
    }
  },
  onReady() {
    this.$refs.mindmap.initMindMap()
  },
  methods: {
    onNodeClick(node) {
      console.log('点击节点:', node.topic)
    }
  }
}
</script>

注意：需在 onReady 或数据就绪后手动调用 initMindMap() 初始化。

Props

Events

Methods

exportImage 示例

async saveImage() {
  try {
    const path = await this.$refs.mindmap.exportImage()
    // #ifdef MP-WEIXIN
    uni.saveImageToPhotosAlbum({
      filePath: path,
      success: () => uni.showToast({ title: '已保存' })
    })
    // #endif
    // #ifdef H5
    // path 为 base64 DataURL，可赋值给 <img> 或触发下载
    // #endif
  } catch (e) {
    console.error('导出失败', e)
  }
}

数据结构

rawData 需为嵌套树形 JSON，每个节点包含：

{
  "id": "唯一标识",
  "topic": "显示文本",
  "children": [
    { "id": "子节点1", "topic": "子节点文本" },
    { "id": "子节点2", "topic": "子节点文本", "children": [] }
  ]
}

• id：必填，节点唯一标识
• topic：必填，节点显示文本
• children：可选，子节点数组

如果节点缺少 id，组件会自动生成随机 ID。

平台兼容性

注意事项

1. 必须手动初始化：组件不会自动渲染，需在 onReady 后调用 this.$refs.mindmap.initMindMap()
2. Canvas type="2d"：小程序端使用原生 Canvas 2D 接口，微信基础库需 >= 2.9.0
3. 真机调试：开发者工具中 Canvas 文字排版和手势事件可能与真机不一致，交互问题请用真机验证
4. 大量节点性能：当前碰撞检测为全量树遍历，节点超过 1000 个时建议自行扩展视口剔除（Culling）优化
5. H5 端 Canvas：H5 使用 uni.createCanvasContext 兼容方案，不支持 type="2d"