深浅模式
从零搭建首页（完整案例）
本篇用 真实操作顺序 带你在 UI 编辑器里搭一个可用的校园首页，每一步都对应管理后台里的具体位置。完成后你将掌握：页面创建、组件添加、属性/样式、筛选联动、保存与启用。
预计耗时： 30～60 分钟（含上传图片）
目标效果
text
┌─────────────────────────────┐
│ 透明导航 + 顶部背景图 │
├─────────────────────────────┤
│ 轮播图（3 张活动图） │
│ 金刚区（4 列：二手/跑腿/投票/活动）│
│ 搜索栏（跳转搜索页） │
│ 模块标题「热门话题」 │
│ 话题气泡 │
│ 模块标题「最新动态」 │
│ 筛选标签（推荐/最新/视频） │
│ 笔记列表（双列模板） │
│ 结束文本「没有更多了」 │
└─────────────────────────────┘第 0 步：前置条件
| 项 | 检查 |
|---|---|
| 管理后台 | H5 浏览器打开，已登录超级管理员 |
| UI 模块 | 系统设置 → 我的模块 中 UI 配置已开通 |
| 文件存储 | 系统配置 → 文件存储 已保存且测试通过 |
| 区域 | 本案例用 平台默认；多校区请先 区域管理 |
第 1 步：创建首页配置
- UI管理 → 页面配置
- 顶部区域选 平台默认
- 点 + 新建页面
- 类型选 首页（对应底部 Tab 首页，不是「功能页」）
- 页面名称填：
平台首页 v1 - 点 创建并编辑
第 2 步：页面级设置（导航与顶图）
进入三栏编辑器后，点击画布空白处（不要选中任何组件），右侧出现 页面配置。
| 配置项 | 建议值 | 说明 |
|---|---|---|
| 页面背景颜色 | #F5F5F5 | 列表区底色 |
| 顶部背景图 | 上传一张 750×400 左右头图 | 营造沉浸式顶部 |
| 背景图高度 | 400 rpx | 按设计微调 |
| 导航栏样式 | 默认 或 胶囊 | 有顶图时可用透明/胶囊 |
| 显示标题 | 开 | — |
| 页面标题 | 留空或填站点名 | 留空则用页面名称 |
| 分享标题 | 欢迎来到 XX 校园 | 用户分享小程序卡片 |
| 分享图片 | 上传 5:4 比例图 | 微信分享图 |
第 3 步：添加轮播图
- 左侧 布局导航 → 轮播图
- 右侧 属性 → 图片列表 → + 添加图片，上传 3 张 Banner
- 每张图配置 点击动作（示例）：
| 图片 | 点击动作 |
|---|---|
| 图 1 | 跳转页面 → 某活动 自定义页 |
| 图 2 | 跳转页面 → 投票列表 |
| 图 3 | 无动作 或 外链活动 H5 |
- 播放 区：自动播放 开，间隔
3000ms，循环 开 - 指示器：显示，底部居中，激活色
#FFFFFF - 样式 Tab：高度
300rpx，左右 margin 各24rpx
第 4 步：金刚区（4 列快捷入口）
- 添加 金刚区
- 属性：
| 项 | 值 |
|---|---|
| 列数 | 4 |
| 图标大小 | 88 rpx |
| 行间距 | 24 rpx |
- 添加 4 个 items（示例）：
| 文字 | 图标/图片 | 点击动作 |
|---|---|---|
| 二手闲置 | 选图标或上传 | 跳转 → 闲置列表页 |
| 跑腿 | 选图标 | 跳转 → 跑腿服务列表 |
| 投票 | 选图标 | 跳转 → 投票活动 |
| 校园活动 | 选图标 | 跳转 → 自定义活动页 |
- 样式 Tab：marginTop
20，paddingBottom16
第 5 步：搜索栏
- 添加 搜索栏
- 占位符：
搜索笔记、圈子、用户 - 点击动作 → 跳转 搜索页（从路由选择器选）
- 右侧「搜一搜」按钮可保留或隐藏（按设计）
- 样式：margin 左右
24，marginBottom16
第 6 步：话题模块
- 添加 模块标题：标题
热门话题，开启 更多，更多动作 → 热门话题榜 - 添加 话题气泡
- 标题栏标题可改为
大家都在聊 - 气泡样式：圆角
999，背景#FFFFFF，行间距16 - 说明： 线上话题数据自动拉取，编辑器内为演示布局
第 7 步：筛选标签 + 笔记列表（联动）
这是首页 最核心 的一步，须保证 联动 Key 一致。
7.1 添加筛选标签
- 布局导航 → 筛选标签（全页只能 1 个）
- 内容模式 → API 联动（不是 Tab 独立内容）
- 联动目标 → 笔记
- 联动标识 → 填
home-feed（自定义字符串，记住它） - 添加 Tab 项：
| 标签名 | 笔记排序 note_order_by | 说明 |
|---|---|---|
| 推荐 | smart | 默认选中 |
| 最新 | created_desc | — |
| 视频 | video | 仅视频笔记 |
- 吸顶：开（滚动时标签栏固定在顶部）
7.2 添加笔记列表
- 社区内容 → 笔记列表（与圈子列表/瀑布流 三选一）
- 联动标识 → 同样填
home-feed - 模板选择 uiTemplate：
| 模板 | 效果 |
|---|---|
| 1 | 传统双列，信息较全 |
| 2 | 带热评条 |
| 3 | 一行互动图标 |
本案例选 模板 1。
- 显示开关（建议）：
| 开关 | 建议 |
|---|---|
| 显示媒体 | 开 |
| 显示话题 | 开 |
| 显示位置 | 开 |
| 显示圈子 | 开 |
| 显示认证标识 | 开 |
样式 Tab
- 外边距：列表整体 marginTop
16 - 卡片内边距/圆角：在 样式 里调卡片背景
#FFFFFF、圆角16
- 外边距：列表整体 marginTop
将笔记列表 移到画布最底部（用 下移 直到最后一个内容组件）
7.3 添加结束文本
- 信息展示 → 结束文本
- 作为列表页脚 → 开（homeListFooter）
- 文案：
没有更多了 - 放在笔记列表 正下方
第 8 步：预览与保存
- 工具栏 预览：查看截图效果
- 保存 → 勾选 更新封面截图（列表页缩略图）
- 返回 页面配置列表
- 找到
平台首页 v1→ 点 启用（同区域旧首页会自动禁用）
第 9 步：配置 TabBar（若尚未配置）
UI管理 → TabBar配置 → 平台默认：
| Tab | 文字 | 跳转 |
|---|---|---|
| 1 | 首页 | 首页 Tab 路由 |
| 2 | 发现 | 功能页 Tab 路由 |
| … | … | … |
保存后，底部第一个 Tab 进入的即是刚启用的 应用首页 配置。
第 10 步：客户端验收
| 检查项 | 预期 |
|---|---|
| 打开 App 首页 | 轮播、金刚区、列表正常 |
| 切换筛选 Tab | 列表刷新为不同排序 |
| 下拉刷新 | 列表重新加载 |
| 点击金刚区 | 进入对应业务页 |
| 分享 | 标题与分享图正确 |
若不变：确认客户端 区域 与编辑区域一致；杀进程重进。
常见踩坑
| 问题 | 原因 | 解决 |
|---|---|---|
| 筛选切换列表不动 | 联动 Key 不一致 | 标签与列表都填相同 home-feed |
| 有两个列表 | 加了圈子列表又加笔记 | 三选一，删掉多余 |
| 保存了但 App 旧样 | 未 启用 或区域不对 | 列表点启用；核对区域 |
| 图片不显示 | 存储未配或 URL 非公网 | 检查文件存储 Tab |