本文将介绍如何通过微搭应用编辑器搭建美业小程序。
操作步骤
步骤1：创建小程序应用
1. 登录 微搭控制台，进入应用页面，选择新建自定义应用。
2. 录入应用名称后单击确定，跳转后单击空白页完成应用创建。
步骤2：搭建首页
1. 进入首页 > 设置进入页面样式将页面背景调为 #F2F3F5。
2. 最上方为 banner 图展示首先使用数据详情获取到店铺信息。
3. 获取到信息后使用轮播容器展示图片
3.1 首先清空轮播容器。
3.2 添加循环展示组件。
3.3 循环展示组件绑定数据字段。
3.4 添加图片组件绑定循环数据字段。
3.5 整体结构目录。
4. 使用宫格导航展示服务分类 icon。
使用数据列表组件获取服务分类列表。
将获取到的数据绑定至宫格导航。
5. 热门推荐部分搭建。
使用数据列表获取热门推荐服务可以自定义配置筛选、排序显示条数。
创建热门推荐标题及更多跳转。
使用网格布局及循环展示组件创建展示卡片并绑定数据。
6. 店铺信息绑定。
使用图片及图文展示项搭建店铺信息卡片，绑定数据详情获取的店铺信息。
7. 添加 Tab 栏组件并配置。
步骤3：搭建服务页面
1. 搭建搜索框。
1.1 添加单行输入以及图标组件搭建搜索框。
1.2 新建变量 search、currentSearch、categoryId、initCategory：
[{"title":"所有分类","value":""}]。
1.3 单行输入添加点击事件，值改变为 currentSearch 赋值。
1.4 图标添加点击事件，单击后使数据列表刷新。
2. 使用数据列表查询服务分类列表并绑定侧边选项卡。
使用数据列表获取服务分类对应的服务列表。
将获取到的服务列表绑定至循环展示，给服务添加点击名称及图片跳转到详情页面。给预约按钮添加点击跳转事件。
3. 添加 Tab 栏并设置标签列表及选择页面。
步骤4：搭建服务详情页面
1. 页面新增服务标识 URL 参数。
2. 使用数据详情获取当前服务标识详情。
3. 将获取到的信息绑定。
4. 使用数据详情获取店铺信息。
5. 绑定店铺信息。
6. 设置页脚展示
单击店铺跳转地图位置。
单击客服为拨打电话。
立即预约跳转预约界面。
说明
在代码编辑器中使用 wx.openLocation 方法调用地图。
步骤5：搭建预约页面
1. 新建页面 URL 参数 resverId（修改订单时回传）、serviceId（从服务跳转预约带入；必填）。
2. 使用 URL 参数 serviceId 作为筛选参数。
3. 使用数据详情获取客户订单信息。
注意
从我的预约中修改订单调整至预约界面时会获取订单详情。
筛选条件值为回传的 resverId。
4. 搭建服务展示并绑定数据。
5. 添加表单容器并进行数据源绑定。
6. 判断表单场景新预约为新增（create）修改为更新（update）更新需要增加预约标识在 URL 参数中（resverId）。
7. 隐藏不需要输入的参数并设置提交事件。
隐藏自动获取的参数。
设置提交事件。
8. 提交成功后跳转至成功结果页展示预约信息且可以单击返回首页。
9. 提交失败后跳转至失败页且可以重新预约。
页面接受传入的 URL 参数服务标识（serviceId）。
重新预约绑定跳转事件。
步骤6：搭建我的界面
1. 使用自定义组件获取 头像、昵称。
2. 添加我的预约跳转。
3. 添加 Tab 栏。
步骤7：搭建我的预约界面
1. 使用数据详情获取店铺信息。
2. 使用数据列表通过筛选预约人标识后获取预约信息。
3. 将获取到的信息绑定。
4. 通过获取到的订单状态显示/隐藏修改和取消按钮。
5. 增加修改点击事件。
6. 增加取消点击事件。
点击后打开弹窗确认。
增加逻辑判断如果取消则关闭弹窗。
如果确认取消订单则传入订单标识和状态调用数据源进行订单状态更新。
至此，我们已经完成了美业的服务展示、服务预约、订单管理、店铺展示的流程，实际应用搭建时，可以根据自己的业务特性，灵活调整各功能模块流程。
