快速上手

本篇带您完成第一次页面设计：从进入编辑器到客户端看到效果。

第一次改 App 界面？按六步走：进列表 → 选区域 → 设计 → 保存 → 启用 → 打开手机看。保存和启用是两回事，漏了启用用户永远看不到新版。

UI管理 → 页面配置pages_admin/ui-editor/list

• 电脑浏览器打开管理后台，侧栏有 UI管理
• 建议先用「全平台」练手，再复制到具体校区

建议顺序

1. 1
   进页面配置UI管理 → 页面配置，顶部区域选「全平台」或目标校区
2. 2
   新建或点设计+ 新建页面 选类型，或已有卡片点「设计」/「配置」
3. 3
   拖组件调样式左侧加组件，右侧属性填内容、样式调间距
4. 4
   保存顶栏「保存」— 只是存进后台，用户还看不到
5. 5
   启用返回列表点「启用」— 绿色状态才是线上版
6. 6
   手机验收App 校区与编辑区域一致；不行就杀进程重进

保存 ≠ 启用（务必记住）

只保存不启用 = 用户还在看旧版。改底栏 Tab 去 TabBar配置；改 Tab 里面内容仍要在这里启用对应类型。

保存编辑器顶栏操作，把画布写入服务器

启用列表卡片操作，告诉 App 这个区域用这种页面用这一条

区域怎么选

• 列表顶部区域筛选 = 你现在编辑哪一层
• 全平台：没单独配的校区会继承全平台已启用的配置
• 某校区已有自己的启用项时，改全平台不会自动覆盖该校区

首页可以这样搭

轮播 → 金刚区/搜索 → 筛选标签 → 运营位 → 笔记列表或瀑布流 → 结束文本

整页设置在哪

点画布空白处（别选中组件），右侧出现页面级配置：背景色、顶图、导航栏标题、分享图等。

编辑器界面说明文档

底栏 Tab 另开一页配

首页内容在「页面配置 → 应用首页」；底部几个 Tab、图标、点 Tab 跳哪，在 UI管理 → TabBar配置。两边各自保存，互不影响。

TabBar 配置专章文档

从零搭建首页文档

多校区复制套路

1. 1
   全平台搭好在全平台做好并启用一套首页
2. 2
   切校区区域选目标校区
3. 3
   复制或导入列表「复制」或编辑器导出 JSON 再导入
4. 4
   微调启用改文案图片后保存，启用该校区版本

验收清单

• 列表里该条为绿色「启用」
• 测试 App 当前校区 = 编辑时选的区域
• Tab 页：TabBar 对应项已保存
• 轮播、金刚区、列表能正常显示和点击
• 筛选 Tab 切换时列表会刷新（若配了联动）

常见问题

保存了手机没变有没有启用；区域对不对；杀进程重进。

组件点不了灰色页面类型不对，见页面类型说明。

改了 Tab 文字首页没变Tab 文案在 TabBar配置；首页内容在页面配置。

不知道选哪种页面类型底部 Tab 用应用首页/功能页；活动用自定义页；跑腿用服务表单。

相关文档

编辑器界面说明样式与点击动作