页面构造器使用
5 月 03,2025 
By admin 
页面构造器使用指南
概述
页面构造器让你可以在 WordPress 后台通过可视化方式配置小程序页面内容。
创建新页面
1. 添加页面
- WordPress 后台 → 页面 → 新建页面
- 输入页面标题（如 “关于我们”）
- 在右侧 页面属性 中选择模板：页面构造器
2. 配置页面信息
| 字段 | 说明 |
|---|---|
| 页面 Slug | 页面唯一标识，用于小程序导航（英文，如 about） |
| 页面标题 | 小程序中显示的标题 |
| 显示 TabBar | 是否在底部显示导航栏 |
3. 添加模块
在页面内容区域，使用简码添加模块：
[page_module type="ztext" title="关于我们"]
或使用模块编辑器添加多个模块。
内置模块列表
基础模块
| 模块类型 | 说明 | 简码示例 |
|---|---|---|
ztext | 文本模块 | [page_module type="ztext" title="标题"] |
zbanner | 图片轮播 | [page_module type="zbanner"] |
zimage | 单图 | [page_module type="zimage" src="图片URL"] |
zdivider | 分割线 | [page_module type="zdivider"] |
功能模块
| 模块类型 | 说明 | 简码示例 |
|---|---|---|
zproductlist | 商品列表 | [page_module type="zproductlist"] |
zproductdetail | 商品详情 | [page_module type="zproductdetail" product_id="123"] |
zmenu | 菜单分类 | [page_module type="zmenu"] |
zcart | 购物车 | [page_module type="zcart"] |
zorderlist | 订单列表 | [page_module type="zorderlist"] |
zorderconfirm | 订单确认 | [page_module type="zorderconfirm"] |
zloginform | 登录表单 | [page_module type="zloginform"] |
营销模块
| 模块类型 | 说明 |
|---|---|
zcoupons | 优惠券 |
zpromobar | 促销公告栏 |
TabBar 配置
1. 进入配置页面
WordPress 后台 → 咖啡小程序 → TabBar 设置
2. 添加导航项
| 字段 | 说明 | 示例 |
|---|---|---|
| 标题 | 导航名称 | 首页 |
| Slug | 关联的页面 Slug | home |
| 图标 | 默认状态图标（emoji 或图片 URL） | 🏠 |
| 激活图标 | 选中状态图标 | 🏠 |
| 排序 | 显示顺序（数字越小越靠前） | 1 |
3. 保存配置
- 点击 保存
- 小程序端会自动获取最新配置
小程序端导航
从其他页面跳转到构造的页面
在你的小程序中，调用：
import { navigateToPage } from '@/utils/navigation'
// 跳转到 "关于我们" 页面
navigateToPage('about')
// 带参数跳转
navigateToPage('product-detail', { id: 123 })
预置页面 Slug
插件内置了以下页面 Slug，可直接使用：
| Slug | 页面类型 | 说明 |
|---|---|---|
home | 首页 | 应用首页 |
menu | 菜单 | 商品分类菜单 |
cart | 购物车 | 购物车页面 |
profile | 个人中心 | 用户中心 |
orders | 订单列表 | 我的订单 |
order-detail | 订单详情 | 订单详细信息 |
login | 登录 | 登录页面 |
product-detail | 商品详情 | 商品详情页 |
示例：创建 “关于我们” 页面
创建页面
- 新建页面，标题：”关于我们”
- Slug：
about
添加内容
[page_module type="zbanner"]
[page_module type=”ztext” title=”公司简介”]
公司简介内容…
[page_module type=”zimage” src=”https://example.com/about.jpg”]
配置 TabBar
- 添加新导航项
- 标题：关于
- Slug：
about
小程序端使用
navigateToPage('about')
4 月 27, 2026