Skip to content

灵萌的 UI 可视化编辑器 是系统核心特色之一:无需改代码,在管理后台拖拽组件、调整样式与跳转,即可为不同区域定制客户端界面。

使用环境

UI 编辑器 仅支持 H5 浏览器(电脑 Chrome / Edge 体验最佳)。请勿在小程序内打开管理后台。

入口位置

功能菜单路径
页面列表与可视化设计UI管理 → 页面配置
底部 Tab 导航UI管理 → TabBar配置
笔记标签样式UI管理 → 自定义标签

前置条件:侧栏出现 UI管理(需在 系统设置 → 我的模块 中已开通 UI 配置能力)。

能做什么

  • 首页、发现页、自定义页、圈子页、跑腿表单页 等拖拽搭建界面
  • 配置 个人中心、消息中心、设置页 等面板类页面
  • 区域 分别保存 UI(多校区/多社区各自一套)
  • 配置底部 TabBar 图标、文案、跳转与发布弹窗
  • 使用 AI 助手 根据描述生成页面布局(可选)

编辑器三栏布局

┌──────────────┬─────────────────────────┬──────────────┐
│  左侧组件库   │   中间手机预览画布        │  右侧属性面板 │
│  点击添加组件 │   点击选中 / 排序 / 删除  │  属性 + 样式  │
└──────────────┴─────────────────────────┴──────────────┘

宽屏电脑为三栏;手机管理端底部切换 组件 / 画布 / AI / 属性 四个 Tab。

组件库概览(39 种)

分类数量典型组件
基础元素4文本、图片、按钮、模块标题
布局导航5轮播图、金刚区、搜索栏、筛选标签
信息展示3列表、通知栏、结束文本
社区内容8笔记列表、瀑布流、圈子列表、热门话题
运营模块3首页榜单、双卡行动、小程序广告
表单/服务16输入框、选项、地址、提交底栏(仅服务表单页)

配置的两层逻辑

与全站其它功能一致:

层级说明
平台默认(区域 ID = 0)各区域未单独配置时继承
区域专属在页面列表顶部选择区域后编辑保存

同一页面类型、同一区域 只能有一条「启用」 的配置对用户生效。

推荐阅读顺序

  1. 快速上手 — 创建、编辑、保存、启用
  2. 从零搭建首页 — 完整案例(推荐)
  3. 编辑器界面说明 — 工具栏、撤销、导入导出
  4. 页面类型说明 — 首页/面板/表单页区别
  5. 样式与点击动作 — 通用样式面板、跳转配置
  6. 按需查阅 组件手册
  7. TabBar 配置
  8. AI 生成页面(可选)

相关文档

灵萌 Lingmeng 使用手册