页面装修
页面装修模块提供可视化页面编辑器,支持自定义客户端首页和专题页面。
功能说明
页面装修系统支持:
- 可视化拖拽编辑
- 丰富的组件库
- 实时预览
- 多端适配
- 主题切换
页面模板
模板类型
系统预设以下页面模板:
- 首页模板: 客户端首页
- 分类页模板: 服务分类页
- 专题页模板: 营销活动专题页
- 自定义页: 自由创建的页面
使用模板
- 进入「营销中心」→"页面装修"
- 选择「模板管理」
- 选择需要使用的模板
- 点击「应用模板」
组件库
基础组件
| 组件 | 说明 |
|---|---|
| 搜索框 | 服务/商品搜索 |
| 轮播图 | 图片轮播展示 |
| 导航栏 | 功能入口导航 |
| 分类列表 | 服务/商品分类 |
| 商品列表 | 商品展示列表 |
| 服务列表 | 服务展示列表 |
| 图片 | 单图展示 |
| 图文 | 图文组合展示 |
| 视频 | 视频播放 |
| 空白 | 占位空白 |
营销组件
| 组件 | 说明 |
|---|---|
| 优惠券 | 优惠券领取入口 |
| 秒杀 | 秒杀活动入口 |
| 拼团 | 拼团活动入口 |
| 签到 | 签到功能入口 |
| 分销 | 分销推广入口 |
| 倒计时 | 活动倒计时 |
布局组件
| 组件 | 说明 |
|---|---|
| 分栏布局 | 多栏布局容器 |
| 标签页 | Tab切换 |
| 折叠面板 | 可折叠内容 |
| 悬浮按钮 | 悬浮操作按钮 |
页面编辑
编辑流程
- 进入「营销中心」→"页面装修"
- 选择需要编辑的页面
- 点击「编辑」进入编辑器
添加组件
- 在左侧组件库中选择组件
- 拖拽到中间编辑区域
- 调整组件位置和大小
配置组件
- 点击选中组件
- 在右侧属性面板配置:
- 样式设置(边距、背景、圆角等)
- 内容设置(图片、文字、链接等)
- 交互设置(点击事件、动画等)
常用配置
轮播图配置
- 上传轮播图片(建议尺寸:750×300px)
- 设置跳转链接
- 配置自动播放间隔
- 设置指示器样式
商品列表配置
- 选择数据来源(分类/指定商品)
- 设置显示数量
- 选择列表样式(大图/小图/列表)
- 配置排序规则
导航栏配置
- 添加入口图标(建议尺寸:80×80px)
- 设置入口名称
- 配置跳转链接
- 设置显示列数(3列/4列/5列)
页面设置
基础设置
- 页面标题: 浏览器标题栏显示的标题
- 页面描述: 用于SEO和分享
- 背景颜色: 页面整体背景色
- 背景图片: 页面背景图(可选)
TabBar配置
- 进入「TabBar配置」
- 配置底部导航:
- 导航名称
- 图标(默认/选中)
- 跳转页面
- 支持2-5个导航项
- 可调整导航顺序
主题配置
- 进入「主题管理」
- 选择预设主题或自定义主题
- 配置主题色:
- 主色调
- 辅助色
- 文字色
- 背景色
- 点击「应用主题」
预览与发布
实时预览
编辑过程中可以实时预览效果:
- 点击「预览」按钮
- 选择预览设备(手机/平板)
- 扫码在真机预览
保存草稿
编辑过程中可随时保存:
- 点击「保存草稿」
- 输入版本备注
- 确认保存
发布页面
编辑完成后发布:
- 点击「发布」
- 确认发布内容
- 点击「确认发布」
注意: 发布后页面立即生效,请确保已测试无误。
版本管理
系统保存页面编辑历史:
- 进入「版本管理」
- 查看历史版本列表
- 可回滚到任意历史版本
常见问题
Q: 组件拖拽后位置不对怎么办?
A: 检查父容器是否设置了正确的布局属性,或尝试清除浏览器缓存后重新编辑。
Q: 上传的图片显示模糊?
A: 请上传高清图片,建议使用推荐尺寸。系统会自动压缩,但原图质量会影响最终效果。
Q: 移动端和PC端显示效果不一致?
A: 页面装修主要针对移动端设计,请在手机或手机模拟器中预览效果。
Q: 发布后页面没有更新?
A: 请清除APP缓存或重新进入小程序,页面装修更改可能需要刷新才能看到。
