小程序开发入门：基础组件与Flex布局实战指南

小程序入门最难的不是语法，而是不知道一个页面到底该从哪儿下手。很多人一上来就去看API文档，结果被 wx.request、setData、生命周期这些概念劝退了。其实小程序开发的核心就两块：基础组件和布局。组件是页面的砖块，布局是盖房子的图纸，这两样拿下了，剩下的事情基本就是查文档。

这篇文章不谈大而全的理论，就老老实实拆解我在实际项目里最常用到的一批基础组件，以及小程序里那套绕不开的flex布局体系。内容完全面向实战，适合刚接触小程序、或者写了好几个页面但一直觉得布局别扭的朋友。看完这篇文章，至少能把手里的页面写得整齐、规范，不再靠调间距硬凑。

1. 组件与布局的整体思路拆解

1.1 为什么组件和布局是入门的关键

小程序跟传统网页开发的思路非常像，但又不完全一样。它的页面结构由WXML描述，样式由WXSS负责，逻辑由JavaScript处理。其中的WXML和WXSS，语法和HTML/CSS相比做了一些裁剪和定制，但核心的文档流、盒模型、选择器这些概念是通用的。

刚入门的同学最容易犯的一个错误，就是一上来就研究复杂的自定义组件、分包加载、性能优化这些高阶课题。这些东西当然重要，但不应该是第一步。一个页面的基础是什么？是先有一堆组件把内容展示出来，再让这些组件按照设计稿整齐地排列。这两个能力对应了小程序开发中最常用的两套知识：基础组件和flex布局。

我在带新人或者帮朋友看代码的时候，发现大多数布局混乱、页面错位的问题，根子都出在基础组件属性用错了，或者flex布局没有真正理解透。比如一个 view 默认是块级元素，一个 text 默认是行内元素，它们的行为跟HTML里的 div 和 span 是类似的。如果这个基础没打好，后面所有的样式调整都是无头苍蝇。

还有一个很重要的点是，小程序官方提供了丰富的组件库底子，从最基础的 view、text、image，到表单类的 input、button、picker，再到交互类的 swiper、scroll-view、canvas，覆盖了绝大多数业务场景。入门阶段先把这些最常用组件的脾气摸清楚，后面写什么页面都不慌。

1.2 小程序布局方案的选型考量

在小程序里写布局，最主流、也最推荐的就是flex布局。为什么是flex？因为它足够灵活，而且一套代码在绝大多数机型上表现稳定。小程序虽然支持传统的 float 和 position 布局，但 float 在列表对齐、垂直居中这些场景里非常麻烦，position 定位又太死板，不利于适配不同屏幕尺寸。

flex布局在移动端的优势是天然的：主轴和交叉轴的概念，让水平排列、垂直排列、居中、两端对齐这些高频操作变得极其简单。而且小程序里所有组件默认都沿用了flex的弹性盒模型思想，只要你写了 display: flex，子元素的排列方式立刻变得可控。

还有一个要考虑的点是单位。小程序里最常用的尺寸单位是 rpx（responsive pixel），它会根据屏幕宽度自动适配。设计稿宽度通常是750px，在iPhone 6（375pt）上，1rpx等于0.5pt。这意味着你不用再为了适配各种机型而写一堆媒体查询，直接用rpx按设计稿标注的尺寸写就行。

但要注意，rpx不是万能的。在涉及字体大小、边框粗细、某些固定像素场景（比如顶部导航栏高度）时，直接使用 px 往往更靠谱。这个细节很多人踩过坑，后面我会专门讲。

1.3 从页面结构反推需要哪些组件

我先分享一个我自己写页面时的习惯：拿到设计稿，先不做界面，先拆解页面结构。把一个完整的页面拆成几个大的区块，再把每个区块拆成具体的组件和布局方式。

举个例子，一个典型的商品详情页，从上到下大概是：顶部导航栏、商品轮播图、价格和标题、规格选择、店铺信息、商品详情、底部操作栏。对应到组件上，就是 swiper、view、text、image、button、scroll-view 这些的组合。拆解完之后，页面的实现路径就非常清晰了：先搭骨架（布局），再填内容（组件），最后调样式。

