微信小程序 自定义组件 教程（一） | 封装、声明、使用 三部曲

一、情景

在开发微信小程序的过程中，经常会遇到：相同的内容，在多个地方出现。
（例如：商城小程序中的产品卡片，可能在“每周上新”模块用到，也可能在“为你推荐”模块用到。）

如果没有任何封装，将会在多个文件中，出现大量重复代码，这将严重降低代码的可读性、可复用性。

二、思路

显然，我们要做的，就是简化代码！
我们会想到：将某段需要重复的代码，单独拿出来，放进一个容器，每次需要用到时，就把这个容器拿过来用。

而 自定义组件，刚好可以满足这个需求。

三、教程

1. 封装

1) 假设原页面代码及显示效果如下

页面pages/index/index.wxml

  需要重复使用的部分
  需要重复使用的部分
  需要重复使用的部分
  需要重复使用的部分

页面pages/index/index.wxss

/**index.wxss**/
page{
  background-color: #f8f8f8;
}

.content{
  background-color: #fff;
  height: 100rpx;
  line-height: 100rpx;
  margin-top: 20rpx;
  text-align: center;
  color: #333;
  font-size: 34rpx;
}

显示效果

2) 新建一个自定义组件

首先，我们要选一个文件夹来放所有的自定义组件。
通常，在小程序根目录，新建一个文件夹，命名为components。如图：

在小程序根目录新建文件夹

命名为components

接着，便可以开始创建你的自定义组件了！
（组件名任意，我个人的习惯是：每个自定义组件放一个文件夹，文件夹名对应组件名，新建组件Component时都命名为index）
如图：

在先前新建的components文件夹上右击，选择新建文件夹

这里，我把文件夹命名为了repeat-part，意为重复部分，之后我将把这作为组件名来使用

在repeat-part文件夹上右击，选择新建Component（Component就是组件的意思）

这里的命名是我的个人习惯，我喜欢将所有的Component统一命名为index

新建Component后，出现了4个文件，文件拓展名与页面的4个文件相对应

至此，一个自定义组件创建成功。

3) 提取页面需重复的代码，移至自定义组件内

现在，我们将页面中需重复的代码，作为一个整体，移至自定义组件内。

在本例中，即为页面pages/index/index.wxml中，以下这部分代码：

需要重复使用的部分

以及页面pages/index/index.wxss中，以下这部分样式代码：

.content{
  background-color: #fff;
  height: 100rpx;
  line-height: 100rpx;
  margin-top: 20rpx;
  text-align: center;
  color: #333;
  font-size: 34rpx;
}

我们将这两个文件中的以上代码，分别移至组件components/repeat-part/index.wxml和组件components/repeat-part/index.wxss中，即：

页面pages/index/index.wxml

页面pages/index/index.wxss

/**index.wxss**/
page{
  background-color: #f8f8f8;
}

组件components/repeat-part/index.wxml

需要重复使用的部分

组件components/repeat-part/index.wxss

/* components/repeat-part/index.wxss */
.content{
  background-color: #fff;
  height: 100rpx;
  line-height: 100rpx;
  margin-top: 20rpx;
  text-align: center;
  color: #333;
  font-size: 34rpx;
}

至此，完成 一个自定义组件的封装

2. 声明

现在已经有了自定义组件，我们想要在页面中使用它。但在使用之前，需先写声明。

自定义组件需在json文件中声明，有两种选择：

1. 在要使用该自定义组件的页面对应的json文件中声明，只有此页面可以使用该自定义组件；
2. 在app.json中声明，全局可使用该自定义组件，页面json中无需做重复声明。

一般情况下，某个组件若只会在某页面中用到这一次，就在该页面的json文件中声明；
若需在多个页面中重复使用，就在app.json中声明。

我的个人习惯：我一般把所有的自定义组件都声明在app.json中，原因有几点：一是比较集中，修改时也比较好找；二是我无法确定这个组件在未来是否会用在别的页面，直接在app.json中声明，就可以忽略这个问题了。

现在，我们来声明它，在app.json中添加如下代码：

"usingComponents": {
  "s-repeat-part": "components/repeat-part/index"
}

这里我给出完整app.json代码供参考，如下：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "自定义组件教程",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "s-repeat-part": "components/repeat-part/index"
  }
}

这里，冒号后面，很显然，是组件的路径，我使用的是相对路径。

而冒号前的s-repeat-part是我们将来使用组件时所需使用的组件标签名，即。

冒号前的部分，命名可以任意，不是一定要和组件名相同的。如果你喜欢，也可以命名成abc、zzz等等。

我的个人习惯是：以组件的文件夹名作为组件名，在这前面添加前缀s-，s是self的缩写，表示这是我自己定义的组件。（因为以后很可能会使用各大开源组件，可以添加不同的前缀加以区分）

在开发过程中，自定义的组件自然也会越来越多，多个自定义组件的声明，只需用逗号隔开即可，如：

"usingComponents": {
  "s-repeat-part": "components/repeat-part/index",
  "s-other-components": "components/other-components/index"
}

至此，完成 自定义组件的声明

3. 使用

上文已经说到，s-repeat-part是标签名，那么我们现在就来使用吧！

在页面wxml中使用自定义组件的一对标签，即引用了组件内部的所有代码。

在页面pages/index/index.wxml中，使用我们的自定义组件：

这时候，已经可以看到效果了，和先前一样！

使用自定义组件后的显示效果

至此，完成 完整的 封装、声明、使用 “三部曲”。

本例的自定义组件中，只是很简单的一行代码。试想，如若是很长一段代码呢？是不是就简洁很多了~避免了大段大段的复制粘贴。

本文作为微信小程序自定义组件第一期教程，未来我还会分享一些与自定义组件相关的内容，例如组件的生命周期、组件与页面间的传值，等等。敬请期待！

本期教程 完
下期预告：组件js结构、组件生命周期及对应方法、组件变量监听器

我是小寅，一枚95后程序媛~ 感谢阅读，欢迎补充 & 质疑~