10.小程序自定义组件

本文目录
1.小程序如何自定义组件
2.定义组件时注意点
3.如何使用定义好的组件
4.小结

1.小程序如何自定义组件

第一步：创建Component，这样开发工具可以自动帮你创建出一些模版。

创建Component

当然，你也可以手动一个一个去创建出来这里的文件，如下：

第一步会得到上面图中4个文件，4个文件的作用和我们页面开发时的大同小异。

js文件，模版里面给出的注释非常清晰，开发者一目了然。

// MyComponents/MyButton.js
Component({


  options:{

    // 表示激活使用插槽
    multipleSlots:true
  },

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

    // 注意：这里存在一个命名转化规则。这里组件中定义、组件内使用时是驼峰形式，但在组件外部使用时，小程序自动转换为open-type形式。
    openType:{
      type:String
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onGetUserInfo(event){

      // triggerEvent("eventname", event.detail, {})
      // triggerEvent表示这里是自定义的事件。
      // 第一个参数："eventname"，表示事件名。事件名随便起，这里以eventname为例。在外部使用组件时，bind:这里自定义的事件名="xxxx"。本例中，在外部使用组件时就是：bind:eventname="xxxx"
      // 第二个参数：event.detail自定义事件传递的数据；
      // 第三个参数：{}
      this.triggerEvent("eventname", event.detail, {});

    }
  }
})

要特别注意的就是这里的js文件：
1.属性定义
注意：这里存在一个命名转化规则。这里组件中定义、组件内使用时是驼峰形式，但在组件外部使用时，小程序自动转换为open-type形式。
2.注意this.triggerEvent("eventname", event.detail, {});的格式：

第一个参数："eventname"，表示事件名。事件名随便起，这里以eventname为例。在外部使用组件时，bind:这里自定义的事件名="xxxx"。本例中，在外部使用组件时就是：bind:eventname="xxxx"
第二个参数：event.detail自定义事件传递的数据；
第三个参数：{}

3.multipleSlots:true表示激活使用插槽。如果自定义组件中有使用插槽slot，则要记得在这里配置一下以激活插槽。

options:{
    // 表示激活使用插槽
    multipleSlots:true
  },

---

json文件， "component": true配置，声明这是组件。

{
  "component": true,
  "usingComponents": {}
}

wxss文件,这里以这种样式为例。

/* MyComponents/MyButton.wxss */
.container{
  width: 100%;
  height: 300rpx;
  padding: 0 !important;
  border: 2rpx solid #0f0;
}

---

wxml文件，定义了一个button，内部有一个插槽（按钮中的内容，完全由外部使用者按需决定）

<!--MyComponents/MyButton.wxml-->
<button class='container'
bindgetuserinfo='onGetUserInfo' 
open-type='{{openType}}' plain='{{true}}'>
  <slot name="img"/>

</button>

注意：这里属性命名的书写格式，这里属于组件内使用，所以和定义时保持一致，也是驼峰形式。

2.如何使用定义好的组件

第一步：在页面或其他组件的json文件中，告诉要使用的组件。

完整配置代码如下：

{
  "usingComponents": {
    "my-button": "/MyComponents/MyButton/MyButton"
  }
}

第二步：在页面wxml或其他组件的wxml中，使用我们上面定义好的组件。

image.png

关键代码如下：

<my-button bind:eventname="testEvent" 
open-type='getUserInfo'>
  <image slot="img" 
  mode='aspectFit'
  style='height:100%;'
  src='../../images/api-gray.png'></image>
</my-button>

注意：

1. 上面bind:eventname="xxxx"中的eventname正是我们在自定义组件时的js文件中，这句代码中this.triggerEvent("eventname", event.detail, {});，抛出的自定义事件的名字。
   bind:eventname="testEvent"表示，这里绑定你自定义的事件名为 eventname的事件。当事件触发后，简单地弹了个toast。
   testEvent

2.open-type，这里因为是自定义组件的外部，这里存在一个命名转化规则。尽管我们在自定义组件中定义、组件内使用时是驼峰形式（例如openType），但在组件外部使用时，小程序自动转换为（例如open-type）这种形式。

效果如下

小结

本节总结了一下小程序自定义组件，及需要注意的地方。