组件化思维（上）：视图与基础内容组件的深度探索
组件化思维（上）：视图与基础内容组件的深度探索
所属专栏：《微信小程序实战笔记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>这是一个 空格</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>来渲染从后端获取的动态富文本。
通过组合这些基础组件，你已经能够搭建出大部分常见的小程序静态页面了。然而，一个应用离不开与用户的交互。在下一讲中，我们将继续探索组件的世界，聚焦于表单与交互组件，学习如何获取用户的输入、接收用户的选择，让你的小程序真正具备“接收信息”的能力。
我们下篇见！