CML文件规范校验

CML文件规范校验包括校验以下三个规范：

  • CML文件命名规范
  • CML文件内容规范
  • CML Interface内容规范

CML文件命名规范

以cml后缀结尾的文件分两种情况：

1. 多端实现完全一致组件命名格式：

  1. [component name].cml

组件所有逻辑实现在同一文件中

举例：

  1. demo.cml

2. 多端实现不一致组件命名格式：

  1. [component name].[weex|wx|alipay|baidu|web].cml

组件文件名按照适配端命名，需要同一目录下的interface文件组合使用

  1. [component name].interface

举例：

  1. demo.interface
  2. demo.weex.cml
  3. demo.wx.cml
  4. demo.alipay.cml
  5. demo.baidu.cml
  6. demo.web.cml

CML文件内容规范

cml文件中可能包括以下几个字段标签

  • template(template规范)：标签中书写组件的视图层结构，chameleon自定义了一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
  • style(CMSS规范)：标签中书写组件的样式, 描述视图中的元素样式。
  • script(script规范)：标签中填充编写组件逻辑层响应页面操作的代码。
  • json(json规范)：标签中书写组件的配置信息。
    举例：
  1. // demo.cml code
  2. <template>
  3.   <view id="banner">
  5.   </view>
  6. </template>
  7. <script>
  8. class Index {
  10. }
  11. export default new Index();
  12. </script>
  13. <style scoped>
  14.   #banner {
  15.       background-color: #ff0000;
  16.   }
  17. </style>
  18. <script cml-type="json">
  19. {
  20.   "base":{
  21.     "usingComponents": {
  22.     }
  23.   },
  24.   "wx": {
  25.     "navigationBarTitleText": "index",
  26.     "backgroundTextStyle": "dark",
  27.     "backgroundColor": "#E2E2E2"
  28.   },
  29.   "alipay": {
  30.     "defaultTitle": "index",
  31.     "pullRefresh": false,
  32.     "allowsBounceVertical": "YES",
  33.     "titleBarColor": "#ffffff"
  34.   },
  35.   "baidu": {
  36.     "navigationBarBackgroundColor": "#ffffff",
  37.     "navigationBarTextStyle": "white",
  38.     "navigationBarTitleText": "index",
  39.     "backgroundColor": "#ffffff",
  40.     "backgroundTextStyle": "dark",
  41.     "enablePullDownRefresh": false,
  42.     "onReachBottomDistance": 50
  43.   },
  44.   "web": {
  45.   },
  46.   "weex": {
  47.   }
  48. }
  49. </script>

CML Interface内容规范

具体可参见interface规范，.interface后缀文件用于定义多态组件的接口。