深色模式
第 9 章 页面装修
「页面装修」用于定制小程序前台的视觉效果与页面布局：主题配色、页面主题（首页 / 分类页 / 详情页 / 个人中心的布局）、专题活动页、开屏广告、跳转链接与自定义数据组。
菜单路径：「页面装修」
本章包含：一键换色、商城主题、我的主题、首页装修、专题页面、开屏广告、链接管理、组合数据。
⚠ 装修效果直接影响前台展示，建议先在测试环境调整满意后再应用到正式环境；部分配置保存后买家端需下拉刷新才能看到最新效果。
9.1 一键换色
菜单路径：「页面装修 → 一键换色」
用于快速更换小程序整体的主题配色。
- 页面提供 7 套预设配色：海鲜蓝、生鲜绿、热情红、女神粉、活力橙、商务紫、经典黑，点击即可预览并应用。
- 也可展开「自定义配色」，逐项设置颜色后保存。
- 保存成功后小程序端配色即时生效；点击「还原默认颜色」可恢复出厂配色。
9.2 我的主题
菜单路径：「页面装修 → 我的主题」
主题是页面装修（首页 / 分类页 / 详情页 / 个人中心）的整套配置。本页面用于管理主题的新建、使用、导入导出。
- 新建主题：点击「新建主题」，填写主题名称与主题简介；创建后进入主题编辑器进行装修（见 9.4）。
- 使用主题：点击「使用」，选择要应用的页面（商城首页 / 商品分类 / 商品详情 / 个人中心），使用后所选页面将同时启用该主题。
- 导入 / 导出主题：可将主题导出为 JSON 数据备份，或在其他环境粘贴 JSON 导入（用于主题迁移）。
- 删除主题：删除后不可恢复；使用中的主题建议先切换再删除。
- 列表显示主题名称、使用状态（使用中 / 未使用）、使用页面、修改时间。
9.3 商城主题
菜单路径：「页面装修 → 商城主题」
展示当前各页面（商城首页、商品分类页、商品详情页、个人中心页）正在使用的主题：
- 点击「选择主题」可从「我的主题」中指定主题数据，覆盖当前页面配置（弹窗确认"这将覆盖当前页面配置"）。
- 点击「还原主题」可将页面恢复为默认配置（所有自定义修改将丢失，请谨慎操作）。
9.4 首页装修
菜单路径：「页面装修 → 首页装修」
9.4.1 功能说明
首页装修是可视化页面编辑器，用于拖拽搭建小程序页面。支持装修的页面：商城首页、商品分类、商品详情、个人中心。
⚠ 编辑器需从「我的主题」或「专题页面」进入：在「我的主题」中点击主题的「装修 / 编辑」即可进入对应页面的装修编辑器。
9.4.2 编辑器界面
编辑器界面由三部分组成：
| 区域 | 用途 |
|---|---|
| 左侧组件库 | 按分类选择组件：基础组件、营销组件、工具组件、商品组件、用户组件；点击或拖拽添加到页面 |
| 中间预览区 | 手机模拟预览，实时展示装修效果；点击页面中的组件即可选中 |
| 右侧属性面板 | 选中组件后，在此配置该组件的「组件配置」（图片、文字、链接、样式等）；未选中组件时为「页面设置」 |
常用组件示例：轮播图、导航栏、搜索框、图片魔方、优惠券、秒杀、拼团、商品列表、会员卡片、签到、公告、视频、客服、热区等。
9.4.3 组件操作
- 选中组件后，可对其进行：上移、下移、复制、显隐（显示 / 隐藏）、删除。
- 部分组件位置受限：底部导航不可移动；搜索框 / 选项卡 / 轮播搜索必须放在页面顶部。
9.4.4 保存与发布
- 装修完成后点击「保存」，保存当前页面配置。
- 可点击「保存到主题」将当前页面配置保存为主题数据；也可「另存为微页面」（用于制作专题页，见 9.5）。
- 可「生成封面」为主题/微页面生成列表封面图。
- 保存成功后在「我的主题」中点击「使用」并选择应用页面即可发布到前台。
⚠ 请先保存当前更改再做其他操作；未添加任何组件时无法保存。
9.5 专题页面
菜单路径：「页面装修 → 专题页面」
专题页面（微页面）用于制作活动落地页（如"双十一大促专题""新品发布专题"），可通过链接管理配置跳转。
- 点击「添加微页面」，进入装修编辑器（单页布局），按 9.4 的方法拖拽组件完成设计。
- 保存时设置页面名称；装修完成后在列表中显示：编号、名称、添加时间、更新时间。
- 列表支持「编辑」（再次进入编辑器）与「删除」。
- 专题页面的访问链接可在「链接管理」中配置（分类为"营销活动"等），装修其他页面时可将按钮 / 图片链接指向专题页。
9.6 开屏广告
菜单路径：「页面装修 → 开屏广告」
用于配置小程序启动时展示的开屏广告。
- 上传广告图片（按提示尺寸准备），填写跳转链接（点击广告后跳转的页面地址）、设置显示时长（秒）。
- 设置是否启用，保存后生效。
⚠ 广告图请控制文件大小，过大的图片会拖慢小程序启动速度。
9.7 链接管理
菜单路径：「页面装修 → 链接管理」
链接管理维护"可选择跳转"的页面地址库，装修组件（按钮、图片、导航）中的"选择链接"即从此处读取。
- 点击「新增链接」，填写：分类（基础页面 / 个人中心 / 营销活动 / 分销中心）、页面名称、页面路径（如
/pages/index/index）、排序、状态。 - 列表按分类、页面名称筛选；支持编辑、删除。
- 新增新的小程序页面后，如需在装修中被引用，请在此登记页面名称与路径。
9.8 组合数据
菜单路径：「页面装修 → 组合数据」
组合数据用于维护装修中"自定义数据组"的内容（如积分商城轮播图、首页广告位），供 C 端按固定的数据字段 KEY 读取。
9.8.1 数据组
- 点击「新增数据组」，填写：数据组名称（如：积分商城轮播图）、数据字段 KEY（唯一，如
integral_shop_banner，C 端按此读取）、数据提示（填写说明，展示在数据管理页）。 - 在字段定义中添加字段：字段名称、字段 KEY、字段类型（单行文本 / 多行文本 / 数字 / 单选 / 多选 / 下拉选择 / 页面链接 / 图片上传）。
- 保存后，在列表中点击「数据管理」录入该数据组的具体内容（可新增多条、设置排序与状态）。
⚠ 数据字段 KEY 是 C 端读取数据的凭据，创建后请勿随意修改。
9.9 常见问题
| 问题 | 处理办法 |
|---|---|
| 装修后前台没变化 | 确认已在「我的主题」中使用主题并选择应用页面；买家端下拉刷新重试 |
| 保存提示"搜索框或选项卡或轮播搜索必须为顶部" | 将该组件上移到页面最顶部后再保存 |
| 保存提示"底部导航不可移动" | 底部导航组件位置固定，无需调整 |
| 想恢复装修前的效果 | 在「商城主题」中点击「还原主题」（自定义修改将丢失），或切换使用其他主题 |
| 新建的专题页怎么给用户看 | 在「链接管理」中登记专题页路径，装修时给按钮/图片选择该链接；或直接分享页面路径 |
| 主题想复制到另一个环境 | 在「我的主题」中导出 JSON，再到目标环境「导入主题」 |
| 组合数据 C 端读不到 | 检查数据字段 KEY 是否与前端约定一致、数据组内是否已录入且状态为启用 |
| 上一章 | 目录 | 下一章 |
|---|---|---|
| 第 8 章 内容管理 | 总目录 | 第 10 章 客服管理 |