组件化思维（上）：视图与基础内容组件的深度探索

所属专栏 ：《微信小程序实战笔记30讲》
作者：码力无边

前言

欢迎进入我们的"核心进阶篇"！在第一阶段，我们已经掌握了小程序开发的"三驾马车"：WXML、WXSS和JavaScript。我们学会了如何创建页面、绑定数据、响应事件。这就像我们学会了制造砖块、和水泥、砌墙壁。

现在，我们要从"砌墙工"升级为"建筑师"。建筑师不会满足于一块块地砌砖，他们会使用预制好的门、窗、横梁等组件来高效地搭建宏伟的建筑。

小程序开发也是如此。它为我们提供了大量功能丰富、开箱即用的内置组件。组件化思维是小程序开发的精髓。学会熟练运用这些官方组件，能让你事半功倍，快速构建出体验优良的复杂界面。

今天，我们将首先探索最基础也是最重要的两类组件：视图容器组件 和基础内容组件。它们是构成小程序界面骨骼的基石。

一、视图容器组件：布局的瑞士军刀

视图容器组件自身通常不显示具体内容，它们的主要作用是作为"容器"，包裹其他组件，帮助我们实现各种复杂的页面布局。

1. `<view>`：无处不在的万能盒子

我们对<view>已经不陌生了，它就像网页开发中的<div>，是小程序布局中最基础、最核心的组件。它默认没有任何特殊样式，你可以通过WXSS结合Flex布局，把它变成任何你想要的形状和布局。

回顾Flex布局在小程序中的应用：

在WXSS中，Flex布局是实现小程序界面布局的首选方案。

css 复制代码

.container {
  display: flex; /* 声明为Flex容器 */
  flex-direction: row; /* 主轴方向：row(水平) / column(垂直) */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
}

几乎所有复杂的布局，都可以通过<view>的嵌套和Flex属性的组合来实现。

2. `<scroll-view>`：可滚动的视图区域

当你的内容超出一屏时，就需要一个可以滚动的区域。<scroll-view>就是为此而生的。它允许你在一个固定高度的容器内，自由地滚动内容。

核心属性：

scroll-y: 允许纵向滚动。
scroll-x: 允许横向滚动。
scroll-top: 设置竖向滚动条位置（可用于代码控制滚动到指定位置）。
bindscroll: 滚动时触发的事件。

动手实践 ：

让我们创建一个纵向滚动的产品列表。

WXML:

html 复制代码

<scroll-view class="product-list" scroll-y>
  <!-- 在这里循环生成很多个商品项 -->
  <view class="product-item">商品 1</view>
  <view class="product-item">商品 2</view>
  <view class="product-item">商品 3</view>
  <!-- ...重复20次... -->
  <view class="product-item">商品 20</view>
</scroll-view>

WXSS:

css 复制代码

.product-list {
  height: 500rpx; /* 必须给scroll-view设置一个固定的高度 */
  border: 1px solid #ccc;
}

.product-item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  border-bottom: 1px solid #eee;
}

保存代码，你会看到一个固定高度的列表，并且可以上下滑动。

注意：使用scroll-view时，必须给它设置一个明确的高度（scroll-y）或宽度（scroll-x），否则它不知道滚动的边界在哪里。

3. `<swiper>` 与 `<swiper-item>`：轮播图的黄金搭档

轮播图（Banner）是电商、新闻等应用首页的标配。在小程序中，实现轮播图非常简单，只需使用<swiper>和<swiper-item>这对组合组件。

<swiper>: 轮播图的外层容器。
<swiper-item>: 每一张轮播卡片 。其中只能放置一个根节点，比如<image>或<view>。

核心属性 (在<swiper>上设置):

indicator-dots: 是否显示面板指示点（小圆点）。
autoplay: 是否自动切换。
interval: 自动切换时间间隔（毫秒）。
circular: 是否采用衔接滑动（即滑到最后一张再滑会回到第一张）。

动手实践：

html 复制代码

<swiper class="banner-swiper" indicator-dots autoplay interval="3000" circular>
  <swiper-item>
    <image src="/images/banner1.jpg" class="banner-image"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/banner2.jpg" class="banner-image"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/banner3.jpg" class="banner-image"/>
  </swiper-item>
