组件及用法

罗大富 BigRich大约 3 分钟前端

这节课，我们来学习微信小程序的组件。开发者可以通过组件快速搭建出页面的结构。上节课的代码中看到的 view、text，这些都是小程序组件。组件都是以标签的形式成对出现。每个组件都有属性，如：class 属性。想要查看小程序组件列表可以在微信开发文档中找到：https://developers.weixin.qq.com/miniprogram/dev/component/open in new window 。后续会结合案例来单独讲解常用的组件，大家可以大概了解下小程序的组件类型。

如果你已经学习过我们之前的前端快速入门课程，学习微信小程序的语法应该是很快的。

微信小程序的前端组件有几十个，可以分为以下几类：

视图容器
基础内容
表单组件
Skyline
XR-FRAME
导航
媒体组件
地图
画布
开放能力
原生组件说明
无障碍访问
导航栏
页面属性配置节点

这里我们重点学习一些比较常用的。

view 组件：普通视图容器，可以当作是 HTML 中的 div 标签和 p 标签，如果需要使用滚动视图，请使用 scroll-view；
text 组件：文本标签，行内标签，类似于 span 标签，现在的微信小程序也添加了 span 标签，区别是 text 组件有 user-select 属性；
swiper 与 swiper-item：swiper 滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为；swiper-item 仅可放置在swiper组件中，宽高自动设置为100%；
scroll-view 组件：滚动视图，当我们的页面内容元素过多，超过了页面视图的边界范围，就可以使用，我们就可以使用小程序中的 scroll-view 组件；
movable-view 组件：
icon 组件：图标组件，主要属性：type、size、color；
button 组件：按钮，功能不 HTML 中的 button 按钮丰富，通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权等）；
image 组件：图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

在微信小程序中，我们主要使用的长度单位是 rpx，rpx（responsive pixel）和 px（pixel）是两种不同的单位，用于适配不同屏幕的设备。

px（像素）：是设备屏幕的固定单位。在不同的设备上，1个像素可能对应不同的物理像素点。比如，在一些高密度屏幕上，1个CSS像素可能对应多个物理像素，导致显示效果可能不一致。
rpx（响应式像素）：是微信小程序提供的一种相对尺寸单位，可以根据设备的屏幕宽度自动调整大小（自适应）。屏幕宽度为 750rpx，可以被认为是微信小程序开发设计稿的宽度。

rpx 可以解决不同设备分辨率差异的问题，使得界面在不同设备上展示更加一致。在微信小程序中，使用 rpx 单位可以确保元素的大小和间距在不同设备上的适配性。rpx 把所有的设备屏幕，在宽度上分成 750 份。

例如，我们可以创建两个 view 盒子，宽高分别为 175rpx 和 175px：

<view class="rpx-box">盒子单位是 rpx</view>
<view class="px-box">盒子单位是 px</view>

.rpx-box {
    width: 175rpx;
    height: 175rpx;
    background-color: yellow;
}

.px-box {
    width: 175px;
    height: 175px;
    background-color: darkcyan;
}

使用 iPhone6/7/8/X 时，px-box 盒子的大小是大于 rpx-box 的，而当我们把模拟器设备改成 iPad Pro 时，rpx-box 盒子的大小就大于 px-box 了。