一、创建自定义组件

通常我们都会在项目根目录中创建一个 components 目录，用来存放项目中所有的自定义组件。

创建组件文件

在 components目录中新建一个文件夹，用来存放组件。
例如我们想要将一个轮播图功能提取成一个单独的组件。在 components中新建目录 home-swiper，在 home-swiper目录中右键选择【新建 Component】，输入文件同名 home-swiper，在目录会自动生成 4 个同名文件。

  1. components
  2.    |--- home-swiper
  3.    |        |--- home-swiper.js
  4.    |        |--- home-swiper.json
  5.    |        |--- home-swiper.wxml
  6.    |        |--- home-swiper.wxss
  7. pages
  8.    |- ...

二、编写自定义组件

==========

三、引入自定义组件

要使用自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

  1.  {
  2.      "usingComponents": {
  3.          "home-swiper": "/components/home-swiper/home-swiper"
  4.      }
  5.  }

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。
代码示例：

  1.  <view>
  2.      <!-- 以下是对一个自定义组件的引用 -->
  3.      <home-swiper></home-swiper>
  4.  </view>

自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。