小程序进阶概念第4章

小程序进阶概念

开篇

在上一大章中我们讲解了 小程序的核心概念，那么这一章节我们来讲解 小程序的进阶概念。

在本章节中我们将会通过一个 案例 来贯穿整个进阶内容的知识。

1. 什么是组件化思想

对于组件化思想，如果你没有实际的开发经验得话，那么可能很难立刻理解它。

不过没有关系！

随着你对课程的逐渐深入学习，我们会一直为大家灌输组件化思想的概念！

---

想要明白什么是组件，那么就必须要先搞清楚，组件解决了什么样的问题！ 所有的技术都是因为解决了一个或多个问题，才有存在的价值！

场景

以上的 两 张截图是【饿了么小程序】中的数据截图，两个截图来自两个不同的页面。

但是我们可以发现：虽然他们来自于不同页面，但是其中店铺的 item 项的结构非常类似。

那么我们现在假象一种场景：

现在你在【饿了么】工作，现在你领导让你去完成这两个页面，那你怎么做？

你会创建两个页面，然后在一个页面中用 wx:for 指令，创建一堆 item 的 dom结构 然后再去渲染它们的 wxss。

然后在到另外一个页面里面，重复这一系列的操作吗？

如果你是这么做的话？那么我打赌你在【饿了么】待不了 3 天。原因就是因为：你的代码太冗余了！，换句话来说就是：不可维护，不可扩展！

对于代码来说，应该遵循 所有重复的，都是可以封装的！

这里的封装放到当前场景下，指的就是 组件化 封装。

什么是组件化

那么明确了，为什么要进行 组件化 封装之后，接下来我们来看什么是组件化。

我们可以把【整个项目】比喻成一个 乐高积木：

那么，【每个组件】都可以认为是【其中一块小的积木】，这些小的积木可以在当前的项目中使用，也可以直接拿走放到另外的项目中使用。

一个大的项目，由多个小的组件组成，每一个组件都封装了单独的【结构】、【样式】和【行为】。

这就是现在的组件化思想。

如果之前大家有过 vue、react、angular 的开发经验的化，那么应该很好理解 组件化 指的是什么意思。

如果大家之前只有过 html + css + js 的开发经验得话，那么可以把组件理解为：包含了【结构】和【样式】的模块。

最后不要忽略，本小节开头的话：

对于组件化思想，如果你没有实际的开发经验得话，那么可能很难立刻理解它。

场景案例

就像在【开篇】中说到的，我们会开发一个【案例】，来贯穿整个第四章的内容。

那么下面我们就来去实现这个案例：

对于这个案例，我们把它拆成两个部分：

1. 顶部的 tabs
2. 底部的 list

两个部分，将分别通过两个组件来进行开发。

所以，我们接下来要做的第一件事情，就是【创建这两个组件，并在页面中使用它们】，而这个也就是本小节的主要内容

问题

1. 组件应该被放入到哪个文件夹中？
2. 如何在页面中使用【自定义组件】？

内容

1. 创建组件
   1. 创建 components 文件夹
   2. 创建 tabs 和 list 文件夹
   3. 右键 新建 Component
2. 使用组件
   1. 找到页面的 index.json 文件
   2. 在 usingComponents 选项下 注册组件
      1. key 为当前组件在该页面中的标签名
      2. value 为组件的代码路径
   3. 在页面的 wxml 文件中，以 注册的 key 为标签名，使用组件

答案

1. 组件应该被放入到哪个文件夹中？
   1. components
2. 如何在页面中使用【自定义组件】？
   1. 在页面的 index.json 文件中，通过 usingComponents 进行注册
   2. 在 wxml 文件中，以注册的 key 为 标签名 进行使用

2. 组件的生命周期

场景

接下来我们希望在 tabs 组件被渲染之后，获取 tabs 的数据，并且进行渲染。

参考下，上一大章中的 列表案例 ，那么要完成这个功能，我们就必须要有一个 前置条件：

那就是：明确组件的生命周期函数，明确在什么时候去获取接口数据

问题

1. 组件的 生命周期 和 方法 分别应该被放入到哪个节点下？
2. created 函数中可以调用 setData 吗？
3. 获取数据的操作应该在哪个函数中进行？

内容

组件 的生命周期应该被定义在 lifetimes 中，而方法必须要放入到 methods 中。

组件的生命周期一共有三个：

1. created ： 组件实例刚刚被创建好。此时还不能调用 setData
2. attached：组件完全初始化完毕、进入页面节点树后。绝大多数初始化工作可以在这个时机进行
3. detached：在组件离开页面节点树后

    /**
     * 组件的初始数据
     */
    data: {
   
        <