小程序--自定义组件

1. 小程序自定义组件新建文件时选择： 新建 Compnent

2. 一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

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

注意：

在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。

3. 组件模板：

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

4. 组件可以指定它所在节点的默认样式，使用 :host 选择器

注意：

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。

指定特殊的样式隔离选项 styleIsolation 。

5. 外部样式类：在 Component 中用 externalClasses 定义段定义若干个外部样式类

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- 组件 custom-component.wxml -->
<view class="my-class">这段文本的颜色由组件外的 class 决定</view>

<!-- 页面的 WXML -->
<my-component my-class="red-text" />

<!-- 页面的 WXSS -->
.red-text {
  color: red;
}

6. 组件的生命周期

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

Component({
  lifetimes: {
    created: function() {
      //在组建实例刚刚被创建时执行       
    },
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    ready: function() {
      //在组件实例在视图层布局完成后执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

小程序--自定义组件

推荐阅读