</swiper>

WXSS:

css 复制代码

.banner-swiper {
  height: 300rpx; /* swiper也需要一个明确的高度 */
}

.banner-image {
  width: 100%;
  height: 100%;
}

一个功能齐全的轮播图就这样轻松完成了！

二、基础内容组件：信息的载体

这类组件用于直接展示内容，是用户在界面上最直观看到的部分。

1. `<icon>`：小巧精致的图标

小程序内置了一套图标库，通过<icon>组件可以方便地使用。

核心属性：

type: 图标的类型，可选值有 success, success_no_circle, info, warn, waiting, cancel, download, search, clear。
size: 图标的大小，单位默认为px。
color: 图标的颜色。

示例：

html 复制代码

<view>
  <icon type="success" size="40"/>
  <icon type="info" size="40" color="#3cc51f"/>
  <icon type="warn" size="40"/>
</view>

2. `<text>`：不只是显示文本

我们已经知道<text>用于显示文本。但它还有一些特殊的属性，让它变得更强大。

selectable: 设置为true时，文本可以被用户长按选中、复制。这对于显示订单号、链接等信息非常有用。
decode: 设置为true时，可以解析文本中的HTML实体字符，如  , < 等。

示例：

html 复制代码

<text selectable>订单号：SN20231027123456</text>
<text decode>这是一个&nbsp;&nbsp;空格</text>

3. `<progress>`：直观的进度条

用于显示任务的进度，比如文件上传、加载过程等。

核心属性：

percent: 百分比，从0到100。
show-info: 是否在进度条右侧显示百分比。
activeColor: 已完成的进度条颜色。

示例（结合JS动态更新）：
WXML:

html 复制代码

<progress percent="{{uploadPercent}}" show-info stroke-width="12" />
<button bindtap="startUpload">模拟上传</button>

JS:

javascript 复制代码

Page({
  data: {
    uploadPercent: 0
  },
  startUpload: function() {
    // 模拟一个上传过程
    this.setData({ uploadPercent: 0 });
    let interval = setInterval(() => {
      let currentPercent = this.data.uploadPercent + 10;
      if (currentPercent > 100) {
        currentPercent = 100;
        clearInterval(interval);
      }
      this.setData({
        uploadPercent: currentPercent
      });
    }, 500);
  }
})

4. `<rich-text>`：渲染富文本的利器

在很多场景下，我们需要从后端获取一段包含HTML标签的文本（富文本），比如文章详情、商品介绍等。直接用<text>是无法解析这些HTML标签的。这时，<rich-text>就派上用场了。

核心属性：

nodes: 节点列表或HTML字符串。

示例：
JS:

javascript 复制代码

Page({
  data: {
    articleContent: '<div style="color:red;"><h1>文章标题</h1><p>这是文章的<strong>第一段</strong>内容。</p><img src="/images/banner1.jpg"/></div>'
  }
})

WXML:

html 复制代码

<rich-text nodes="{{articleContent}}"></rich-text>

<rich-text>会自动将这段HTML字符串渲染成对应的页面元素。这在处理动态内容时非常强大。

安全提醒 ：nodes属性最好不要直接接收来自用户输入的内容，以防XSS攻击。后端返回的数据应该是可信和经过处理的。

结语

今天，我们开启了组件化思维的大门，深入学习了构成小程序界面"骨骼"的视图容器组件和填充"血肉"的基础内容组件。我们掌握了：

使用<view>和Flex进行灵活布局。
使用<scroll-view>创建可滚动区域。
使用<swiper>轻松实现轮播图。
运用<icon>, <text>, <progress>等基础组件来丰富页面内容。
使用<rich-text>来渲染从后端获取的动态富文本。

通过组合这些基础组件，你已经能够搭建出大部分常见的小程序静态页面了。然而，一个应用离不开与用户的交互。在下一讲中，我们将继续探索组件的世界，聚焦于表单与交互组件，学习如何获取用户的输入、接收用户的选择，让你的小程序真正具备"接收信息"的能力。

我们下篇见！

组件化思维（上）：视图与基础内容组件的深度探索