商城装修
发布于: 2026-06-08
一、功能说明
商城装修用于可视化配置小程序商城首页的页面布局和内容展示，通过拖拽组件的方式自由搭建商城页面。
【操作路径】
二、页面管理
1、装修页面（Tab）
用于管理已创建的装修页面：
操作 | 说明 |
|---|---|
新增页面 | 点击"新增页面"按钮创建新的空白页面 |
设为首页 | 将指定页面设为首页展示，页面卡片上会显示 首页 标识，只有设为首页的模板才在小程序中展示 |
编辑 | 进入装修编辑器修改页面内容 |
复制 | 复制已有页面快速创建 |
删除 | 删除不需要的页面 |
2、装修模版（Tab）
系统提供的内置模板库，可直接应用后修改：
- 可查看系统内置的装修模板（如"通用"模板）
- 点击"应用"按钮将模板应用到自己的装修页面
- 应用后可在模板基础上进行个性化调整
- 支持"查看全部模板"浏览更多专业设计的模板
三、装修页面
1、三栏式布局
区域 | 作用 |
|---|---|
左侧 | 组件列表，点击即可将组件添加到页面中 |
中间 | 手机预览区域，实时预览组件排列效果，可点击选中组件，通过右侧蓝色按钮上下调整顺序或删除 |
右侧 | 属性配置区域，配置选中组件的具体内容和样式 |
2、操作流程
- 从左侧组件列表中点击要添加的组件
- 组件自动添加到中间预览区
- 点击中间预览区的组件选中
- 在右侧面板配置组件内容和样式
- 通过上下箭头调整组件顺序
- 配置完成后点击底部「预览」预览效果，确认后点击「保存模版」
四、组件详细说明
系统目前支持以下装修组件：
1. 图片
展示静态图片，支持跳转到商品或小程序页面。
配置项：
- 显示标题：是否显示图片上方的标题文字，可设置标题内容、字体颜色和大小
- 显示更多：是否显示"更多"图标链接
- 背景颜色：组件背景色
- 展示风格：选择图片排列样式（一行一张纵向排列等），推荐尺寸 750×400px
- 组件样式：方框或弧形框，可设置高度（0 为图片真实高度）
- 边框风格：无边框、线条边框或间距边框
- 添加图片：上传图片并配置每张图片的跳转链接
- 链接类型：商品 或 微信小程序
- 标题：图片标题
- 商品链接：选择跳转的商品
2. 轮播广告
与图片组件类似，都是展示图片并支持跳转到商品。区别在于轮播广告以轮播（自动切换）形式展示多张图片，图片组件则为固定展示。
3. 自由编辑
富文本编辑器组件，支持自由输入和排版内容（文字、图片、表格等）。
【适用场景】
需要展示自定义格式内容的区域，如品牌介绍、活动规则说明等。
4. 标题
单独的标题组件，支持录入主标题和副标题。
【适用场景】
用于页面各区域之间的分隔和引导，如"新品推荐"、"热销爆款"等板块标题。
5. 公告
固定轮播展示当前已发布公告的名称，用户点击后进入公告列表页面查看详情。
数据来源：
自动读取商城公告页面中状态为"展示"的公告。
【说明】
公告内容在"商城公告"页面管理，此组件仅控制展示位置和样式。
6. 产品列表
手动选择商品进行独立展示的组件。
配置项：
- 显示标题：栏目标题（如"爆款热销"），可设置字体颜色和大小
- 显示更多：是否显示"更多"链接并设置跳转地址
- 购物按钮：是否在商品卡片上显示购物按钮
- 背景颜色：组件背景色
- 展示风格：一行展示一个或两个商品
- 布局样式：对齐 或 瀑布流
- 图片比例：1:1 或 3:4
- 组件样式：方框或弧形框，可设置商品间距（1-5px）
- 推荐商品：选择要展示的具体商品
- 显示数量：最多展示的商品数（最大 18 个）
- 排序规则：随机筛选
【适用场景】
需要精选特定商品进行重点展示的场景，如"掌柜推荐"、"新品上市"板块。
7. 视频
视频播放组件，添加视频后在首页进行播放。
【适用场景】
品牌宣传视频、产品使用教程、活动预告等视频内容展示。
8. 特价活动
促销活动组件，展示限时特价活动的商品和倒计时信息。
配置项：
- 显示标题：活动标题（如"限时特价"），可设置字体颜色和大小
- 组件样式：方框或弧形框
- 背景颜色：组件背景色
- 展示风格：多种活动展示布局可选
- 展示方式：轮播 或 列表
- 边框背景色：活动卡片边框颜色
- 特价活动：下拉选择已创建的特价活动
- 活动商品展示：手动添加的商品在活动组件中置顶展示，其他活动商品在"查看更多"后展示
【说明】
需要先在"限时特价"页面创建特价活动，才能在此组件中选择和展示。
9. 满减 / 满赠（赠品）
与特价活动组件类似，分别展示满减活动和满赠活动的信息。选择对应的促销活动，添加活动商品展示在首页。
【说明】
需要先在"满减活动"或"满赠活动"页面创建好对应的活动，才能在此组件中选择展示。
10. 导航
配置导航入口，支持跳转到商品或其他小程序。
【适用场景】
首页分类导航入口，如按品类分（食品、日化、酒水...）或按功能分（新品、热卖、秒杀...），每个导航项配置对应图标和跳转目标。
11. 图片热区
上传一张大图，在图片上绘制多个可点击的热区，每个热区配置独立的跳转链接。
操作方式：
在右侧的"热区绘制区域"中，直接在图片上拖拽绘制矩形或圆形热区，绘制完成后配置每个热区的跳转链接。
【适用场景】
设计一张包含多个商品/入口的海报图，不同区域点击跳转到不同商品。比图片组件更灵活，适合创意性强的视觉营销。
12. 商品橱窗
与图片组件类似，展示图片并支持跳转，但支持更多的图片展示样式和布局选项。
【适用场景】
需要丰富图片展示效果的场景，如多图拼接展示、特殊排列布局等。
13. 优惠套餐
专门的套餐展示组件，展示套餐商品的内容和价格。
【适用场景】
需要在首页展示套餐商品的场景，引导客户购买组合优惠。