高级教程｜小程序开发指南进阶篇（三）

高级教程｜小程序开发指南进阶篇（一） 

高级教程｜小程序开发指南进阶篇（二） 

七. 自定义组件

1. 组件获取页面生命周期 pageLifetimes

自定义组件所在页面的生命周期声明对象，可用于响应事件处理。

示例代码

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

2. 获取组件实例

• 可在父组件里调用 this.selectComponent，获取子组件的实例对象。这样就可以直接访问组件的任意数据和方法。
• 调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。
• 在下面的示例中，父组件将会获取 class 为 my-component 的子组件实例对象，即子组件的 this。

// 父组件
          Page({
          data: {},
          getChildComponent: function () {
          const child = this.selectComponent(".my-component");
          console.log(child);
          },
          });
        

3. behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 "mixins" 或 "traits"。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用 behavior 时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。

关于参数含义和使用详情，请参考 Behavior 参考文档。

组件引用时，在 behaviors 定义段中将每个 behavior 逐个列出即可。

示例代码

• 查看详情

4. 组件间关系

下面示例是组件的一种实现形式：

<custom-ul>
          <custom-li> item 1 </custom-li>
          <custom-li> item 2 </custom-li>
          </custom-ul>
        

这个例子中，custom-ul 和 custom-li 都是自定义组件。它们有相互间的关系，相互间的通信往往比较复杂。此时，在组件定义时加入 relations 定义段，可以简洁地表示组件间的通信逻辑关系。

// path/to/custom-ul.js
          Component({
          relations: {
          "./custom-li": {
          type: "child", // 关联的目标节点应为子节点，（目标组件的相对关系，可选的值为 parent、child、ancestor、descendant）
          linked: function (target) {
          // 每次有 custom-li 被插入时执行，target 是该节点实例对象，触发在该节点 attached 生命周期之后
          },
          linkChanged: function (target) {
          // 每次有 custom-li 被移动后执行，target 是该节点实例对象，触发在该节点 moved 生命周期之后
          },
          unlinked: function (target) {
          // 每次有 custom-li 被移除时执行，target 是该节点实例对象，触发在该节点 detached 生命周期之后
          },
          },
          },
          });
        

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。   

// path/to/custom-li.js
          Component({
          relations: {
          "./custom-ul": {
          type: "parent", // 关联的目标节点应为父节点（目标组件的相对关系，可选的值为 parent、child、ancestor、descendant）
          linked: function (target) {
          // 每次被插入到 custom-ul 时执行，target 是 custom-ul 节点实例对象，触发在 attached 生命周期之后
          },
          linkChanged: function (target) {
          // 每次被移动后执行，target 是 custom-ul 节点实例对象，触发在 moved 生命周期之后
          },
          unlinked: function (target) {
          // 每次被移除时执行，target 是 custom-ul 节点实例对象，触发在 detached 生命周期之后
          },
          },
          },
          });
        

注意：必须在两个组件定义中都加入

relations

定义，否则不会生效。

5. 纯数据字段 pureDataPattern

纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。

在特定情况下，某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。

此时，可以指定这样的数据字段为"纯数据字段"，它们仅仅被记录在 this.data 中，而不参与任何界面渲染过程，这样有助于提升页面更新性能。

指定"纯数据字段"的方法是在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。

Component({
          options: {
          pureDataPattern: /^_/, // 指定所有 _ 开头的数据字段为纯数据字段
          },
          data: {
          a: true, // 普通数据字段
          _b: true, // 纯数据字段
          },
          methods: {
          myMethod() {
          this.data._b; // 纯数据字段可以在 this.data 中获取
          this.setData({
          c: true, // 普通数据字段
          _d: true, // 纯数据字段
          });
          },
          },
          });
        

上述组件中的纯数据字段不会被应用到 TYML 上：

<view ty:if="{{a}}"> 这行会被展示 </view>
          <view ty:if="{{_b}}"> 这行不会被展示 </view>
        

更多特性详情，请参考 纯数据字段。

6. 自定义组件扩展

为了更好地定制自定义组件的功能，可以使用自定义组件扩展机制。

扩展后的效果

// behavior.js
          module.exports = Behavior({
          definitionFilter(defFields) {
          defFields.data.from = "behavior";
          },
          });

          // component.js
          const myBehavior = require("behavior.js");
          Component({
          data: {
          from: "component",
          },
          behaviors: [myBehavior],
          ready() {
          console.log(this.data.from); // 此处会发现输出 behavior 而不是 component
          },
          });
        

可以看出，自定义组件的扩展其实提供了修改自定义组件定义段的能力。上述例子演示了如何修改自定义组件中的 data 定义段里的内容。

关于使用方法的更多详情，请查看 自定义组件扩展。

八. 体验优化指南

您可依据 体验优化指南，对现有小程序进行自查，提升性能和用户体验。

九. 结束

• 恭喜你 🎉 已完成本教程的学习！小程序开发的更多惊喜，等待您继续深入挖掘！
• 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。