1. 组件的九大类

• 视图容器
• 基础内容
• 表单组件
• 导航组件
• 媒体组件
• map地图组件
• canvas画布组件
• 开放能力
• 无障碍访问

2. 常用的视图容器类组件

2.1. view

    普通视图区域

    类似于HTML中的div，是一个块级元素

2.2. scroll-view

    可滚动的视图区域

    常用来实现轮动列表的效果

2.3. swiper 和swiper-item

    轮播图容器组件和轮播图item组件

2.1 view组件的基础使用

<!--index.wxml-->
<view class="container">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

/**index.wxss**/
.container{
  display: flex;
  justify-content: space-around;
}
.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: aqua;
}

2.2 scroll-view组件的基本使用

<!--index.wxml-->
<!-- scroll-y 属性：允许纵向滚动 -->
<!-- scroll-x 属性：允许横向滚动 -->
<!-- 注意：使用竖向滚动时，必须给scroll-view一个固定高度 -->
<scroll-view class="container" scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

/**index.wxss**/
.container{
  height: 100px;
}
.container view{
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: aqua;
}

2.3 swiper和swiper-item组件的基本使用

<!--index.wxml-->
<swiper class="swiper-container">
  <swiper-item>
    <view>1</view>
  </swiper-item>
  <swiper-item>
    <view>1</view>
  </swiper-item>
  <swiper-item>
    <view>1</view>
  </swiper-item>
</swiper>

/**index.wxss**/
.swiper-container view{
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: aqua;
}

2.3.1 swiper组件的常用属性

<swiper class="swiper-container" indicator-dots inindicator-color="" indicator-active-color="" autoplay interval="3000" circular></swiper>

3. 常用的基础组件 内容组件

3.1. text

    文本组件

    类似于HTML中span标签，是一个行内元素

3.2. rich-text

    富文本组件

    支持把HTML字符串渲染为WXML解构

3.1 text 组件基本使用

<!--index.wxml-->
<!-- 通过text组件的selectable属性，实现长按选中文本内容 -->
<!-- 在小程序中只有text组件才支持长按操作 -->
<view>
  <text>手机号支持长按选中：</text>
  <text selectable>173*****684</text>
</view>

3.2 rich-text组件的基本使用

<!-- 通过nodes属性 -->
<rich-text nodes="<h1 style='color: red;''>标题</h1>"/>

4. 其他组件

4.1. button

    按钮组件

    功能比HTML中的button按钮丰富

    通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等）

4.2. image

    图片组件

    image组件默认宽度约300px，高度约240px

4.3. navigator

    页面导航组件

    类似于HTML中的a链接

4.1 button组件

<!--index.wxml-->
<view>---------------通过 type 指定按钮类型--------------</view>
<button>普通按钮</button>
<button type="primary">主色按钮</button>
<button type="warn">警告按钮</button>
<view>---------------size="mini" 小尺寸按钮--------------</view>
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>------------------- plain 镂空按钮-------------------</view>
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

4.2 image组件的基本使用

<!--index.wxml-->
<image src="/images/1.png" mode="scaleToFill"/>

4.2.1 image组件的mode属性

image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：