UI 可视化编辑器

无需改代码，在管理后台拖拽组件、调整样式与跳转，即可为不同区域定制客户端界面。

不用写代码，在管理后台拖组件就能改 App 首页、发现页、活动页等界面。记住三件事：保存只是存草稿，启用才上线；按区域分开配；底栏 Tab 和页面内容是两套菜单。

UI管理 → 页面配置 / TabBar配置UI 可视化编辑器

• 侧栏出现 UI管理（系统设置 → 我的模块 已开通 UI 配置）
• 用电脑浏览器打开管理后台 H5
• 知道要改的是哪个校区（区域）

建议顺序

1. 1
   认菜单页面配置 = 页面里放什么；TabBar配置 = 底栏几个 Tab；自定义标签 = 笔记角标样式
2. 2
   选区域页面配置列表顶部选全平台或具体校区
3. 3
   编辑保存设计/配置完成后顶栏保存
4. 4
   启用列表点启用，用户端才切换
5. 5
   客户端验收确认 App 当前校区与编辑区域一致，必要时杀进程重进

保存和启用，别混了

这是运营最常踩的坑：改完保存了，用户还说「没变」。

自定义页、服务表单可以同区域启用多条，靠不同入口或 page_type 区分。

保存把编辑结果写到服务器，列表可能仍显示「禁用」

启用指定这个区域、这种页面类型，线上用这一条配置

单例类型应用首页、功能页、个人中心等：同区域同时只能启用一条，新的启用会自动顶掉旧的

在哪用

编辑器只在电脑浏览器里好用（Chrome / Edge）。别指望在小程序里开管理后台拖组件。

后台入口（已对照菜单）

页面配置UI管理 → 页面配置 — 列表、新建、设计、启用

TabBar配置UI管理 → TabBar配置 — 底栏图标、跳转、发布弹窗

自定义标签UI管理 → 自定义标签 — 笔记卡「热帖」「认证」等角标外观

TabBar 和页面配置分开存

• 改底栏几个 Tab、图标、点 Tab 跳哪 → TabBar配置，点「保存配置」
• 改首页轮播、列表、金刚区 → 页面配置 → 应用首页 → 设计 → 保存 → 列表启用
• 两边互不影响：TabBar 保存了，首页内容不会自动变

TabBar 专章文档

能做什么

• 搭首页、发现页、活动自定义页、圈子详情、跑腿表单等
• 配个人中心、消息、设置等「面板页」（表单配置，不是拖画布）
• 按校区分别保存；全平台做模板，校区可继承或单独覆盖
• 可选用 AI 根据描述生成首页框架（要开 AI 中台）

编辑器长什么样

左侧组件库 | 中间手机预览 | 右侧属性 + 样式

组件库（39 种）

基础元素（4）文档

布局导航（5）文档

社区内容（8）文档

表单/服务（16）文档

区域继承怎么理解

新校区上线：全平台做好 → 切校区 → 复制或导入 JSON → 微调 → 启用校区版。

• 全平台（region_id = 0）：默认模板；某校区没单独配过，就用全平台已启用的那条
• 指定校区：在列表顶部切到该校区再编辑；保存后只影响这个校区
• 同一页面类型、同一区域，启用中的只能有一条（自定义页、服务表单除外）

验收清单

• 我的模块已开通 UI 配置，侧栏有 UI管理
• 目标区域列表里对应页面类型为「启用」
• Tab 页：TabBar 已保存且跳转正确
• 测试 App 校区与编辑区域一致
• 主要入口、筛选联动、点击跳转在真机试过

常见问题

保存了用户端没变是否启用；区域是否一致；Tab 内容在页面配置改，不是 TabBar。

没有 UI管理 菜单我的模块、账号权限。

全平台改了校区没变校区已有单独配置，不会自动继承全平台最新启用项，需进该校区处理。

和自定义标签啥关系自定义标签管笔记角标样式；页面配置管页面布局，各管各的。

相关文档

快速上手从零搭建首页常见问题