一、自定义组件介绍

1. 什么是自定义组件？

当微信官方提供的组件，不能满足我们的需求时，且使用系统组件构造模板 wxml 较为复杂，我们就可以考虑使用微信官方提供的组件架构，定义符合我们需求的组件。

2. 自定义组件组成

自定义的组成和小程序的一般页面的结构一样。由：js\json\wxml\wxss 四个文件构成，其中：

js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。

我将按照如下顺序，定义一个简单的组件。

1、编写组件的页面，仅仅显示一行文字，以演示建立和编写组件的文件。
2、引用上一步编写的组件，以演示如何引用自定义组件。
3、编写组件逻辑结构，实现组件数据由 js 逻辑控制，组件内部实现响应用于操作事件。
4、提供接口用于回调组件内部事件。
5、提供方法以便外部直接调用使用组件。

二、实现自定义组件

1、新建组件

在定好的目录下右键新建一个 Component 目录，系统会自动帮助我们创建好自定义组件的四个必要文件，步骤与结果如图一、二所示。

下面我们来编写组件 wxml 文件内容。

// test-component.wxml 的内容
<text>这是自定义组件</text>

组件 json 内容如果是使用微信开发者工具建立的 component 文件，那么 ide 会帮助我们自动创建如下代码（手动的自己添加就好）：

{
  "component": true,
  "usingComponents": {}
}
// component 表明组件的身份。
// usingComponents 组件引用的子组件（组件是可以使用别的自定义组件的，系统组件无需声明）

组件 js 内容，ide 会自动创建如下代码:

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

组件的 wxss 我们可以暂时不用理会，就是一般的样式代码。

到这里我们的一个简单的自定义组件就已经完成，下面进行引用。

2、使用自定义组件

使用自定义组件只需要两步：

第一、在需要引用的页面 json 配置代码中添加如下配置：

"usingComponents": {
    "test-1": "/pages/component/test-component"
  }
  // usingComponents 为依赖组件的配置项
  // test-1 为依赖组件的别名（可以随意定），在使用页面的布局中使用此别名。
  // /pages/component/test-component 为依赖组件的路径（无需添加后缀）。

第二、在对于布局页面中使用，和使用系统组件一样，上一步定的「别名」作为标签名。

<!-- index.wxml 文件内容 -->
<view>
  <test></test>
</view>

保存重新编译之后，页面就出现了我们自定义组件的内容。

3、实现响应用户操作事件

这一步将实现用户的点击事件。在用户点击自定义组件之后，将改变自定义组件的文字内容。

第一、捕获自定义组件的点击事件。

自定义组件的事件处理和在一般页面一样，catchtap 对应的事件,然后在 js 文件中定义好对应的处理函数。代码如下：

<!-- test-component.wxml 的内容 -->
<text catchtap='onClick'>{{text}}</text>

// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{ // 方法一定要放在这个里面
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法，和一般页面一致。
      this.setData({
        text: '点击了'
      });
    }
  }
})

效果如下

4、在外部监听上一步的文字改变时间。

这一部分主要的代码还是位于自定义组件的 js 文件内。

第一、在自定义组件内部触发一个组件的自定义事件，代码如下：

// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法，和一般页面一致。
      this.setData({
        text: '点击了'
      });
      // 自定义一个组件触发事件
      this.triggerEvent('onTextChange');
    }
  }
})

第二、在引用组件的页面(wxml)捕获这个事件

<!-- index.xml 文件内容 -->
<view>
  <test catch:onTextChange='onTextChange'></test>
</view>

第三、在引用组件页面 js 逻辑内建立这个捕获事件

// index.js 页面内容
Page({
  data: {
   
  },
  onLoad: function () {

  },
  // 捕获事件
  onTextChange: function(){
    wx.showToast({
      title: '捕获事件',
    })
  }
})

效果如下：

5、自定义组件提供给外部调用的方法

第一步、编写对外提供的方法

这里给外部提供一个改变文字内容的方法，代码如下：

// pages/component/test-component.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    text:'这是初始文字'
  },
  methods:{
    /**
       * 响应用于点击的方法
       */
    onClick: function (e) {
      // 设置数据也是采用数据判定的方法，和一般页面一致。
      this.setData({
        text: '点击了'
      });
      // 自定义一个组件触发事件
      this.triggerEvent('onTextChange');
    }
  },
  // 这个方法是给外部调用，用来改变这个组件的文字内容
  setText: function (text) {
    this.setData({
      text: text
    });
  }
})

第二步、通过 id 获取组件实例，使用组件实例直接调用组件方法

代码如下：

Page({
  data: {
   
  },
  onLoad: function () {

  },
  // 捕获事件
  onTextChange: function(){
    wx.showToast({
      title: '捕获事件',
    })
  },
  // 响应点击事件
  change:function(e){
    // 使用官方提供的 selectComponent 方法通过 id 获取组件实例
    var mComponent = this.selectComponent('#mComponent');
    // 通过实例，直接调用组件内部提供的方法
    mComponent.setText('外部调用了');
  }
})

<!-- index.wxml 内容 -->
<view>
  <test catch:onTextChange='onTextChange' id='mComponent'></test>
  <button catch:tap='change'>点击改变文字内容</button>
</view>

最终效果如下：