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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43687095/article/details/87598240

作者介绍:郝天翔,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,调试界面效果


 

展开阅读全文

没有更多推荐了,返回首页