【小程序从0到1】小程序常用组件一览

欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥$React/小程序$🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇

• 常用的视图容器组件
• • view组件的基本使用
  • scroll-view组件的基本使用
  • swiper和swiper-item组件的基本使用
• 常用的基础内容组件
• • text组件的基本使用
  • rich-text组件的基本使用
• 其他常用组件
• • button按钮的基本使用
  • image组件的基本使用
• 小程序 API 三大分类

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

上篇文章中，我们了解到，小程序的组件也是由宿主环境提供的。开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为9大类，分别是：

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

本篇文章，我们将学习小程序常用组件view｜scroll-view｜swiper｜swiper-item｜text｜rich-text｜button｜image等组件的基本用法以及API的三大分类。

常用的视图容器组件

1. view

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

2. scroll-view

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

3. swiper和swiper-item

• 轮播图的容器组件和轮播图的item项组件

view组件的基本使用

需求：实现如图的flex横向布局效果

1. 编写WXML页面代码（牢记div ⇒ view）

<view class="container1">
  <view>Aview>
  <view>Bview>
  <view>Cview>
view>

2. 编写WXSS样式代码（使用CSS3选择器以及flex布局）

/* pages/list/list.wxss */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1) {
  background-color: lightgreen;
}
.container1 view:nth-child(2) {
  background-color: lightskyblue;
}
.container1 view:nth-child(3) {
  background-color: lightpink;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

3. 刷新模拟器查看效果

scroll-view组件的基本使用

需求：实现如图的纵向滚动效果

1. 编写WXML中的scroll-view标签，并给其一个scroll-y属性代表垂直滚动

<scroll-view class="container1" scroll-y>
  <view>Aview>
  <view>Bview>
  <view>Cview>
scroll-view>

2. 编写WXSS样式，在之前讲解view的样式的基础上，为container1类增加一个最大高度为120px即可。

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

需求：实现如图的轮播图效果

1. 编写WXML页面代码

<swiper class="swiper-container" indicator-dots>
  <swiper-item>
    <view class="item">Aview>
  swiper-item>
  <swiper-item>
    <view class="item">Bview>
  swiper-item>
  <swiper-item>
    <view class="item">Cview>
  swiper-item>
swiper>

2. 编写WXSS样式代码

/* pages/list/list.wxss */
.swiper-container {
  height: 150px; /* 轮播图容器的高度 */
}
.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) {
  background-color: lightgreen;
}
swiper-item:nth-child(2) {
  background-color: lightskyblue;
}
swiper-item:nth-child(3) {
  background-color: lightpink;
}

swiper 组件的常用属性

常用的基础内容组件

1. text

• 文本组件
• 类似于HTML中的span，是一个行内元素

2. rich-text

• 富文本组件
• 支持把HTML字符串渲染为WXML结构

text组件的基本使用

需求：通过 text 组件的user-select属性，实现长按选中文本内容的效果

在小程序中，view组件是不支持长按选中复制的。我们可以使用text组件，为text组件加上一个user-select属性，此时就可以支持用户长按选中文本内容并复制了。

rich-text组件的基本使用

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

rich-text组件提供了一个nodes属性，可以在nodes属性中放置html标签内容（有点类似JSX，只不过JSX是在JS文件中放置html标签）。

值得注意的是：nodes内容使用了双引号，那么内部的行内样式，就不能使用双引号，必须使用单引号。

其他常用组件

1. button

• 按钮组件
• 功能比HTML中的button按钮更丰富
• 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息）

2. image

• 图片组件
• image组件默认宽度约为300px、高度约为240px

3. navigator

• 页面导航组件
• 类似于HTML中的 a 链接

button按钮的基本使用

除了图中的一些api之外，还支持我们网页开发中的WebView属性。

包括但不限于：

disabled / loading / form-type(submit / reset) 等等……

按钮组件的使用中，还可以依赖于微信开放的官方API。

image组件的基本使用

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

WXSS样式：

/* pages/list/list.wxss */
image {
  border: 1px red solid;
}

小程序 API 三大分类

小程序的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等……

1. 事件监听API

• 特点：以on开头，用来监听某些事件的触发
• 例如，wx.onWindowResize(function callback)监听窗口尺寸变化事件

2. 同步API

• 以Sync结尾的API都是同步API
• 同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
• 例如，wx.setStorageSync('key', 'value')向本地存储写入内容

3. 异步API

• 类似于jQery中的$.ajax(options)函数，需要通过 success、fail、complate接受调用的结果
• 例如，wx.request()发起网络数据请求，通过success回调函数接受数据

下篇文章内容：小程序模版与配置
专栏订阅入口【小程序｜原力计划】