示例 代码片段

控制台打印快照

具体代码

1. app.js

App({
  onLaunch() {
    console.log("onLauch");
  },
  onShow() {
    console.log("onShow");
    console.log(
      "-----------组件由内而外--由上而下(根据wxml)开始建立,若组件(或behavior)包含behavior则先建立behavior：由内而外,由前到后,同名当一-----------"
    );
  },
});

2. allBehaviors.js 同 app.js 层级

export const sonInnerBehavior = Behavior({
  lifetimes: {
    created() {
      console.log("son-innerBehavior --> created");
    },
    attached() {
      console.log("son-innerBehavior --> attached");
    },
  },
});
export const sonFontBehavior = Behavior({
  behaviors: [sonInnerBehavior],
  lifetimes: {
    created() {
      console.log("son-fontBehavior --> created");
    },
    attached() {
      console.log("son-fontBehavior --> attached");
    },
  },
});

export const sonLastBehavior = Behavior({
  behaviors: [sonInnerBehavior],
  lifetimes: {
    created() {
      console.log("son-lastBehavior --> created");
    },
    attached() {
      console.log("son-lastBehavior --> attached");
    },
  },
});

export const parentInnerBehavior = Behavior({
  lifetimes: {
    created() {
      console.log("parent-innerBehavior --> created");
    },
    attached() {
      console.log("parent-innerBehavior --> attached");
    },
  },
});
export const parentFontBehavior = Behavior({
  behaviors: [parentInnerBehavior],
  lifetimes: {
    created() {
      console.log("parent-fontBehavior --> created");
    },
    attached() {
      console.log("parent-fontBehavior --> attached");
    },
  },
});

export const parentLastBehavior = Behavior({
  behaviors: [parentInnerBehavior],
  lifetimes: {
    created() {
      console.log("parent-lastBehavior --> created");
    },
    attached() {
      console.log("parent-lastBehavior --> attached");
    },
  },
});

3. index 页面

• index/index.json

  {
    "usingComponents": {
      "parent": "/components/parent/parent"
    }
  }
  

• index/index.wxml

  <parent></parent>
  

• index/index.js

  Component({
    lifetimes: {
      created() {
        console.log("页面(组件) --> created");
        console.log(
          "-------------------所有组件挂载完毕,还没渲染页面-------------------"
        );
        console.log(
          "-------------------attached周期触发,组件层级由外到内, 组件中的behavior由内到外,由前到后-------------------"
        );
      },
      attached() {
        console.log("页面(组件) --> attached");
      },
    },
    methods: {
      onLoad() {
        console.log("页面index --> onLoad");
      },
      onReady() {
        console.log("页面index --> onReady");
      },
    },
  });
  

4. parent 组件 /components/parent/parent

• parent.json

  {
    "component": true,
    "usingComponents": {
      "son": "/components/son/son"
    }
  }
  

• parent.wxml

  <son></son>
  

• parent.js

  import { parentFontBehavior, parentLastBehavior } from "../../allBehaviors";
  Component({
    behaviors: [parentFontBehavior, parentLastBehavior],
    lifetimes: {
      created() {
        console.log("parent --> created");
      },
      attached() {
        console.log("parent --> attached");
      },
    },
  });
  

5. son 组件 /components/son/son

• son.json

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

• son.wxml

  <text>son<text></text></text>
  

• son.js

  import { sonFontBehavior, sonLastBehavior } from "../../allBehaviors";
  
  Component({
    behaviors: [sonFontBehavior, sonLastBehavior],
    lifetimes: {
      created() {
        console.log("son --> created");
      },
      attached() {
        console.log("son --> attached");
        console.log(
          "-------------------所有attached周期完毕,首次渲染页面-------------------"
        );
      },
    },
  });
  

下一篇 为小程序添加生命周期