一、组件化基础：什么是组件化开发、组件化的优势、小程序组件系统架构
大家好，我是你们这门课的主讲。今天咱们来聊聊组件化开发这件事。
说实话，我刚开始做小程序那会儿，代码写得那叫一个「豪放」——所有逻辑堆在一个页面里，一个 .js 文件动辄上千行。后来项目迭代到第三个版本，改一个按钮样式要翻遍五个页面，我才意识到：这么干下去迟早要翻车。
嗯，组件化开发就是来救场的。
1.1 什么是组件化开发
组件化开发，说白了就是把页面拆成一个个独立、可复用的小模块。每个模块管好自己的界面和逻辑，互不干扰。
你想想看，一个电商小程序首页，有搜索框、轮播图、商品列表、底部Tab。如果把这些都揉在一个文件里，维护起来得多痛苦？
但如果我们把它们拆成独立的组件：
// 组件结构示意
components/
├── search-bar/ // 搜索框组件
├── swiper-banner/ // 轮播图组件
├── product-list/ // 商品列表组件
└── tab-bar/ // 底部Tab组件
每个组件都是一个「黑盒」——对外暴露接口，对内封装实现。页面只需要像搭积木一样把它们组合起来就行。
核心要点：组件 = 模板 + 样式 + 逻辑 + 数据。这四个要素缺一不可，共同构成一个完整的组件单元。
1.2 组件化的优势
我在项目中遇到过不少团队，一开始觉得组件化「没必要」、「太麻烦」。但等代码量上来后，一个个都真香了。为什么？
第一，复用性。 一个写好的轮播图组件，首页能用、详情页能用、活动页也能用。改一次，处处生效。我有个项目，光「商品卡片」这一个组件就被复用了 12 个页面，省了多少重复劳动。
第二，可维护性。 每个组件代码量控制在 200 行以内，出了问题定位快。你不需要在一个 2000 行的文件里找 bug，直接进组件文件夹，改完就走。
第三，团队协作。 两个人同时开发一个页面？以前得等一个人写完另一个人再上。现在一人负责一个组件，互不冲突。我见过最夸张的，一个页面拆了 8 个组件，4 个开发并行，两天搞定。
第四，测试方便。 组件独立，单元测试好写。你不需要跑整个页面，单独测一个组件就行。
| 对比维度 | 非组件化 | 组件化 |
|---|---|---|
| 代码复用 | 复制粘贴 | 引用组件 |
| 修改影响 | 牵一发动全身 | 局部修改 |
| 团队协作 | 串行等待 | 并行开发 |
| 维护成本 | 高 | 低 |
我的建议：不要等到项目大了才做组件化。从第一个页面开始，就养成「能拆就拆」的习惯。哪怕一个组件只在一个页面用，也值得独立出来——因为你永远不知道它什么时候会被复用。
1.3 小程序组件系统架构
小程序的组件系统，其实分两层：内置组件 和 自定义组件。
内置组件就是官方提供的那些基础标签，比如 <view>、<text>、<image>、<scroll-view> 等等。它们是构建一切组件的「砖块」。
自定义组件才是我们真正要讲的。它允许你用内置组件组合出业务相关的功能模块。
小程序自定义组件的文件结构是这样的：
my-component/
├── my-component.wxml // 模板
├── my-component.wxss // 样式
├── my-component.js // 逻辑
└── my-component.json // 配置
每个文件各司其职：
- .wxml：写组件的 HTML 结构
- .wxss：写组件的样式，默认是隔离的，不会影响外部
- .js：写组件的生命周期、事件处理、数据逻辑
- .json：声明这是一个组件，以及它依赖了哪些其他组件
组件之间怎么通信？小程序提供了三种方式：
- 属性传递：父组件通过
properties给子组件传数据 - 事件传递：子组件通过
triggerEvent向父组件发送消息 - 组件关系：通过
relations实现父子或兄弟组件间的直接通信
注意：我曾经踩过一个坑——在自定义组件里直接修改父组件传进来的数据。小程序的数据流是单向的，子组件不应该直接修改 properties。正确的做法是触发事件，让父组件去改。这个习惯一定要养成，不然项目大了数据流会乱成一锅粥。
另外，小程序还支持 插槽（slot） 机制。你可以给组件留一个「洞」，让使用者往里填内容。比如一个弹窗组件，弹窗的标题和按钮是固定的，但中间的内容由使用者决定——这时候用 slot 就非常合适。
<!-- 组件模板 -->
<view class="modal">
<view class="modal-header">{{title}}</view>
<view class="modal-body">
<slot></slot> <!-- 这里让使用者填充 -->
</view>
<view class="modal-footer">
<button bindtap="onConfirm">确定</button>
</view>
</view>
使用的时候：
<my-modal title="温馨提示">
<text>确定要删除这条记录吗？</text>
</my-modal>
你看，这样弹窗组件就变得非常灵活了。
最后说一句，小程序的组件系统虽然不像 Vue 或 React 那么强大，但该有的都有了。只要你掌握了组件化的思维，写出来的代码质量和可维护性都会上一个台阶。
下一节，我会带大家手写第一个自定义组件。到时候咱们边写边聊，把刚才讲的理论都落地成代码。