小程序中各个组件以及其作用

各位小伙伴又见面啦，今天我们来学习微信小程序中包含但不限于使用的组件以及常见API。废话不多说，我们马上进入正题。

一，常见组件

组件是小程序应用中可缺失的一部分，就像吃羊头没有老马家的满口香椒盐的浇给，索然无味。

1，scroll-view

功能描述

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

1. 横向滚动需打开 enable-flex 以兼容 WebView，如
2. 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
3. 使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

2，swiper

功能描述

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

1. 使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

3，view

重中之重！！！孩子们记住了（敲黑板）

功能描述

视图容器

示例代码

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column\n纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

4，button

功能描述

按钮。

5，checkbox

功能描述

多选项目。

6，input

功能描述

输入框。

7，label

功能描述

用来改进表单组件的可用性。

使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

8，form

功能描述

表单。将组件内的用户输入的switch，input，checkbox，slider，radio，picker提交。

当点击form表单中form-type为submit的button组件时，会将表单组件中的value值进行提交，需要在表单组件中加上name来作为key。

9，camera

功能描述

系统相机。扫码二维码功能。

10，image

功能描述

图片。支持JPG，PNG，SVG，WEBP，GIF，等格式。

1. 使用svg格式且mode=scaleToFil时，WebView会居中。
2. svg格式不支持百分比单位
3. svg格式不支持