小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是：视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问。

1、view组件

普通视图区域组件，类似于html中的div，是一个块级元素，常用来实现页面的布局效果。

实现上图布局代码如下：

<view class="container">
   <view>A</view>
   <view>B</view>
   <view>C</view>
</view>

wxss代码如下：

.container view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container view:nth-child(1){
  background-color: lightgreen;
}
.container view:nth-child(2){
  background-color: lightpink;
}
.container view:nth-child(3){
  background-color: lightskyblue;
}
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

2、scroll-view组件

可滚动的视图区域，常用来实现滚动列表效果。

实现上图布局代码如下：

<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.container view {
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container view:nth-child(1){
  background-color: lightgreen;
}
.container view:nth-child(2){
  background-color: lightpink;
}
.container view:nth-child(3){
  background-color: lightskyblue;
}
.container {
  border: 1px solid red;
  height: 140px;
}

3、swiper和swiper-item组件

轮播图容器组件和轮播图item组件。常用属性如下：

实现上图布局代码如下：

<swiper class="swiper-container" indicator-dots>
  <swiper-item>
    <view class="item">第一个轮播图</view>
  </swiper-item>
  <swiper-item>
    <view class="item">第二个轮播图</view>
  </swiper-item>
  <swiper-item>
    <view class="item">第三个轮播图</view>
  </swiper-item>
</swiper>

.swiper-container {
  height: 150px;
}
.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item {
  background-color: lightskyblue;
}
swiper-item:nth-child(2) .item {
  background-color: lightcoral;
}
swiper-item:nth-child(3) .item {
  background-color: ightgoldenrodyellow;
}

1、text组件

文本组件，类似于html中的span标签，是一个行内元素。

通过text组件的sekectable属性，实现长按选中文本内容效果。

<view>
  手机号码支持长按选中效果。
  <text selectable="true">19800088888</text>
</view>

2、rich-text组件

富文本组件，支持把html字符串渲染为wxml结构。

通过rich-text组件的nodes属性节点，把html字符串渲染为对应的ui结构。

<rich-text nodes="<h1 style='color:red'>标题</h1>"/>

1、button组件

按钮组件，功能比html中的button按钮丰富，通过open-type属性就可以调用微信提供的各种功能，如客服、转发、获取用户授权、获取用户信息等。

实现上图按钮效果代码如下：

<view>*******按钮实例*******</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>*******size="mini"小尺寸按钮*******</view>
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色调按钮</button>
<button size="mini" type="warn">警告按钮</button>
<view>*******plain镂空按钮*******</view>
<button size="mini" plain="true">默认按钮</button>
<button size="mini" plain="true" type="primary">主色调按钮</button>
<button size="mini" plain="true" type="warn">警告按钮</button>

2、image组件

图片组件，image组件默认宽度约300px、高度约240px。image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

<image></image>
<image src="/images/1.png" mode="aspectFit"></image>

3、navigator组件

页面导航组件，类似于html中的a链接。