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

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

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

前言

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

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

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

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

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

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

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

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

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

.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:

<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:

.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: 是否采用衔接滑动（即滑到最后一张再滑会回到第一张）。

动手实践：

<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:

.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: 图标的颜色。

示例：

<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实体字符，如  , < 等。

示例：

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

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

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

核心属性：

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

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

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

JS:

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:

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

WXML:

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

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

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

结语

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

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

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

我们下篇见！