“喜茶Go”店商微信小程序界面布局的架构思路（源代码讲解）

作者介绍：郝天翔，10年移动互联网软件行业经验，全栈高级软件工程师，微信生态开发先行者，主要参与智慧城市新零售电商领域方案的设计与实施，本次分享商业案例“喜茶Go”，已落地于全国多座城市，其小程序产品设计方案受到商家与消费者的广泛一致好评。

精彩回顾

---

从上一节课的概述中，我们讲了“喜茶Go”微信小程序1.0版本的首页设计思想，展示了“茶饮商品”的界面 高保真效果图、功能布局、订单下单、商家信息 展现效果，本节内容，我将详细介绍 界面布局的架构思路 ，剖析源代码的实现原理。

学习前，您需要明确的是：本次商业实战案例教程，并不是入门教程，是面向中高级软件开发业内人士学习的教程，需要具备一定的CSS、Javascript、HTML5、VUE、JSON数据对象基础知识。

如果您尚未掌握如上知识，建议您先学习入门教程，然后再来学习本节内容。

 

Step 1：首先开始全局配置，设置底部菜单展现效果，顶部标题栏样式

---

明确整体风格后，首先设置顶部、底部栏样式

 

打开微信开发者工具，找到根目录下 app.json 文件，如下图：

 

找到 tabbar

 

细节说明：

熟悉配置项

如果你对全局配置文件不熟悉，想了解更多关于app.json文件的配置说明，请参考官方文档（点击这里是传送门）

Step 2：首页布局，规划功能区

---

打开index.wxml文件，如图：

首页布局css类说明

先布局，再写wxss

     弹出层，仍然用js表达式控制wxss，实现展现／隐藏

      

用js控制css

 

     Step3: 编写wxss，调试界面效果

---