微信小程序开发——第 4 章 场景应用

本文总结了微信小程序的开发流程,重点介绍了基本的布局方法——Flex布局。从基本概念到容器和项目的属性,详细讲解了如何使用Flex布局实现灵活的界面设计,包括flex-direction、justify-content、align-items等关键属性的应用。
摘要由CSDN通过智能技术生成

微信小程序学习总结

4.1 开发流程基本介绍

首先我们对整个小程序整体的产品体验有一个清晰的规划和定义,一般会通过交互图或者手稿描绘小程序的界面交互和界面之间的跳转关系。
在这里插入图片描述
优先完成WXML+WXSS还原设计稿,把界面涉及到的元素和视觉细节先调试完成。最后我们把按照页面交互梳理出每个页面的data部分,填充WXML的模板语法,还有完成JS逻辑部分。

4.2 基本的布局方法——Flex布局

采用flex布局的元素,简称为“容器”,在代码示例中以container表示容器的类名。容器内的元素简称为“项目”,在代码示例中以item表示项目的类名。
在这里插入图片描述

4.2.1 基本概念

flex是一种更灵活的布局模型,使容器能通过改变里面项目的高宽、顺序,来对可用空间实现最佳的填充,方便适配不同大小的内容区域。
默认的情况下,水平方向的是主轴(main axis),垂直方向的是交叉轴(cross axis)。项目是在主轴上排列,排满后在交叉轴方向换行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值