后面的章节，我会先把最常用的几个基础组件逐个分析一遍，然后专门讲flex布局的核心要点，最后用一个完整的页面案例，把组件和布局串起来走一遍流程。

2. 常用基础组件的实操要点

2.1 view、text、image 三件套

view、text、image 是小程序里出场率最高的三个组件，几乎每个页面都离不开它们，所以我单独拿出来讲。

view 就是个容器组件，官方文档里的解释是"视图容器"。它对应HTML里的 div，默认是块级元素，宽度撑满父容器，高度由内容决定。日常开发中，我用 view 做的事情大概有这么几类：作为页面的区块容器、配合flex布局搭建结构、包裹其他组件实现间距和位置调整、通过hover-class实现点击效果。

这里有一个特别容易被忽略的属性叫 hover-class。在微信小程序里，view 没有内置的点击态样式，但只要你给 view 加了 hover-class，它就会在手指按下去的时候显示对应的样式类。比如你写 hover-class="view-hover"，然后定义 .view-hover { opacity: 0.8; background-color: #f5f5f5; }，点击反馈立刻就出来了。这个思路比监听 touchstart/touchend 事件去手动切换class要省事得多。

我实际写页面时，view 使用频率极高，但要小心一点：view 里嵌套 view 的时候，子 view 的宽度如果不想占满全屏，记得设置 display: inline-block 或者利用flex的 flex-shrink: 0 等属性控制，否则很容易出现宽度溢出的问题。

text 是文本组件，对应HTML里的 span，默认是行内元素。它有几个属性值得留意：selectable 控制文本是否可选中，user-select 在部分版本里也支持；decode 可以把  、< 这类实体字符解析成真实字符。我在显示富文本摘要、协议文本、价格数字时都会用到 text。

注意：text 组件内只支持嵌套 text，不能嵌套 view 或 image。这个限制和HTML不一样，我第一次写的时候就把 image 塞进 text 里，结果样式完全乱了。如果需要在文本中间插入图标，用 view 配合行内样式或者背景图实现会更稳。

image 是图片组件，它有几个默认行为必须要知道。第一，image 默认宽度是320px、高度是240px，如果你不设置宽高，它在页面里会以这个默认尺寸显示，而不是根据图片原始尺寸自适应。第二，它默认的 mode 是 scaleToFill，也就是拉伸铺满整个容器，这会导致图片变形。正确做法是根据你的设计需求选择合适的模式：aspectFit 是保持宽高比，图片完整显示在容器内；aspectFill 是保持宽高比并填满容器，图片会裁剪超出部分；widthFix 是宽度固定，高度自适应，适合文章列表的封面图。

我在列表页展示商品图时，一般用 aspectFill，让图片填满固定尺寸的容器，再配合 border-radius 裁出圆角效果。但在展示用户头像这种需要完整呈现的场景，用 aspectFit 更合适。另外，image 还提供了 lazy-load 属性，在列表滚动场景里开启它，可以明显减少首屏图片加载压力。

2.2 表单组件的正确打开方式

表单组件里，input、textarea、button、picker、switch、radio、checkbox 这些是高频使用的。

先说 input。它的 type 属性决定了键盘类型，常见的有 text、number、idcard、digit。这里注意一点：type="number" 调出的键盘不带小数点，如果用户要输入金额，应该用 type="digit"。而 password 属性用来让输入框变密码态，实际上我一般用 password="{{true}}"，或者直接用 type="password" 的写法也可以。

input 还有个容易忽略的地方是 placeholder-style 和 placeholder-class。它们专门用来控制占位符文字的样式。很多人想让占位符变灰、变小、变浅，于是直接给 input 设置样式，结果发现不生效，因为占位符有自己独立的样式控制入口。我第一次调这个也懵了好一会儿。

button 组件的默认样式比较丑，有一个默认边框和默认背景色。如果要做自