组件及用法

罗大富 BigRich大约 3 分钟前端

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

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

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

  1. 视图容器
  2. 基础内容
  3. 表单组件
  4. Skyline
  5. XR-FRAME
  6. 导航
  7. 媒体组件
  8. 地图
  9. 画布
  10. 开放能力
  11. 原生组件说明
  12. 无障碍访问
  13. 导航栏
  14. 页面属性配置节点

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

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

在微信小程序中,我们主要使用的长度单位是 rpxrpx(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 了。

上次编辑于:
贡献者: 罗大富 BigRich