扩展新端开发指南

开发示例体验

扩展新端demo示例仓库: https://github.com/chameleon-team/cml-extplatform-demo。 实现了微信端的基本扩展。

运行项目
  • 首先全局安装支持扩展新端的脚手架npm i chameleon-tool@0.4.0-mvvm.8 -g
  • 全局安装lerna 对本项目进行管理 npm i lerna -g
  • 在本仓库根目录执行lerna bootstrap,这一步是安装外部依赖与建立本仓库npm包之间的依赖。
  • cml-demo-project目录执行cml demo dev, 用微信开发者工具打开cml-demo-project/dist/demo目录。

开发流程

采用lerna对开发的npm包进行管理,解决本地开发时多个npm包之间相互依赖的问题。lerna init即可创建一个lerna项目,建议直接用示例仓库进行修改。

1 确定名称 创建npm包

  • 端标识,扩展一个新端首先要确定这个端的标识名称,例如微信小程序端为wx,百度小程序端为baidu,这个标识决定了构建命令的名称、多态协议中的cmlType, 配置对象中的cmlType等。 示例中确定为demo

  • 运行时npm包名称, 建议以cml-${端标识名称}-runtime格式命名,示例中为cml-demo-runtime

  • api库npm包名称, 建议以cml-${端标识名称}-api格式命名,示例中为cml-demo-api

  • 内置组件npm包名称, 建议以cml-${端标识名称}-ui-builtin格式命名,示例中为cml-demo-ui-builtin

  • 扩展组件npm包名称, 建议以cml-${端标识名称}-ui格式命名,示例中为cml-demo-ui

  • 数据管理npm包名称, 建议以cml-${端标识名称}-store格式命名,示例中为cml-demo-store

  • 编译插件npm包名称, 建议以cml-${端标识名称}-plugin格式命名,示例中为cml-demo-plugin

packages目录创建上述的6个npm包。

2 创建开发cml项目

packages目录创建一个cml的项目作为测试项目,开发过程中可以进行调试代码。示例中为cml-demo-project

1 cml-demo-projectchameleon.config.js需要 添加extPlatform,babelPath,builtinNpmName字段的配置,配置如下:


cml.config.merge({
  builtinNpmName: 'cml-demo-ui-builtin',
  extPlatform: {
    demo: 'cml-demo-plugin',
  },
  babelPath: [
    path.join(__dirname,'node_modules/cml-demo-ui-builtin'),
    path.join(__dirname,'node_modules/cml-demo-runtime'),
    path.join(__dirname,'node_modules/cml-demo-api'),
  ]
})

你的项目中注意把示例npm包名称改成你命名的npm包名称

  • builtinNpmName 字段是你定义的内置npm包名称
  • extPlatform是配置扩展新端的编译插件,key值为端标识,value为编译插件npm包名称。
  • babelPath 配置运行时相关的三个npm包需要过babel

2 cml-demo-projectpackage.jsondependencies中添加这几个开发npm包。

"cml-demo-api": "1.0.0",
"cml-demo-plugin": "1.0.0",
"cml-demo-runtime": "1.0.0",
"cml-demo-ui-builtin": "1.0.0"

3 在仓库的根目录执行lerna bootstrap安装依赖,建立关联,这样cml-demo-projectnode_modules下的这几个npm包会符号链接到packages下的同名npm包。

如何进行开发分工

  • api的工作是独立的 不依赖其他npm包的开发
  • runtime 运行时的工作也是独立的 不依赖其他npm包
  • plugin中的模板编译 在事件绑定的代理函数中依赖runtime 其他的工作不依赖
  • ui-builtin和 ui依赖runtime和plugin的完成 才能正确执行。 cml-tt-store的工作也是独立的,基本上小程序端实现是相同的。

开发编译插件

开发api库

开发运行时

开发组件库

开发数据管理

results matching ""

    No results matching ""