扩展新端运行时

运行时主要是对 cml 文件的逻辑对象进行适配，chameleon 内部将 cml 文件的逻辑对象分为三类 App、Page、Component。对应会调用用户运行时 npm 包的createApp、createPage、createComponent方法，所以对外只需要实现这三个方法。

例如一个 Page 的逻辑对象如下：

class PageIndex {
  data = {
    name: 'chameleon'
  }
  computed = {
    name2 () {
      return 'Hello' + this.name;
    }
  }
  beforeCreated() {
  }
  mounted() {
  }
}

export default new PageIndex();

在编译插件的构造函数中添加上运行时 npm 包名称，cml-demo-runtime。

  constructor(options) {
    this.runtimeNpmName = 'cml-demo-runtime';
  }

编译时就会自动插入cml-demo-runtime处理逻辑对象的方法：

class PageIndex {
  data = {
    name: 'chameleon'
  }
  computed = {
    name2 () {
      return 'Hello' + this.name;
    }
  }
  beforeCreated() {
  }
  mounted() {
  }
}
export default new PageIndex();

// 编译时自动插入用户配置的运行时方法
import {createPage} from 'cml-demo-runtime';
createPage(exports.default);

createApp、createPage、createComponent方法,参考cml-demo-runtime的结构进行实现，需要include chameleon-runtime中相应的接口进行实现，才能够实现对chameleon-runtime的扩展。用户的工作量主要在于对逻辑对象的处理，可以参考chameleon-runtime中的实现方式，一般需要如下方面的适配工作。

从宏观来看，运行时处理可分为：

输入Options对象的适配，参考
跨端运行时能力注入，参考

从微观来看，有以下处理：

生命周期：映射表参考和实现参考
组件 props 属性：适配参考和变化监听参考
数据响应：数据响应实现参考
computed 计算能力：实现参考
watch 监听能力：适配参考和实现参考
methods 方法属性：适配参考
mixins 能力：适配参考和合并参考
生命周期多态

例如： createPage 方法的实现

<include src="chameleon-runtime/src/interfaces/createPage/index.interface"></include>
<script cml-type="demo">
  class Method implements createPageInterface {
    createPage(options) {
      // 各端自行实现PageRuntime
      let pageRuntime = new PageRuntime(options);

      // 处理props
      pageRuntime.initProps();

      // 处理data
      pageRuntime.initData();

      // 处理computed
      pageRuntime.initComputed();

      // 处理methods
      pageRuntime.initMethods();

      // 处理生命周期映射
      pageRuntime.initLifeCycle();

      //调用小程序原生页面构造函数
      Page(options);
      return {};
    }
  }

  export default new Method();
</script>

实现框架

扩展新端运行时

results matching ""

No results matching ""