如何声明生命周期

统一各端应用生命周期的定义，是跨端框架的重要组成，也是迁移的必经之路。

小程序声明生命周期

可以在 App(Object)、Page(Object)、Component(Object) 传入Object参数，其指定小程序的生命周期回调等

代码示例

// index.js
Page({
  onLoad(options) {
    // Do some initialize when page load.
  },
  onReady() {
    // Do something when page ready.
  },
  onShow() {
    // Do something when page show.
  },
  onHide() {
    // Do something when page hide.
  },
  onUnload() {
    // Do something when page close.
  },
  onShareAppMessage() {
    // return custom share data when user share.
  }
});

cml 声明生命周期

在.cml 文件 <script /> 代码块返回的对象实例，其指定生命周期回调

示例代码

<script>
  class Index {
    beforeCreate(query) {
      // data数据挂载到this根节点上之前，以及methods所有方法挂载到实例根节点之前
      // 注意：只用页面的 beforeCreate钩子 会返回页面query
      console.log("App beforeCreate: 打开当前页面路径中的参数是 ", query);
    }
    created() {
      // data,methods里面的这些events挂载完成
      console.log("App created");
    }
    beforeMount() {
      // 开始挂载已经编译完成的cml到对应的节点时
      console.log("App beforeMount");
    }
    mounted() {
      // cml模板编译完成,且渲染到dom中完成,在整个生命周期中只执行一次
      console.log("App mounted");
    }
    beforeDestroy() {
      // 实例销毁前
      console.log("App beforeDestroy");
    }
    destroyed() {
      // 实例销毁后
      console.log("App destroyed");
    }
  }
  export default new Index();
</script>

App 生命周期 映射

小程序 app.js中的生命周期 -> cml src/app/app.cml

Page 生命周期 映射

小程序 Page()中的生命周期 -> cml src/pages/mypage/mypage.cml

Component 生命周期 映射

小程序 Component()中的生命周期 -> cml src/components/mycomponent/mycomponent.cml

生命周期总结

每个 cml 实例(App、Page、Component)在被创建时都要经过一系列的初始化过程 ————

例如，需要设置数据监听、编译模板、将实例挂载到 CML节点 并在数据变化时更新 CML节点 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给开发者在不同阶段添加自己的代码的机会。

cml 为App、页面Page、组件Component 提供了一系列生命周期事件，保障应用有序执行。

另外，如果你想使用某个端特定的生命周期，你可以从业务出发使用 生命周期多态。