小程序布局怎么做才好看又省事做小程序开发，布局是绕不开的第一关。页面好不好看、用户用着顺不顺手，很大程度上取决于布局写得怎么�样。这篇文章就聊聊小程序布局的核心思路和常用方法，帮你少走弯路。先搞清楚小程序布局的基本逻辑小程序的页面结构和网页差不多，也是用类似HTML的标签加样式来排版。不过小程序用的是自己的标签体系，比如view相当于网页里的div，text相当于span，image就是图片标签。写法上有个文件专门管结构，一个文件管样式，结构和样式是分开的。样式单位方面，小程序有个特别好用的单位叫rpx。它的好处是能自适应屏幕宽度，不管用户用什么手机，750rpx永远等于屏幕的整个宽度。也就是说设计稿如果是750像素宽，你在写样式的时候直接把像素值换成rpx就行，一比一对应，不用自己算比例。这是小程序布局相比网页布局省心的地方。Flex布局是主力小程序里最常用的排版方式就是Flex布局，可以说掌握了Flex，百分之八十的布局问题都能解决。Flex布局用起来很简单，给父容器加上display等于flex这个属性，子元素就会横向排列。想换成竖向排列，加个flex-direction等于column就行。想让子元素居中，用justify-content和align-items这两个属性，一个管主轴方向的对齐，一个管垂直方向的对齐。实际开发中几个高频用法要记牢：顶部导航栏，左边一个返回按钮，中间标题，右边一个菜单，用flex加justify-content等于space-between就能轻松实现；列表页每一行左边图片右边文字，用flex横向排列再配合align-items等于center做垂直居中；底部标签栏几个图标平分宽度，每个子元素设置flex等于1就行。还有个属性叫flex-wrap，默认情况下子元素太挤了也不会换行，设置成wrap之后就能自动换行，做九宫格、瀑布流这类多行多列的布局时特别有用。几种常见页面的布局思路首页布局一般是从上往下分成几个区块：搜索框、轮播图、分类入口、推荐列表。每一块就是一个大的view容器，内部再用flex处理细节。注意区块之间要留出间距，可以用margin或者padding，别让内容挤在一起。列表页布局重点是每一行怎么排。常见的样式是左图右文，图片固定宽高，右边文字区域用flex等于1占满剩余空间，文字多行的时候记得设置超出隐藏，不然布局会被撑乱。详情页布局相对简单，图片区、标题区、价格区、描述区从上往下排就行，关键是字号、颜色、间距要有层次感，重要的信息放大加粗，次要信息缩小变灰。表单页布局要注意输入框的宽度统一，标签和输入框对齐，用flex让标签固定宽度、输入框占剩余空间，整体就会很整齐。布局常见的坑和解决办法第一个坑是图片变形。设置图片宽度的时候，高度没有跟着调整，图片就会被拉伸。解决办法是给image标签设置mode属性等于widthFix，高度会根据宽度自动等比缩放。第二个坑是iPhone底部小黑条遮挡内容。底部固定的按钮栏要预留安全区域，用constant和env设置底部安全距离，不然全面屏手机上按钮会被小黑条压住。第三个坑是滚动问题。页面整体滚动直接用页面本身的滚动就行，局部区域滚动需要用scroll-view组件，并且一定要给它设置固定高度，不然滚不动。第四个坑是文字和图片没对齐。小图标和文字放一起经常高低不齐，用flex布局让它们垂直居中，比调margin靠谱得多。写布局的几个好习惯第一，多用class少用行内样式，样式统一放在样式文件里管理，后期改起来方便。第二，公共样式抽出来，比如按钮、卡片、间距这些重复的样式写成公共类，直接复用。第三，动手写之前先看一眼设计稿，在脑子里把页面拆成一块一块的容器，想清楚每个容器用什么方式排，再开始写代码，效率会高很多。总结一下，小程序布局的核心就是rpx单位加Flex布局，再配合几种常见页面的排版套路，多练几个页面就能上手。遇到问题先想想是不是Flex属性没用对，图片模式有没有设置，安全区域有没有预留，这几个点检查下来，大部分布局问题都能解决。
