(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{472:function(t,a,s){t.exports=s.p+"assets/img/cert.26a9702f.png"},495:function(t,a,s){"use strict";s.r(a);var n=s(17),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"工程化"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#工程化"}},[t._v("#")]),t._v(" 工程化")]),t._v(" "),n("p",[t._v("工程化是使用软件工程的技术和方法对项目的开发、上线和维护进行管理。CML 的工程化包含如下几个大方面：")]),t._v(" "),n("ul",[n("li",[t._v("1 模块化，项目中的文件统一以模块化的方式引入，包括.css,.js 以及定义的 interface 文件，这样做有如下好处避免变量污染与命名冲突，提高代码的复用率，提高代码的可维护性。")]),t._v(" "),n("li",[t._v("2 组件化，CML 定义了.cml 文件，以组件为单位，将一个组件需要的视图、逻辑、样式、配置采用单文件的形式进行开发，提高了代码的可读性。")]),t._v(" "),n("li",[t._v("3 本地开发解决方案，CML 提供了大量的工程化方法，解决本地开发时的各种痛点，包括\n"),n("ul",[n("li",[t._v("提供 dev 服务，Mock 数据等能力，达到不依赖后端实现开发的前后端分离。")]),t._v(" "),n("li",[t._v("提供 \b 热更新，自动刷新，调试窗口，线上资源代理等能力，提高本地开发时的效率。")])])]),t._v(" "),n("li",[t._v("4 线上部署解决方案，CML 的构建是完全配置化的，内置线上线下两种构建模式，线上工程化相关功能包括\n"),n("ul",[n("li",[t._v("线上静态资源的路径指定")]),t._v(" "),n("li",[t._v("\b 基于文件内容的文件指纹")]),t._v(" "),n("li",[t._v("减少文件体积的代码压缩")])])]),t._v(" "),n("li",[t._v("5 渐进式使用，CML 提供了两种渐进式使用的方式，一种是将 CML 的组件导出成各端的原生组件，第二种方式是引用插件在 webpack 项目中使用 CML 组件与接口。")])]),t._v(" "),n("h2",{attrs:{id:"数据-mock"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#数据-mock"}},[t._v("#")]),t._v(" 数据 Mock")]),t._v(" "),n("h3",{attrs:{id:"如何-mock-api-请求"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#如何-mock-api-请求"}},[t._v("#")]),t._v(" 如何 Mock API 请求")]),t._v(" "),n("blockquote",[n("p",[t._v("如果需要 Mock 多个域名的 API 请参见 "),n("RouterLink",{attrs:{to:"/docs/build.html#api-多域名-mock"}},[t._v("API 多域名 Mock")]),t._v("。")],1)]),t._v(" "),n("p",[t._v("1、 使用"),n("RouterLink",{attrs:{to:"/api/#网络请求"}},[t._v("内置网络请求")]),t._v("接口发起网络请求。例如：")],1),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" cml "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon-api'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncml\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    url"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/getdriver'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("showToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        duration"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("showToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        duration"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("调用方法的参数 url 中只需要写 api 的路径。那么本地 dev 开发模式如何 mock 这个 api 请求以及 build 线上模式如何请求线上地址，就需要在配置文件中配置 apiPrefix。")]),t._v(" "),n("p",[t._v("2、配置 "),n("code",[t._v("apiPrefix")]),t._v(" "),n("code",[t._v("dev")]),t._v(" 开发模式和 "),n("code",[t._v("build")]),t._v(" 模式配置的 "),n("code",[t._v("apiPrefix")]),t._v(" 会拼接到网络请求的 url 前，"),n("code",[t._v("dev")]),t._v(" 模式不配置时，默认为当前启动 Web 服务的 ip+端口。上面的例子中如果本地 ip 为 "),n("code",[t._v("198.168.1.1")]),t._v(" 启动端口为 "),n("code",[t._v("8000")]),t._v("。"),n("code",[t._v("dev")]),t._v(" 模式发起的网络请求为 "),n("code",[t._v("198.168.1.1:8000/api/getdriver")]),t._v(", "),n("code",[t._v("build")]),t._v(" 模式发起的网络请求为 "),n("code",[t._v("http://api.chameleon.com/api/getdriver")]),t._v("。")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置 API 请求前缀")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" apiPrefix "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://api.chameleon.com'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  wx"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    dev"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    build"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      apiPrefix"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("3、 配置本地 Mock 数据")]),t._v(" "),n("p",[t._v("前两步操作实现了网络请求 dev 模式请求本地，build 模式请求线上，这一步就讲解如何 mock 本地请求数据。")]),t._v(" "),n("p",[t._v("在"),n("code",[t._v("/mock/api/")]),t._v("文件夹下创建 Mock 数据的 js 文件。文件内容格式如下：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    method"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'get'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    path"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/getdriver'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("controller")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" next")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/driver/getList'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        total"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        driverList"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("ul",[n("li",[t._v("method 指定请求方法，默认值['get','post']")]),t._v(" "),n("li",[t._v("path 指定请求的路径")]),t._v(" "),n("li",[t._v("controller 是 express 的中间件形式，在中间件中可以做任何操作最后调用 res 的方法返回结果。")])]),t._v(" "),n("p",[t._v("启动 dev 模式后，通过 ip+端口+path 即可访问配置的 api 请求。结合上面讲到的网络请求方法，即可实现本地的 API 数据 Mock。")]),t._v(" "),n("p",[n("b",[t._v(" 扩展 如何在本地 dev 模式请求线上数据？")])]),t._v(" "),n("p",[t._v("可以在 mock 文件的 controller 中请求对应的线上数据，例如可以使用 "),n("a",{attrs:{href:"https://github.com/request/request",target:"_blank",rel:"noopener noreferrer"}},[t._v("request 模块"),n("OutboundLink")],1),t._v("实现请求。")]),t._v(" "),n("p",[t._v("注："),n("RouterLink",{attrs:{to:"/tutorial/deploy-guide.html#apiPrefix、publicPath、router.config.json、cmlUrl的关系"}},[t._v("apiPrefix、publicPath、router.config.json、cmlUrl 的关系")])],1),t._v(" "),n("h3",{attrs:{id:"如何-mock-php-模板下发数据"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#如何-mock-php-模板下发数据"}},[t._v("#")]),t._v(" 如何 mock php 模板下发数据")]),t._v(" "),n("p",[n("code",[t._v("/mock/template/")]),t._v("文件夹下存放的 php 文件是下发的模板数据，php 文件内将下发的数据赋值给$CML 对象，例如：")]),t._v(" "),n("div",{staticClass:"language-php extra-class"},[n("pre",{pre:!0,attrs:{class:"language-php"}},[n("code",[n("span",{pre:!0,attrs:{class:"token php language-php"}},[n("span",{pre:!0,attrs:{class:"token delimiter important"}},[t._v("<?php")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$chameleon")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("array")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"errno"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"errmsg"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('""')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"pageData"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("array")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"pageInfo"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("array")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"title"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"chameleon"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"content"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token double-quoted-string string"}},[t._v('"chameleon跨端"')]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token delimiter important"}},[t._v("?>")])]),t._v("\n")])])]),n("p",[t._v("在模板中通过变量"),n("code",[t._v("pageData,errno,errmsg")]),t._v("接收。")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" pageData "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("json_encode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("$pageData"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" errno "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("json_encode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("$errno"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" errmsg "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("json_encode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("$errmsg"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),n("p",[t._v("同时还模拟了与模板下发的 pageData 相同的 ajax 请求，只需在当前访问页面的 url 上添加 puredata=1 参数。")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  errno"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  errmsg"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  pageData"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    pageInfo"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      title"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      content"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon跨端'")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"api-多域名-mock"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#api-多域名-mock"}},[t._v("#")]),t._v(" API 多域名 Mock")]),t._v(" "),n("p",[t._v("在数据 Mock 一节讲述了如何进行 API 数据的 mock，但是只局限于所有 api 请求都是相同域名的情况，工作中可能出现一个项目请求多个域名的 api 接口，本节将讲解如和进行多域名的 mock。")]),t._v(" "),n("h3",{attrs:{id:"版本要求"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#版本要求"}},[t._v("#")]),t._v(" 版本要求")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("chameleon-tool >= 0.2.1")])]),t._v(" "),n("li",[n("code",[t._v("chameleon-api >= 0.3.1")])])]),t._v(" "),n("h3",{attrs:{id:"chameleon-config-js-中配置多域名信息"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#chameleon-config-js-中配置多域名信息"}},[t._v("#")]),t._v(" chameleon.config.js 中配置多域名信息")]),t._v(" "),n("p",[t._v("domain 对象配置多域名的信息。\n"),n("code",[t._v("domain")]),t._v(", Object 类型。\n配置在 base 对象中，可以作为所有平台的公共配置，dev 模式中配置的"),n("code",[t._v("localhost")]),t._v("会替换成当前 dev 模式启动的 web 服务 ip+端口。")]),t._v(" "),n("p",[t._v("例如：")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v('cml.config.merge({\n  base: {\n    dev: {\n      domain: {\n        domain1: "localhost",\n        domain2: "localhost"\n      },\n    },\n    build: {\n      domain: {\n        domain1: "http://api.cml.com",\n        domain2: "http://api2.cml.com"\n      },\n    }\n  },\n})\n')])])]),n("h3",{attrs:{id:"使用-chameleon-api-发网络请求"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#使用-chameleon-api-发网络请求"}},[t._v("#")]),t._v(" 使用 chameleon-api 发网络请求")]),t._v(" "),n("p",[n("code",[t._v("chameleon-api")]),t._v("的网络请求"),n("code",[t._v("get、post、request")]),t._v("方法中添加 domain 参数。\n"),n("code",[t._v("chameleon.config.js")]),t._v("中添加的"),n("code",[t._v("domain")]),t._v("对象配置，在项目中可以通过"),n("code",[t._v("process.env.domain")]),t._v("变量访问。")]),t._v(" "),n("p",[t._v("例如：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" cml "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon-api'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncml\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    domain"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" process"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("env"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("domain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("domain1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    url"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/getMessage'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("showToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        duration"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("showToast")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        duration"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h3",{attrs:{id:"配置-mock-数据"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#配置-mock-数据"}},[t._v("#")]),t._v(" 配置 Mock 数据")]),t._v(" "),n("p",[t._v("前两步操作实现了网络请求 dev 模式请求本地，build 模式请求线上，这一步就讲解如何 mock 本地多域名的请求数据。")]),t._v(" "),n("p",[t._v("在"),n("code",[t._v("/mock/api/")]),t._v("文件夹下创建 Mock 数据的 js 文件。文件内容格式如下：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    domainKey"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'domain1'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    request"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        method"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'get'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        path"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/getMessage'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("controller")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" next")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            total"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            message"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n              "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                name"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'HelloCML domain1'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    domainKey"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'domain2'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    request"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        method"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'get'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        path"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/getMessage'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("controller")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" next")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          res"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            total"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            message"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n              "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                name"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'domain2!'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("ul",[n("li",[t._v("domainKey 指定 Mock 的域名，对应 "),n("code",[t._v("chameleon.config.js")]),t._v(" 中 domain 对象的 key 值。")]),t._v(" "),n("li",[t._v("method 指定请求方法，默认值['get','post']")]),t._v(" "),n("li",[t._v("path 指定请求的路径")]),t._v(" "),n("li",[t._v("controller 是 express 的中间件形式，在中间件中可以做任何操作最后调用 res 的方法返回结果。")])]),t._v(" "),n("h2",{attrs:{id:"资源定位"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#资源定位"}},[t._v("#")]),t._v(" 资源定位")]),t._v(" "),n("h3",{attrs:{id:"静态资源引用"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#静态资源引用"}},[t._v("#")]),t._v(" 静态资源引用")]),t._v(" "),n("p",[t._v("模板中引用静态资源，不能直接将资源的路径写在模板中，而是要通过 js 中 require 该静态资源得到变量，在模板中引用该变量。\n该路径会根据"),n("RouterLink",{attrs:{to:"/docs/config.html"}},[t._v("项目配置的 publicPath")]),t._v("自动替换成正确路径。利用该功能可以实现 \b 静态资源 \b 开发路径和部署路径之间的 \b 分离，开发者只需要写相对路径，线上可以通过设置"),n("code",[t._v("publicPath")]),t._v("指定任意路径。")],1),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!-- \n错误形式\n<image src="./images/logo.png" /> \n--\x3e')]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 正确形式 --\x3e")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("image")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{imgPath}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    imgPath"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./images/logo.png'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h3",{attrs:{id:"图片-base64"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#图片-base64"}},[t._v("#")]),t._v(" 图片 base64\b")]),t._v(" "),n("p",[t._v("支持在引用图片 url 后面添加"),n("code",[t._v("inline")]),t._v("参数，以指定图片的 base64 格式，例如：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    imgPath"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./images/logo.png?__inline'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h2",{attrs:{id:"文件指纹"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#文件指纹"}},[t._v("#")]),t._v(" 文件指纹")]),t._v(" "),n("p",[t._v("查看"),n("RouterLink",{attrs:{to:"/docs/config.html#文件指纹"}},[t._v("文件指纹配置")])],1),t._v(" "),n("h2",{attrs:{id:"代码压缩"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#代码压缩"}},[t._v("#")]),t._v(" 代码压缩")]),t._v(" "),n("p",[t._v("查看"),n("RouterLink",{attrs:{to:"/docs/config.html#代码压缩"}},[t._v("代码压缩配置")])],1),t._v(" "),n("h2",{attrs:{id:"热更新与自动刷新"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#热更新与自动刷新"}},[t._v("#")]),t._v(" 热更新与自动刷新")]),t._v(" "),n("p",[t._v("查看"),n("RouterLink",{attrs:{to:"/docs/config.html#热更新与自动刷新"}},[t._v("热更新与自动刷新配置")])],1),t._v(" "),n("h2",{attrs:{id:"代理模式开发"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#代理模式开发"}},[t._v("#")]),t._v(" 代理模式开发")]),t._v(" "),n("p",[t._v("调试线上编译处理过的非可读性代码，可以使用本功能")]),t._v(" "),n("p",[t._v("通过简单的 CML 配置将线上文件代理到线下的开发环境，这样就可以通过修改线下的源码 debug 线上页面了，使用方法如下：")]),t._v(" "),n("h3",{attrs:{id:"第一步"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#第一步"}},[t._v("#")]),t._v(" 第一步")]),t._v(" "),n("p",[t._v("chameleon.config.js 中开启代理模式:")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    proxy"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        enable"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h3",{attrs:{id:"第二步"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#第二步"}},[t._v("#")]),t._v(" 第二步")]),t._v(" "),n("p",[t._v("执行以下命令")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("cml dev\n")])])]),n("h3",{attrs:{id:"第三步"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#第三步"}},[t._v("#")]),t._v(" 第三步")]),t._v(" "),n("p",[t._v("根据调试面板打印的信息给手机安装证书")]),t._v(" "),n("p",[n("img",{attrs:{src:s(472),alt:"image"}})]),t._v(" "),n("h3",{attrs:{id:"第四步"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#第四步"}},[t._v("#")]),t._v(" 第四步")]),t._v(" "),n("p",[t._v("根据上图提示将手机代理到相应的端口")]),t._v(" "),n("p",[t._v("完成以上步骤就可以进行代理开发了。")]),t._v(" "),n("p",[t._v("默认代理了 Weex 和 Web 端的 js 和 css 文件，如需代理更多文件，可以 \b 添加 mapremote 配置，方法如下：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    proxy"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        enable"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        mapremote"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://a.b.com/weex/aaa_(.+).js'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            to"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://localhost:8000/weex/aaa.js'")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://a.b.com/weex/bbb_(.+).js'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            to"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://localhost:8000/weex/bbb.js'")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"cmlurl"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cmlurl"}},[t._v("#")]),t._v(" cmlUrl")]),t._v(" "),n("p",[t._v("一个 cmlUrl 能在多端运行，在普通浏览器/webview 运行 Web 端，小程序运行小程序端，Native 渲染（weex）则拉取对应的 JS Bundle 并展现，完整地址如下，使用场景包含：")]),t._v(" "),n("ul",[n("li",[t._v("a.跨应用页面之间跳转使用"),n("RouterLink",{attrs:{to:"/api/#open"}},[t._v("open 接口")])],1),t._v(" "),n("li",[t._v("b.服务端下发给端（weex/浏览器/小程序）进行跳转")])]),t._v(" "),n("p",[n("code",[t._v("https://h5地址")]),t._v("?\n"),n("code",[t._v("cml_addr=jsbundle地址")]),t._v("&\n"),n("code",[t._v("path=路由path(通用字段)")]),t._v("&\n"),n("code",[t._v("envVersion=要打开的小程序版本(通用字段)")]),t._v("&\n"),n("code",[t._v("weixin_appid=123456")]),t._v("&\n"),n("code",[t._v("weixin_path=微信小程序路由path")]),t._v("&\n"),n("code",[t._v("weixin_envVersion=要打开的微信小程序版本")]),t._v("&\n"),n("code",[t._v("baidu_appid=123456")]),t._v("&\n"),n("code",[t._v("baidu_path=百度小程序路由path")]),t._v("&\n"),n("code",[t._v("baidu_envVersion=要打开的百度小程序版本")]),t._v("&\n"),n("code",[t._v("alipay_appid=123456")]),t._v("&\n"),n("code",[t._v("alipay_path=支付宝小程序路由path")])]),t._v(" "),n("table",[n("tr",[n("th",[t._v("参数")]),t._v(" "),n("th",[t._v("作用")]),t._v(" "),n("th",[t._v("说明")])]),t._v(" "),n("tr",[n("td",[t._v("h5地址")]),t._v(" "),n("td",[t._v("H5端的地址或者用于提示bundle出错的h5地址")]),t._v(" "),n("td",[t._v("\b如果你没有h5地址，可以选择将h5地址写为jsbundle地址（后面的cml_addr\b\b=jsbundle地址依然需要）。")])]),t._v(" "),n("tr",[n("td",[t._v("cml_addr")]),t._v(" "),n("td",[t._v("描述weex/rn js bundle地址")]),t._v(" "),n("td",[t._v("内部非使用sdk开发者\b暂时使用cml_addr字段")])]),t._v(" "),n("tr",[n("td",[t._v("path")]),t._v(" "),n("td",[t._v("描述应用里面的页面路由， 即路由里面的 path 值 ")]),t._v(" "),n("td",[t._v("若未填写weixin_path, baidu_path, alipay_path时, 统一使用该字段")])]),t._v(" "),n("tr",[n("td",[t._v("envVersion")]),t._v(" "),n("td",[t._v("要打开的小程序版本 ")]),t._v(" "),n("td",[t._v("有效值 develop（开发版），trial（体验版），release（正式版） ，仅在当前小程序为开发版或体验版时此参数有效(仅支持"),n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateToMiniProgram.html"}},[t._v("微信小程序")]),t._v("和"),n("a",{attrs:{href:"https://docs.alipay.com/mini/api/open-miniprogram"}},[t._v("支付宝小程序")]),t._v(")")])]),t._v(" "),n("tr",[n("td",[t._v("weixin_appid")]),t._v(" "),n("td",[t._v("描述微信小程序的app id")]),t._v(" "),n("td",[t._v("微信小程序跳转需要 "),n("a",{attrs:{href:"https://developers.weixin.qq.com/minigame/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html?t=18091916"}},[t._v("appid")])])]),t._v(" "),n("tr",[n("td",[t._v("weixin_path")]),t._v(" "),n("td",[t._v("描述应用里面的页面路由(目标微信小程序为非 CML 项目时可用)")]),t._v(" "),n("td")]),t._v(" "),n("tr",[n("td",[t._v("weixin_envVersion")]),t._v(" "),n("td",[t._v("要打开的小程序版本 ")]),t._v(" "),n("td",[t._v("有效值 develop（开发版），trial（体验版），release（正式版） ，仅在当前小程序为开发版或体验版时此参数有效(该字段仅对微信小程序跳转生效)")])]),t._v(" "),n("tr",[n("td",[t._v("baidu_appid")]),t._v(" "),n("td",[t._v("描述百度小程序的appKey")]),t._v(" "),n("td",[t._v("百度小程序跳转需要 "),n("a",{attrs:{href:"https://smartprogram.baidu.com/docs/develop/api/open_smartprogram/#navigateToSmartProgram/"}},[t._v("appKey")])])]),t._v(" "),n("tr",[n("td",[t._v("baidu_path")]),t._v(" "),n("td",[t._v("描述应用里面的页面路由(目标百度小程序为非 CML 项目时可用)")]),t._v(" "),n("td")]),t._v(" "),n("tr",[n("td",[t._v("alipay_appid")]),t._v(" "),n("td",[t._v("描述支付宝小程序的app id")]),t._v(" "),n("td",[t._v("支付宝小程序跳转需要 "),n("a",{attrs:{href:"https://docs.alipay.com/mini/api/open-miniprogram"}},[t._v("appid")])])]),t._v(" "),n("tr",[n("td",[t._v("alipay_path")]),t._v(" "),n("td",[t._v("描述应用里面的页面路由(目标支付宝小程序为非 CML 项目时可用)")]),t._v(" "),n("td")]),t._v(" "),n("tr",[n("td",[t._v("alipay_envVersion")]),t._v(" "),n("td",[t._v("要打开的小程序版本 ")]),t._v(" "),n("td",[t._v("有效值 develop（开发版），trial（体验版），release（正式版） ，仅在当前小程序为开发版或体验版时此参数有效(该字段仅对支付宝小程序跳转生效)")])])]),t._v(" "),n("h2",{attrs:{id:"规范与校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#规范与校验"}},[t._v("#")]),t._v(" 规范与校验")]),t._v(" "),n("p",[t._v("按照框架定义，有相应的目录规范，文件规范，文件内容规范等，按照规范编写代码，可以最大程度的减少开发、调试时间。")]),t._v(" "),n("p",[t._v("另，框架提供了校验工具，让开发者可以提前发现不符合规范的问题，提高效率。")]),t._v(" "),n("h3",{attrs:{id:"接口校验语法"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#接口校验语法"}},[t._v("#")]),t._v(" 接口校验语法")]),t._v(" "),n("blockquote",[n("p",[t._v("接口是一系列方法的声明，是一些方法特征的集合，一个接口只有方法的特征没有方法的实现，因此这些方法可以在不同的地方被不同的类实现，而这些实现可以具有不同的行为（功能）进行沟通。")])]),t._v(" "),n("h4",{attrs:{id:"校验配置"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#校验配置"}},[t._v("#")]),t._v(" 校验配置")]),t._v(" "),n("p",[t._v("通过配置决定是否开启接口的校验。\n"),n("code",[t._v("Object、Array、Nullable")]),t._v("这三个类型默认是不支持的，因为我们建议更精确的校验，可以通过配置文件开启这三个类型。\n具体参见"),n("RouterLink",{attrs:{to:"/docs/config.html#多态校验控制"}},[t._v("多态校验控制的配置")])],1),t._v(" "),n("h4",{attrs:{id:"类型说明"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#类型说明"}},[t._v("#")]),t._v(" 类型说明")]),t._v(" "),n("p",[n("strong",[t._v("\b 注意：建议定义类型的时候取值为 Number String Boolean Null Undefined(Void) Object Array Function Date RegExp")])]),t._v(" "),n("p",[t._v("目前 CML 接口定义支持简单类型和复合类型。")]),t._v(" "),n("p",[t._v("其中简单类型包括以下类型：")]),t._v(" "),n("ul",[n("li",[t._v("Number(number)")]),t._v(" "),n("li",[t._v("String(string)")]),t._v(" "),n("li",[t._v("Boolean(bool)")]),t._v(" "),n("li",[t._v("Undefined(void)")]),t._v(" "),n("li",[t._v("Null")])]),t._v(" "),n("p",[t._v("复合类型包括以下类型：")]),t._v(" "),n("ul",[n("li",[t._v("Function")]),t._v(" "),n("li",[t._v("Object")]),t._v(" "),n("li",[t._v("Array")]),t._v(" "),n("li",[t._v("Date")]),t._v(" "),n("li",[t._v("RegExp")])]),t._v(" "),n("h4",{attrs:{id:"接口语法"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#接口语法"}},[t._v("#")]),t._v(" 接口语法")]),t._v(" "),n("p",[t._v("接口的使用分两个过程：")]),t._v(" "),n("ol",[n("li",[t._v("定义一个接口。")]),t._v(" "),n("li",[t._v("定义实现接口的类。")])]),t._v(" "),n("h5",{attrs:{id:"接口定义"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#接口定义"}},[t._v("#")]),t._v(" 接口定义")]),t._v(" "),n("p",[n("strong",[t._v("范式")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("interface [接口名称] {\n    // 接口中的属性\n    [属性名称]: [类型],\n\n    // 接口中的方法\n   [方法名称]([传入参数1名称]: [传入参数1类型], [传入参数2名称]: [传入参数2类型], ...): [返回类型]\n}\n")])])]),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("// 一个名为interface1的接口\ninterface interface1 {\n  // foo1: 传入分别为string和number的两个数据，返回值类型为string值\n  foo1(a: string, b: number): string;\n\n  // foo2: 传入分别为string和Callback(上文定义)的两个数据，返回值类型为bool值\n  foo2(c: string, d: Callback): Boolean;\n}\n")])])]),n("h5",{attrs:{id:"实现接口（定义类）"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#实现接口（定义类）"}},[t._v("#")]),t._v(" 实现接口（定义类）")]),t._v(" "),n("p",[n("strong",[t._v("范式")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("class [类名称] implaments [接口名称] {\n\n    // 实现接口中的属性\n    [属性名称]: [类型]\n\n    // 实现接口中的方法\n  [方法名称]([传入参数1名称], [传入参数2名称], ...){\n      return [返回值];\n    }\n}\n")])])]),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("// 实现一个名称为Clazz，实现上文定义的interface1接口\nclass Clazz implaments interface1 {\n\n    // 实现interface1定义的foo1方法，输入值和输出值要满足定义\n    foo1(a, b) {\n        return 'hello ' + a + ' : ' + (b + 1);\n    }\n\n    // 实现interface1定义的foo2方法，输入值和输出值要满足定义\n    foo2(c, d) {\n        return 'balabala...';\n    }\n}\n")])])]),n("h4",{attrs:{id:"复合类型的定义范式"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#复合类型的定义范式"}},[t._v("#")]),t._v(" 复合类型的定义范式")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("type [类型名称] = [类型定义]\n")])])]),n("p",[t._v("不同的复合类型，类型定义也不相同，下面会对三种复合类型做详细说明。")]),t._v(" "),n("h5",{attrs:{id:"function-类型定义"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#function-类型定义"}},[t._v("#")]),t._v(" Function 类型定义")]),t._v(" "),n("p",[n("strong",[t._v("范式")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("type [Function类型名称] = ([传入参数1名称]: [传入参数1类型], [传入参数2名称]: [传入参数2类型], ...) => [返回类型]\n")])])]),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("// 定义一个传参分别为number,string,bool类型的三个参数，返回值为number的函数类型\ntype Callback = (a: number, b: string, c: bool) => number;\n")])])]),n("h5",{attrs:{id:"object-类型定义"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#object-类型定义"}},[t._v("#")]),t._v(" Object 类型定义")]),t._v(" "),n("p",[n("strong",[t._v("范式")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("type [Object类型名称] = {\n    [属性名称1]: [类型1],\n    [属性名称2]: [类型2]\n}\n")])])]),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("// 定义含有a,b,c三个属性的复合类型\ntype Scheme = {\n    a: string,\n    b: bool,\n    c: number\n}\n")])])]),n("h5",{attrs:{id:"array-类型定义"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#array-类型定义"}},[t._v("#")]),t._v(" Array 类型定义")]),t._v(" "),n("p",[n("strong",[t._v("范式")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("type [Array类型名称] = [\n  [类型1]\n]\n")])])]),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("// 定义名称为arrayType1的数组类型，数组元素为number类型\ntype arrayType1 = [\n    number\n]\n")])])]),n("h5",{attrs:{id:"目前数组的详细校验只能校验数组中的元素是同一种类型，即-1-2-3-而不能校验-1-2-this-is-string"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#目前数组的详细校验只能校验数组中的元素是同一种类型，即-1-2-3-而不能校验-1-2-this-is-string"}},[t._v("#")]),t._v(" 目前数组的详细校验只能校验数组中的元素是同一种类型，即[1,2,3],而不能校验 [1,2,'this is string'];")]),t._v(" "),n("ul",[n("li",[t._v("如果想要校验某个入参或者函数的返回值是一个数组，但是数组中的值得类型不是同一类型")]),t._v(" "),n("li",[t._v("或者只想简单的对某个对象进行类型校验，但是对象中具体的 key-value 值不想校验；\n那么在项目配置开启['Object','Array']直接校验的前提下，可以如下写**")])]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("arr"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" arr "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'str'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("address"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'China'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("arr"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("obj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'this is str'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"jhon"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("此时校验就只会校验入参或者返回值得数据类型是否是 Array 或者 Object ，而不会深入校验数组或者对象中的元素；")]),t._v(" "),n("h4",{attrs:{id:"复合类型中的相互嵌套"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#复合类型中的相互嵌套"}},[t._v("#")]),t._v(" 复合类型中的相互嵌套")]),t._v(" "),n("p",[t._v("Function、Object、Array 三种复合类型可以互相嵌套：")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",[n("code",[t._v("// 定义一个传参分别为number,string,bool类型的三个参数，返回值为number的函数类型\ntype Callback = (a: number, b: string, c: bool) => number;\n\n// 定义名称为arrayType1的数组类型，数组元素为number类型\ntype arrayType1 = [\n    number\n]\n\n// 定义名称为Scheme的，含有Array类型和Function类型属性的Object类型\ntype Scheme = {\n    a: arrayType1,\n    b: Callback,\n}\n\n// 定义名称为Plan，含有Scheme类型和Callback的属性的Object类型\ntype Plan = {\n    a: string,\n    b: Scheme,\n    c: Callback\n}\n\n// 定义名称为arrayType1类型，元素为Plan类型\ntype arrayType1 = [\n    Plan\n]\n")])])]),n("h5",{attrs:{id:"date-类型的定义"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#date-类型的定义"}},[t._v("#")]),t._v(" Date 类型的定义")]),t._v(" "),n("p",[t._v("如果函数参数或者返回值是 Date 数据类型，那么可以按照下面的方式进行定义；")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("d"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Date"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Date"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Date")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h4",{attrs:{id:"regexp-类型的定义"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#regexp-类型的定义"}},[t._v("#")]),t._v(" RegExp 类型的定义")]),t._v(" "),n("p",[t._v("如果函数参数或者返回值是 RegExp 数据类型，那么可以按照下面的方式进行定义；")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("d"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" RegExp"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" RegExp"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("r")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RegExp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h4",{attrs:{id:"maybe-types-意味着该值可能是这种类型，但是也可能是-undefined-或者-null"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#maybe-types-意味着该值可能是这种类型，但是也可能是-undefined-或者-null"}},[t._v("#")]),t._v(" Maybe Types : 意味着该值可能是这种类型，但是也可能是 undefined 或者 null")]),t._v(" "),n("p",[n("strong",[t._v("注意如果要定义 Nullable（?Number）这样的参数，那么该参数的占位符是必须的")])]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("acceptsMaybeNumber")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("Number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Undefined"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("acceptsMaybeNumber")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" c")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token function"}},[t._v("acceptsMaybeNumber")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("42")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'str'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Works!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("acceptsMaybeNumber")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'str'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Works!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("acceptsMaybeNumber")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'str'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Works!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("acceptsMaybeNumber")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'42'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'str'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Error!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//**注意如果要定义Nullable（?Number）这样的参数，那么该参数的占位符是必须的,在校验入参的时候，会按照interface中定义的顺序，有序的校验传入的参数是否和interface中定义的数据参数类型一直，(?Number)这种定义的校验其实只是说明这个参数可以是 null  undefined number类型的数据，但是是必须传递的**")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("acceptsMaybeNumber")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'str'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Error!")]),t._v("\n")])])]),n("h3",{attrs:{id:"全局变量校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#全局变量校验"}},[t._v("#")]),t._v(" 全局变量校验")]),t._v(" "),n("p",[t._v("CML 的代码最终会运行在多端框架中，每一个端都会有一些特有的全局变量，chameleon 内部维护了一个各端全局变量的散列表如下表所示。")]),t._v(" "),n("p",[n("b",[t._v("全局变量校验校验的是某一端运行的代码中存在其他端的全局变量并且不是当前端的全局变量")]),t._v("。例如非微信小程序端的 \b 代码中不能出现"),n("code",[t._v("wx")]),t._v("全局变量，非百度小程序的代码中不能出现"),n("code",[t._v("\bswan")]),t._v("全局变量。")]),t._v(" "),n("p",[t._v("可以通过项目配置决定是否开启全局变量校验，还可以配置哪些文件是白名单文件进行校验。")]),t._v(" "),n("table",[n("tr",[n("th",[t._v("端")]),n("th",[t._v("全局变量")])]),t._v(" "),n("tr",[n("td",[t._v("微信小程序")]),n("td",[t._v('["wx"]')])]),t._v(" "),n("tr",[n("td",[t._v("百度小程序")]),n("td",[t._v('["swan"]')])]),t._v(" "),n("tr",[n("td",[t._v("weex")]),n("td",[t._v('["weex"]')])]),t._v(" "),n("tr",[n("td",[t._v("支付宝小程序")]),n("td",[t._v('["my"]')])]),t._v(" "),n("tr",[n("td",[t._v("web")]),n("td",[n("div",{staticStyle:{width:"500px"}},[t._v('["postMessage","blur","focus","close","frames","self","window","parent","opener","top","length","closed","location","document","origin","name","history","locationbar","menubar","personalbar","scrollbars","statusbar","toolbar","status","frameElement","navigator","customElements","external","screen","innerWidth","innerHeight","scrollX","pageXOffset","scrollY","pageYOffset","screenX","screenY","outerWidth","outerHeight","devicePixelRatio","clientInformation","screenLeft","screenTop","defaultStatus","defaultstatus","styleMedia","onanimationend","onanimationiteration","onanimationstart","onsearch","ontransitionend","onwebkitanimationend","onwebkitanimationiteration","onwebkitanimationstart","onwebkittransitionend","isSecureContext","onabort","onblur","oncancel","oncanplay","oncanplaythrough","onchange","onclick","onclose","oncontextmenu","oncuechange","ondblclick","ondrag","ondragend","ondragenter","ondragleave","ondragover","ondragstart","ondrop","ondurationchange","onemptied","onended","onerror","onfocus","oninput","oninvalid","onkeydown","onkeypress","onkeyup","onload","onloadeddata","onloadedmetadata","onloadstart","onmousedown","onmouseenter","onmouseleave","onmousemove","onmouseout","onmouseover","onmouseup","onmousewheel","onpause","onplay","onplaying","onprogress","onratechange","onreset","onresize","onscroll","onseeked","onseeking","onselect","onstalled","onsubmit","onsuspend","ontimeupdate","ontoggle","onvolumechange","onwaiting","onwheel","onauxclick","ongotpointercapture","onlostpointercapture","onpointerdown","onpointermove","onpointerup","onpointercancel","onpointerover","onpointerout","onpointerenter","onpointerleave","onafterprint","onbeforeprint","onbeforeunload","onhashchange","onlanguagechange","onmessage","onmessageerror","onoffline","ononline","onpagehide","onpageshow","onpopstate","onrejectionhandled","onstorage","onunhandledrejection","onunload","performance","stop","open","alert","confirm","prompt","print","requestAnimationFrame","cancelAnimationFrame","requestIdleCallback","cancelIdleCallback","captureEvents","releaseEvents","getComputedStyle","matchMedia","moveTo","moveBy","resizeTo","resizeBy","getSelection","find","webkitRequestAnimationFrame","webkitCancelAnimationFrame","fetch","btoa","atob","createImageBitmap","scroll","scrollTo","scrollBy","onappinstalled","onbeforeinstallprompt","crypto","ondevicemotion","ondeviceorientation","ondeviceorientationabsolute","indexedDB","webkitStorageInfo","sessionStorage","localStorage","chrome","visualViewport","speechSynthesis","webkitRequestFileSystem","webkitResolveLocalFileSystemURL","openDatabase","applicationCache","caches","whichAnimationEvent","animationendEvent","infinity","SETTING","AppView","ExtensionOptions","ExtensionView","WebView","iconPath","_app","_ZOOM_","Feed","md5","$","jQuery","Search","windmill","Lethargy","alertTimeOut","supportApps","lethargyX","lethargyY","iView","onModuleResLoaded","iEditDelete","infinityDrag","i","array","TEMPORARY","PERSISTENT","addEventListener","removeEventListener","dispatchEvent"]')])])])]),t._v(" "),n("h3",{attrs:{id:"代码规范校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#代码规范校验"}},[t._v("#")]),t._v(" 代码规范校验")]),t._v(" "),n("h4",{attrs:{id:"核心文件校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#核心文件校验"}},[t._v("#")]),t._v(" 核心文件校验")]),t._v(" "),n("p",[t._v("根据"),n("code",[t._v("chameleon")]),t._v("目录结构，确定核心文件的位置，保证 CML 项目能够正常运行。")]),t._v(" "),n("h5",{attrs:{id:"目录结构"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#目录结构"}},[t._v("#")]),t._v(" 目录结构")]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[t._v("├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置文件\n    └── store                           // 全局状态管理\n")])])]),n("h5",{attrs:{id:"核心文件列表"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#核心文件列表"}},[t._v("#")]),t._v(" 核心文件列表")]),t._v(" "),n("p",[t._v("会对以下核心文件进行检查：")]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[t._v("chameleon.config.js\nsrc/app/app.cml\nsrc/router.config.json\n")])])]),n("h4",{attrs:{id:"cml-文件规范校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cml-文件规范校验"}},[t._v("#")]),t._v(" CML 文件规范校验")]),t._v(" "),n("p",[t._v("CML 文件规范校验包括校验以下三个规范：")]),t._v(" "),n("ul",[n("li",[t._v("CML 文件命名规范")]),t._v(" "),n("li",[t._v("CML 文件内容规范")]),t._v(" "),n("li",[t._v("CML Interface 内容规范")])]),t._v(" "),n("h5",{attrs:{id:"cml-文件命名规范"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cml-文件命名规范"}},[t._v("#")]),t._v(" CML 文件命名规范")]),t._v(" "),n("p",[t._v("以 cml 后缀结尾的文件分两种情况：")]),t._v(" "),n("p",[n("strong",[t._v("多端实现完全一致组件命名格式")])]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("component name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(".cml\n")])])]),n("p",[t._v("组件所有逻辑实现在同一文件中")]),t._v(" "),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[t._v("demo.cml\n")])])]),n("p",[n("strong",[t._v("多端实现不一致组件命名格式")])]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("component name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("."),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("weex"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("wx"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("alipay"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("baidu"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("web"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(".cml\n")])])]),n("p",[t._v("组件文件名按照适配端命名，需要同一目录下的 interface 文件组合使用")]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("component name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(".interface\n")])])]),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[t._v("demo.interface\ndemo.weex.cml\ndemo.wx.cml\ndemo.alipay.cml\ndemo.baidu.cml\ndemo.web.cml\n")])])]),n("h5",{attrs:{id:"cml-文件内容规范"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cml-文件内容规范"}},[t._v("#")]),t._v(" CML 文件内容规范")]),t._v(" "),n("p",[t._v("cml 文件中可能包括以下几个字段标签")]),t._v(" "),n("ol",[n("li",[t._v("template(template 规范)：标签中书写组件的视图层结构，chameleon 自定义了一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。")]),t._v(" "),n("li",[t._v("style(CMSS 规范)：标签中书写组件的样式, 描述视图中的元素样式。")]),t._v(" "),n("li",[t._v("script(script 规范)：标签中填充编写组件逻辑层响应页面操作的代码。")]),t._v(" "),n("li",[t._v("json(json 规范)：标签中书写组件的配置信息。")])]),t._v(" "),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[t._v("// demo.cml code\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("banner"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token style"}},[n("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#banner")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #ff0000"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#E2E2E2"')]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"alipay"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"defaultTitle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pullRefresh"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"allowsBounceVertical"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"YES"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"titleBarColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#ffffff"')]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"baidu"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarBackgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#ffffff"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"white"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#ffffff"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"enablePullDownRefresh"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"onReachBottomDistance"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("50")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"web"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"weex"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h5",{attrs:{id:"cml-interface-内容规范"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cml-interface-内容规范"}},[t._v("#")]),t._v(" CML Interface 内容规范")]),t._v(" "),n("p",[n("code",[t._v(".interface")]),t._v(" 后缀文件用于定义多态组件的接口。")]),t._v(" "),n("blockquote",[n("p",[t._v("接口是一系列方法的声明，是一些方法特征的集合，一个接口只有方法的特征没有方法的实现，因此这些方法可以在不同的地方被不同的类实现，而这些实现可以具有不同的行为（功能）进行沟通。")])]),t._v(" "),n("p",[n("strong",[t._v("类型说明")])]),t._v(" "),n("p",[n("strong",[t._v("注意：建议定义类型的时候取值为 Number String Boolean Null Undefined(Void) Object Array Function Date RegExp")])]),t._v(" "),n("p",[t._v("目前 CML 接口定义支持简单类型和复合类型。")]),t._v(" "),n("p",[t._v("其中简单类型包括以下类型：")]),t._v(" "),n("ul",[n("li",[t._v("Number(number)")]),t._v(" "),n("li",[t._v("String(string)")]),t._v(" "),n("li",[t._v("Boolean(bool)")]),t._v(" "),n("li",[t._v("Undefined(void)")]),t._v(" "),n("li",[t._v("Null")])]),t._v(" "),n("p",[t._v("复合类型包括以下类型：")]),t._v(" "),n("ul",[n("li",[t._v("Function")]),t._v(" "),n("li",[t._v("Object")]),t._v(" "),n("li",[t._v("Array")]),t._v(" "),n("li",[t._v("Date")]),t._v(" "),n("li",[t._v("RegExp")]),t._v(" "),n("li",[t._v("Promise")])]),t._v(" "),n("p",[n("strong",[t._v("接口语法")])]),t._v(" "),n("p",[t._v("接口的使用分两个过程：")]),t._v(" "),n("ol",[n("li",[t._v("定义一个接口。")]),t._v(" "),n("li",[t._v("定义实现接口的类。")])]),t._v(" "),n("p",[n("strong",[t._v("接口定义")])]),t._v(" "),n("p",[t._v("范式:")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("接口名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 接口中的属性")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("属性名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 接口中的方法")]),t._v("\n       "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("方法名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("返回类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 一个名为interface1的接口")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("interface1")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// foo1: 传入分别为string和number的两个数据，返回值类型为string值")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("foo1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// foo2: 传入分别为string和Callback(上文定义)的两个数据，返回值类型为bool值")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("foo2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" d"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Callback"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[n("strong",[t._v("实现接口（定义类）")])]),t._v(" "),n("p",[t._v("范式：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" implaments "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("接口名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实现接口中的属性")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("属性名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实现接口中的方法")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("方法名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("返回值"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实现一个名称为Clazz，实现上文定义的interface1接口")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clazz")]),t._v(" implaments interface1 "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实现interface1定义的foo1方法，输入值和输出值要满足定义")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("foo1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello '")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" a "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("' : '")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("b "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实现interface1定义的foo2方法，输入值和输出值要满足定义")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("foo2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'balabala...'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[n("strong",[t._v("复合类型的定义范式")])]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类型名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类型定义"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("不同的复合类型，类型定义也不相同，下面会对三种复合类型做详细说明。")]),t._v(" "),n("p",[n("strong",[t._v("Function 类型定义")])]),t._v(" "),n("p",[t._v("范式:")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("    type "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Function类型名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("传入参数"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("返回类型"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义一个传参分别为number,string,bool类型的三个参数，返回值为number的函数类型")]),t._v("\ntype "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("Callback")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("a"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" boolean")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("strong",[t._v("Object 类型定义")])]),t._v(" "),n("p",[t._v("范式：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Object类型名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("属性名称"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("属性名称"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义含有a,b,c三个属性的复合类型")]),t._v("\ntype Scheme "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  a"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  b"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" boolean"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  c"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("strong",[t._v("Array 类型定义")])]),t._v(" "),n("p",[t._v("范式：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Array类型名称"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("类型"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("举例：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义名称为arrayType1的数组类型，数组元素为number类型")]),t._v("\ntype arrayType1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("strong",[t._v("复合类型中的相互嵌套")])]),t._v(" "),n("p",[t._v("Function、Object、Array 三种复合类型可以互相嵌套：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义一个传参分别为number,string,bool类型的三个参数，返回值为number的函数类型")]),t._v("\ntype "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("Callback")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("a"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" boolean")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义名称为arrayType1的数组类型，数组元素为number类型")]),t._v("\ntype arrayType1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("number"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义名称为Scheme的，含有Array类型和Function类型属性的Object类型")]),t._v("\ntype Scheme "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  a"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" arrayType1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  b"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Callback"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义名称为Plan，含有Scheme类型和Callback的属性的Object类型")]),t._v("\ntype Plan "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  a"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  b"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Scheme"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  c"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Callback"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义名称为arrayType1类型，元素为Plan类型")]),t._v("\ntype arrayType1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Plan"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("strong",[t._v("Promise 类型的定义")])]),t._v(" "),n("p",[t._v("对于 async 函数，由于该函数调用之后的返回值是 Promise 对象，所以这样的函数的返回值要声明成 Promise;")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("appEntry")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("appEntry2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("在 methods 中")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("appEntry")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("num")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("appEntry2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resolve"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[n("strong",[t._v("Date 类型的定义")])]),t._v(" "),n("p",[t._v("如果函数参数或者返回值是 Date 数据类型，那么可以按照下面的方式进行定义；")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("d"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Date"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Date"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Date")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[n("strong",[t._v("RegExp 类型的定义")])]),t._v(" "),n("p",[t._v("如果函数参数或者返回值是 RegExp 数据类型，那么可以按照下面的方式进行定义；")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("d"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" RegExp"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" RegExp"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EntryInterface")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleDate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("r")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RegExp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h4",{attrs:{id:"模板规范校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#模板规范校验"}},[t._v("#")]),t._v(" 模板规范校验")]),t._v(" "),n("p",[t._v("该文档汇集模板校验支持所有检查点，附录有模板格式规范")]),t._v(" "),n("h5",{attrs:{id:"模板语言校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#模板语言校验"}},[t._v("#")]),t._v(" 模板语言校验")]),t._v(" "),n("p",[t._v('模板可以指定模板语言，指定方式为在 template 标签上指定 lang 属性， 其合法值为 "cml" 和 "vue"。')]),t._v(" "),n("p",[t._v("校验点:")]),t._v(" "),n("ul",[n("li",[t._v("template 可以忽略 lang 属性，此时默认值为 cml")]),t._v(" "),n("li",[t._v('template lang 属性如果指定，则必须为 "cml" 或者 "vue"')])]),t._v(" "),n("blockquote",[n("p",[t._v("报错信息：'the tag template lang attribute: \"<%= lang %>\" is not valid'.")])]),t._v(" "),n("h5",{attrs:{id:"模板-template-标签校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#模板-template-标签校验"}},[t._v("#")]),t._v(" 模板 template 标签校验")]),t._v(" "),n("p",[t._v("校验点：每个模板只能 \b 且必须有一对 template 根标签。")]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息："Each template can only have one group of template tags."')])]),t._v(" "),n("h5",{attrs:{id:"模板内-tags-校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#模板内-tags-校验"}},[t._v("#")]),t._v(" 模板内 tags 校验")]),t._v(" "),n("p",[t._v("每个模板都有一个模板语言和一个平台类型，其中模板语言由 template 的 lang 属性指定，平台类型由模板文件的文件名解析出来。\n对于多态组件平台类型可以直接从文件名解析出来， 比如 index.web.cml, index.weex.cml, index.wx.cml, index.alipay.cml, index.baidu.cml, 对应的平台类型分别为 web, weex, wx, alipay, baidu。\n对于单文件组件，由于其模板要跨三端，故模板中只能使用 CML 原生支持的内建标签。")]),t._v(" "),n("p",[t._v("校验点：")]),t._v(" "),n("ul",[n("li",[t._v("单文件组件只能使用 CML 内建标签，使用非内建标签校验不通过。\n"),n("ul",[n("li",[t._v("CML 内建标签有: ['template', 'view', 'text', 'block', 'scroller', 'list', 'cell', 'image', 'switch', 'video', 'input', 'button', 'radio', 'checkbox', 'page', 'router-view', 'slot']")])])]),t._v(" "),n("li",[n("strong",[n("code",[t._v("src/app/app.cml")]),t._v(" 项目启动文件中可以使用"),n("code",[t._v("app")]),t._v("组件，且只有"),n("code",[t._v("store")]),t._v("和"),n("code",[t._v("router-config")]),t._v("属性")])]),t._v(" "),n("li",[t._v("多态组件可以使用 CML 内建标签，\b 加上各平台类型所支持的原生标签，使用其他标签验证不同过。在使用平台类型支持的原生标签时，必须使用 'origin-' \b 为前缀。比如: 在 wx 平台下使用 swiper 标签，那么在模板里的写法是 'origin-swiper'. 各个平台类型支持的原生标签列举如下:\n"),n("ul",[n("li",[t._v("web 平台原生支持标签: ['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'command', 'datalist', 'dd', 'del', 'details', 'dir', 'div', 'dfn', 'dialog', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'style', 'slot', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']")]),t._v(" "),n("li",[t._v("weex 平台原生支持标签: ['a', 'div', 'image', 'indicator', 'input', 'list', 'cell', 'recycle-list', 'loading', 'refresh', 'scroller', 'slider', 'textarea', 'text', 'richtext', 'video', 'waterfall', 'web']")]),t._v(" "),n("li",[t._v("wx 平台原生支持标签: ['template', 'view', 'block', 'scroll-view', 'swiper', 'movable-view', 'movable-area', 'cover-view', 'cover-image', 'icon', 'text', 'rich-text', 'progress', 'lable', 'input', 'form', 'checkbox', 'picker', 'picker-view', 'radio', 'switch', 'slider', 'textarea', 'navigator', 'functional-page-navigator', 'camera', 'live-player', 'live-pusher', 'map', 'open-data', 'web-view', 'ad', 'official-account', 'slot']")]),t._v(" "),n("li",[t._v("alipay 平台原生支持标签: ['view', 'swiper', 'scroll-view', 'cover-view', 'movable-view', 'text', 'icon', 'progress', 'rich-text', 'button', 'form', 'label', 'input', 'textarea', 'radio', 'checkbox', 'switch', 'slider', 'picker-view', 'picker', 'navigator', 'image', 'canvas', 'map', 'webview']")]),t._v(" "),n("li",[t._v("baidu 平台原生支持标签: ['view', 'scroll-view', 'swiper', 'movable-area', 'cover-view', 'cover-image', 'icon', 'text', 'rich-text', 'progress', 'animation-view', 'button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea', 'navigator', 'audio', 'image', 'video', 'camera', 'ar-camera', 'live-player', 'map', 'canvas', 'open-data', 'web-view']")])])])]),t._v(" "),n("blockquote",[n("p",[t._v("报错信息：'tag: \"<%= tag %>\" is either not allowed in this template or not referenced as a component'")])]),t._v(" "),n("h5",{attrs:{id:"模板指令校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#模板指令校验"}},[t._v("#")]),t._v(" 模板指令校验")]),t._v(" "),n("p",[t._v("除引入的 \b 平台原生组件对应的标签和'origin-'为前缀的原生标签，每个模板只能够使用 template lang 指定 \b\b 模板语言对应的指令。Chameleon \b 现只提供两种模板语言 'vue' 和 'cml'。其对应的指令列举如下:")]),t._v(" "),n("ul",[n("li",[t._v("lang='cml' 支持的指令：['c-if', 'c-else', 'c-else-if', 'c-for', 'c-for-index', 'c-for-item', 'c-model', 'c-text', 'c-show', 'c-bind', 'c-catch', 'c-key']")]),t._v(" "),n("li",[t._v("lang='vue' 支持的指令：['v-if', 'v-else', 'v-else-if', 'v-for', 'v-on', 'v-bind', 'v-html', 'v-show', 'v-model', 'v-pre', 'v-once', 'slot-scope', 'is', '@', ':']")])]),t._v(" "),n("p",[t._v("校验点：")]),t._v(" "),n("ul",[n("li",[n("p",[t._v("单文件模板只能使用模板语言对应的指令，使用模板语言指令之外的指令校验不通过")])]),t._v(" "),n("li",[n("p",[t._v("多态组件各平台文件中以 \b 'origin-' 为前缀的平台类型原生标签上必须使"),n("strong",[t._v("平台原生指令")]),t._v("，不能使用 \bChameleon 内置指令，使用此外其他指令校验不通过。各平台支持原生指令列举如下:")]),t._v(" "),n("ul",[n("li",[t._v("web 平台支持指令: ['v-if', 'v-else', 'v-else-if', 'v-for', 'v-on', 'v-bind', 'v-html', 'v-show', 'v-model', 'v-pre', 'v-once', 'slot-scope', 'is', '@', ':']")]),t._v(" "),n("li",[t._v("weex 平台支持指令同 vue.js 框架: ['v-if', 'v-else', 'v-else-if', 'v-for', 'v-on', 'v-bind', 'v-html', 'v-show', 'v-model', 'v-pre', 'v-once', 'slot-scope', 'is', '@', ':']")]),t._v(" "),n("li",[t._v("wx 平台支持指令：['wx:if', 'wx:elif', 'wx:else', 'wx:for', 'wx:for-item', 'wx:for-index', 'wx:key', 'bindtap', 'catchtap']")])])]),t._v(" "),n("li",[n("p",[t._v("\b 多态组件通过 usingComponents 配置引入的 \b 第三方 \b 平台原生组件，组件对应的标签上只能够使用"),n("strong",[t._v("平台原生指令")]),t._v("，不能使用 \bChameleon 内置指令，使用此外其他指令校验不通过。")])])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息：\'directive "<%= attribute %>" is not allowed to be used in this template, as the template language is set to "<%= lang %>"\'')])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息：\'tag "<%= name %>" is prefixed with "origin-" directive, so it\'s not allowed to use a CML built-in directive:"<%= directive %>"\'')])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息：\'tag "<%= name %>" is a third party imported component, so it\'s not allowed to use a CML built-in directive:"<%= directive %>"\'')])]),t._v(" "),n("h5",{attrs:{id:"组件属性和事件名称校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#组件属性和事件名称校验"}},[t._v("#")]),t._v(" 组件属性和事件名称校验")]),t._v(" "),n("p",[t._v("在使用组件的时，会对使用过程中属性名和绑定的事件名称进行校验。组件属性校验分为内建组件与自定义组件两部分。")]),t._v(" "),n("p",[t._v("校验点：")]),t._v(" "),n("ul",[n("li",[t._v("内建组件:使用的属性名和绑定事件必须在组件内有定义否则校验不通过 - CML 内建组件有：['template', 'view', 'text', 'block', 'scroller', 'list', 'cell', 'image', 'switch', 'video', 'input', 'textarea', 'richtext', 'button', 'radio', 'checkbox', 'page', 'router-view', 'slot', 'aside', 'col', 'container', 'foot', 'head', 'main', 'row']\n"),n("blockquote",[n("p",[t._v('报错信息：\'component "<%= name %>" doesn\'t have a defined property named "<%= prop %>"\'')])])])]),t._v(" "),n("blockquote",[n("p",[t._v('\b 报错信息：\'component "<%= name %>" doesn\'t have a defined event named "<%= prop %>"\'')])]),t._v(" "),n("ul",[n("li",[t._v("自定义组件:模板校验时和根据 usingComponents 配置解析对应组件，使用组件时属性名和事件名必须在组件内有定义否则校验不通过。")])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息：\n"The property "propName" is not a property of component "compName" which path is: path/to/component"')])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息：\n"The event "eventName" is not defined in component "compName" which path is: path/to/component"')])]),t._v(" "),n("h5",{attrs:{id:"内置组件嵌套规则校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#内置组件嵌套规则校验"}},[t._v("#")]),t._v(" 内置组件嵌套规则校验")]),t._v(" "),n("p",[t._v("在使用 CML 内置组件时，内置组件之间需要遵循一定的嵌套关系。")]),t._v(" "),n("p",[t._v("校验点：")]),t._v(" "),n("ul",[n("li",[t._v("text 组件\n"),n("ul",[n("li",[t._v("text 组件只能包含 text 组件作为子节点")])])]),t._v(" "),n("li",[t._v("scroller 组件\n"),n("ul",[n("li",[t._v("scroller 组件不能包含 textarea 或者 video 组件")])])]),t._v(" "),n("li",[t._v("list\n"),n("ul",[n("li",[t._v("list 组件不能包含 textarea 或者 video 组件")])])]),t._v(" "),n("li",[t._v("video\n"),n("ul",[n("li",[t._v("video 组件如果包含子组件，那么只能是 text 组件")])])])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息\n\'tag "<%= parent %>" can not have any child elements, therefor tag "<%= forbiddenTag %>" is not allowed as it\'s children\'')])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息\n\'tag "<%= parent %>" can only have "<%= elements %>" as it\'s child elements, therefor tag "<%= forbiddenTag %>" is not allowed as it\'s children\'')])]),t._v(" "),n("blockquote",[n("p",[t._v('报错信息\n\'tag "<%= parent %>" can not have "<%= forbiddenTag %>" as it\'s child elements, and element in this list: "<%= elements %>" is forbidden as well\'')])]),t._v(" "),n("h5",{attrs:{id:"附：模板格式规范"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#附：模板格式规范"}},[t._v("#")]),t._v(" 附：模板格式规范")]),t._v(" "),n("p",[n("strong",[t._v("模板书写规范")])]),t._v(" "),n("p",[t._v("chameleon 模板书写规范尊从 HTML5 基本规范。")]),t._v(" "),n("p",[n("strong",[t._v("模板目录规范")])]),t._v(" "),n("p",[t._v("CML 支持三端(三种 Native 环境)，每个组件在每个环境对应有一个模板。模板命名格式 "),n("code",[t._v("组件名称+端名称.cml")]),t._v(" 比如：c-title 组件")]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[t._v("├── components\n│   ├── c-title\n│   │   ├── c-title.web.cml\n│   │   ├── c-title.weex.cml\n│   │   └── c-title.wx.cml\n")])])]),n("p",[t._v("其中： c-title.web.cml 为 Web 端模板，c-title.weex.cml 为 iOS、Android 端，c-title.wx.cml 为微信小程序端。")]),t._v(" "),n("p",[t._v("本节模板规范就是指对这三个模板文件的编写规范。")]),t._v(" "),n("p",[n("strong",[t._v("模板语言指定")])]),t._v(" "),n("p",[t._v('每个端的模板都可以并且必须选择两种语法规范中的一个，cml 语法规范 或者 类 vue 语法规范。指定语法规范的方式为在根节点 template 标签上给属性 lang 指定 "cml" 或者 "vue"。')]),t._v(" "),n("p",[t._v("列如指定模板为 cml 语法规范")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("blockquote",[n("p",[t._v("注意：每个模板只能够有一个根节点并且必须为 template 标签，template 便签每个模板只能有一个。")])]),t._v(" "),n("p",[n("strong",[t._v("模板标签使用规范")])]),t._v(" "),n("p",[t._v("每个模板内可以使用的标签由三部分组成：")]),t._v(" "),n("ol",[n("li",[n("p",[t._v("CML 的内置组件对应的标签")]),t._v(" "),n("ul",[n("li",[t._v("chamelon 支持的标签有: template、view、text、block、scroller、list、cell、image、switch、video、input、textarea、richtext、button、radio、checkbox、page、router-view、slot、aside、col、container、foot、head、main、row")])])]),t._v(" "),n("li",[n("p",[t._v("多态组件中在平台文件里，\b 以 'origin-' \b 为 \b 前缀的平台原生组件对应的 \b 标签。")])]),t._v(" "),n("li",[n("p",[t._v("\b 模板文件中通过 usingComponents 引入的组件对应的 \b 标签。")])])]),t._v(" "),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("p",[t._v("仍以 c-title 组件为例，假设各个模板都有自定义组件配置")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"tickets"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/ticket/index"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("ul",[n("li",[t._v("c-title.web.cml\n"),n("ul",[n("li",[t._v("可以使用 CML 支持的 view、text、block 等基本标签，带 'origin-' \b 前缀的 web 原生标签 origin-div、origin-p、origin-span 等,以及自定义组件 tickets。")])])]),t._v(" "),n("li",[t._v("c-title.weex.cml\n"),n("ul",[n("li",[t._v("可以使用 CML 支持的 view、text、block 等基本标签，Weex 支持的标签，以及自定义组件 tickets。如果以 Vue 作为 Weex 使用的前端框架，那么 Weex 支持的标签基本和 vue 框架支持的标签基本一致，其中有部分不支持的标签比如：transition 标签，具体请参见"),n("a",{attrs:{href:"https://weex.apache.org/cn/guide/",target:"_blank",rel:"noopener noreferrer"}},[t._v("weex 文档"),n("OutboundLink")],1),t._v("。")])])]),t._v(" "),n("li",[t._v("c-title.wx.cml\n"),n("ul",[n("li",[t._v("可以使用 CML 支持的 view、text、block 等基本标签，带 'origin-' 前缀的 wx 原生标签比如 origin-swiper、origin-movable-area、origin-cover-view、origin-web-view 等,以及自定义组件 tickets。")])])])]),t._v(" "),n("p",[n("strong",[t._v("模板指令使用规范")])]),t._v(" "),n("p",[t._v("除引用平台原生组件 \b 对应的标签外，每个模板必须使用模板 \b 语言(由 template 标签 \b 的 lang 属性指定) 所对应的指令集。")]),t._v(" "),n("ul",[n("li",[t._v("模板语言为 cml 时支持的指令有：c-if、c-else、c-else-if、c-for、c-for-index、c-for-item、c-model、c-text、c-show、c-bind、c-catch")]),t._v(" "),n("li",[t._v("模板语言为类 vue 时支持的指令有：v-if、v-else、v-else-if、v-for、v-on、v-bind、v-html、v-show、v-model、v-pre、v-once、slot-scope、is、@、:")])]),t._v(" "),n("blockquote",[n("p",[t._v("类 vue 语法支持上述列表中的指令，其他 vue.js 的指令如 v-cloak 是不支持的。")])]),t._v(" "),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("p",[t._v('若模板语言为 "cml" 即 template 标签 lang 属性为 "cml"，native 环境为微信小程序。还是以 c-title 组件为例，那么此时对应的是 c-title.wx.cml 模板。\nc-title.wx.cml:')]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-if")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showMessage}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{messageText}}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("picker-view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("picker-view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("那么模板里可以使用 CML 支持的指令:")]),t._v(" "),n("p",[t._v("c-if、c-else、c-else-if、c-for、c-for-index、c-for-item、c-model、c-text、c-show、c-bind、c-catch")]),t._v(" "),n("p",[n("strong",[t._v("引用平台原生组件")])]),t._v(" "),n("p",[t._v("Chameleon 提供两种方式引入平台原生 \b\b\b 组件和平台第三方原生组件：")]),t._v(" "),n("ul",[n("li",[t._v("通过给平台 \b\b 原生内置组件添加 'origin-' 前缀引用原生组件")]),t._v(" "),n("li",[t._v("通过 usingComponents 引入平台原生第三方组件")])]),t._v(" "),n("blockquote",[n("p",[t._v("\b 引用的原生组件上只能够使用平台支持的原生指令，不能使用 CML 内置指令。\b 改限制只限于组件本身，对其子组件没有影响。")])]),t._v(" "),n("p",[n("strong",[t._v("举例")])]),t._v(" "),n("p",[t._v('若模板语言为 "cml" 即 template 标签 lang 属性为 "cml"，native 环境为微信小程序。还是以 c-title 组件为例，那么此时对应的是 c-title.wx.cml 模板。\nc-title.wx.cml:')]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{messageText}}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("origin-picker-view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("origin-picker-view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("那么模板里可以使用 CML 支持的指令:")]),t._v(" "),n("p",[t._v("c-if、c-else、c-else-if、c-for、c-for-index、c-for-item、c-model、c-text、c-show、c-bind、c-catch")]),t._v(" "),n("p",[t._v("origin-picker-view 组件可以使用微信小程序原生支持的指令:")]),t._v(" "),n("p",[t._v("wx:if、wx:elif、wx:else、wx:for、wx:for-item、wx:for-index、wx:key、bindtap、catchtap")]),t._v(" "),n("h4",{attrs:{id:"脚本规范校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#脚本规范校验"}},[t._v("#")]),t._v(" 脚本规范校验")]),t._v(" "),n("ul",[n("li",[t._v("编写一端代码逻辑时，如果使用其他端的全局变量，会校验失败。")]),t._v(" "),n("li",[t._v("使用未定义的 event 名称时，会报错")]),t._v(" "),n("li",[t._v("使用未定义的 prop 名称时，会报错")])]),t._v(" "),n("p",[t._v("组件逻辑层响应页面操作的代码，需要导出以下规范的对象。")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数据")]),t._v("\n  data"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    dataKey1"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dataValue1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    dataKey2"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dataValue2\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 属性")]),t._v("\n  props"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    propKey1"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" propValue1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    propKey2"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" propValue2\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算属性")]),t._v("\n  computed"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("computedKey1")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("computedKey2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 监听属性")]),t._v("\n  watch"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("watchKey1")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("watchKey2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实例初始化之后，数据和方法挂在到实例之前")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("beforeCreate")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数据及方法挂载完成")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("created")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开始挂载已经编译完成的html,到对应的dom节点时")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("beforeMount")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 模板或者html编译完成,且渲染到dom中完成")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("mounted")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实例销毁之前")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("beforeDestroy")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实例销毁后")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("destroyed")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h5",{attrs:{id:"生命周期"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#生命周期"}},[t._v("#")]),t._v(" 生命周期")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",{staticStyle:{"text-align":"center"}},[t._v("钩子")]),t._v(" "),n("th",{staticStyle:{"text-align":"center"}},[t._v("执行时机")]),t._v(" "),n("th",{staticStyle:{"text-align":"center"}},[t._v("详细")])])]),t._v(" "),n("tbody",[n("tr",[n("td",{staticStyle:{"text-align":"center"}},[t._v("beforeCreate")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}},[t._v("实例初始化之后，数据和方法挂在到实例之前")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}},[t._v("在该钩子函数中会传入当前页面 query 参数")])]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"center"}},[t._v("created")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}},[t._v("数据及方法挂载完成")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}})]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"center"}},[t._v("beforeMount")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}},[t._v("开始挂载已经编译完成的 html,到对应的 dom 节点时")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}})]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"center"}},[t._v("mounted")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}},[t._v("模板或者 html 编译完成,且渲染到 dom 中完成")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}})]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"center"}},[t._v("beforeDestroy")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}},[t._v("实例销毁之前")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}})]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"center"}},[t._v("destroyed")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}},[t._v("实例销毁后")]),t._v(" "),n("td",{staticStyle:{"text-align":"center"}})])])]),t._v(" "),n("h5",{attrs:{id:"全局变量校验-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#全局变量校验-2"}},[t._v("#")]),t._v(" 全局变量校验")]),t._v(" "),n("p",[t._v("编写一端代码逻辑时，如果使用其他端的全局变量，会校验失败。")]),t._v(" "),n("p",[t._v("按照端类型区分可用的全局变量：")]),t._v(" "),n("p",[n("strong",[t._v("weex")])]),t._v(" "),n("p",[n("code",[t._v("weex")]),t._v(" , "),n("code",[t._v("global")])]),t._v(" "),n("p",[n("strong",[t._v("wx")])]),t._v(" "),n("p",[n("code",[t._v("wx")]),t._v(", "),n("code",[t._v("global")])]),t._v(" "),n("p",[n("strong",[t._v("alipay")])]),t._v(" "),n("p",[n("code",[t._v("my")]),t._v(", "),n("code",[t._v("global")])]),t._v(" "),n("p",[n("strong",[t._v("baidu")])]),t._v(" "),n("p",[n("code",[t._v("swan")]),t._v(", "),n("code",[t._v("global")])]),t._v(" "),n("p",[n("strong",[t._v("web")])]),t._v(" "),n("p",[n("code",[t._v("postMessage")]),t._v(", "),n("code",[t._v("blur")]),t._v(", "),n("code",[t._v("focus")]),t._v(", "),n("code",[t._v("close")]),t._v(", "),n("code",[t._v("frames")]),t._v(", "),n("code",[t._v("self")]),t._v(", "),n("code",[t._v("window")]),t._v(", "),n("code",[t._v("parent")]),t._v(", "),n("code",[t._v("opener")]),t._v(", "),n("code",[t._v("top")]),t._v(", "),n("code",[t._v("length")]),t._v(", "),n("code",[t._v("closed")]),t._v(", "),n("code",[t._v("location")]),t._v(", "),n("code",[t._v("document")]),t._v(", "),n("code",[t._v("origin")]),t._v(", "),n("code",[t._v("name")]),t._v(", "),n("code",[t._v("history")]),t._v(", "),n("code",[t._v("locationbar")]),t._v(", "),n("code",[t._v("menubar")]),t._v(", "),n("code",[t._v("personalbar")]),t._v(", "),n("code",[t._v("scrollbars")]),t._v(", "),n("code",[t._v("statusbar")]),t._v(", "),n("code",[t._v("toolbar")]),t._v(", "),n("code",[t._v("status")]),t._v(", "),n("code",[t._v("frameElement")]),t._v(", "),n("code",[t._v("navigator")]),t._v(", "),n("code",[t._v("customElements")]),t._v(", "),n("code",[t._v("external")]),t._v(", "),n("code",[t._v("screen")]),t._v(", "),n("code",[t._v("innerWidth")]),t._v(", "),n("code",[t._v("innerHeight")]),t._v(", "),n("code",[t._v("scrollX")]),t._v(", "),n("code",[t._v("pageXOffset")]),t._v(", "),n("code",[t._v("scrollY")]),t._v(", "),n("code",[t._v("pageYOffset")]),t._v(", "),n("code",[t._v("screenX")]),t._v(", "),n("code",[t._v("screenY")]),t._v(", "),n("code",[t._v("outerWidth")]),t._v(", "),n("code",[t._v("outerHeight")]),t._v(", "),n("code",[t._v("devicePixelRatio")]),t._v(", "),n("code",[t._v("clientInformation")]),t._v(", "),n("code",[t._v("screenLeft")]),t._v(", "),n("code",[t._v("screenTop")]),t._v(", "),n("code",[t._v("defaultStatus")]),t._v(", "),n("code",[t._v("defaultstatus")]),t._v(", "),n("code",[t._v("styleMedia")]),t._v(", "),n("code",[t._v("onanimationend")]),t._v(", "),n("code",[t._v("onanimationiteration")]),t._v(", "),n("code",[t._v("onanimationstart")]),t._v(", "),n("code",[t._v("onsearch")]),t._v(", "),n("code",[t._v("ontransitionend")]),t._v(", "),n("code",[t._v("onwebkitanimationend")]),t._v(", "),n("code",[t._v("onwebkitanimationiteration")]),t._v(", "),n("code",[t._v("onwebkitanimationstart")]),t._v(", "),n("code",[t._v("onwebkittransitionend")]),t._v(", "),n("code",[t._v("isSecureContext")]),t._v(", "),n("code",[t._v("onabort")]),t._v(", "),n("code",[t._v("onblur")]),t._v(", "),n("code",[t._v("oncancel")]),t._v(", "),n("code",[t._v("oncanplay")]),t._v(", "),n("code",[t._v("oncanplaythrough")]),t._v(", "),n("code",[t._v("onchange")]),t._v(", "),n("code",[t._v("onclick")]),t._v(", "),n("code",[t._v("onclose")]),t._v(", "),n("code",[t._v("oncontextmenu")]),t._v(", "),n("code",[t._v("oncuechange")]),t._v(", "),n("code",[t._v("ondblclick")]),t._v(", "),n("code",[t._v("ondrag")]),t._v(", "),n("code",[t._v("ondragend")]),t._v(", "),n("code",[t._v("ondragenter")]),t._v(", "),n("code",[t._v("ondragleave")]),t._v(", "),n("code",[t._v("ondragover")]),t._v(", "),n("code",[t._v("ondragstart")]),t._v(", "),n("code",[t._v("ondrop")]),t._v(", "),n("code",[t._v("ondurationchange")]),t._v(", "),n("code",[t._v("onemptied")]),t._v(", "),n("code",[t._v("onended")]),t._v(", "),n("code",[t._v("onerror")]),t._v(", "),n("code",[t._v("onfocus")]),t._v(", "),n("code",[t._v("oninput")]),t._v(", "),n("code",[t._v("oninvalid")]),t._v(", "),n("code",[t._v("onkeydown")]),t._v(", "),n("code",[t._v("onkeypress")]),t._v(", "),n("code",[t._v("onkeyup")]),t._v(", "),n("code",[t._v("onload")]),t._v(", "),n("code",[t._v("onloadeddata")]),t._v(", "),n("code",[t._v("onloadedmetadata")]),t._v(", "),n("code",[t._v("onloadstart")]),t._v(", "),n("code",[t._v("onmousedown")]),t._v(", "),n("code",[t._v("onmouseenter")]),t._v(", "),n("code",[t._v("onmouseleave")]),t._v(", "),n("code",[t._v("onmousemove")]),t._v(", "),n("code",[t._v("onmouseout")]),t._v(", "),n("code",[t._v("onmouseover")]),t._v(", "),n("code",[t._v("onmouseup")]),t._v(", "),n("code",[t._v("onmousewheel")]),t._v(", "),n("code",[t._v("onpause")]),t._v(", "),n("code",[t._v("onplay")]),t._v(", "),n("code",[t._v("onplaying")]),t._v(", "),n("code",[t._v("onprogress")]),t._v(", "),n("code",[t._v("onratechange")]),t._v(", "),n("code",[t._v("onreset")]),t._v(", "),n("code",[t._v("onresize")]),t._v(", "),n("code",[t._v("onscroll")]),t._v(", "),n("code",[t._v("onseeked")]),t._v(", "),n("code",[t._v("onseeking")]),t._v(", "),n("code",[t._v("onselect")]),t._v(", "),n("code",[t._v("onstalled")]),t._v(", "),n("code",[t._v("onsubmit")]),t._v(", "),n("code",[t._v("onsuspend")]),t._v(", "),n("code",[t._v("ontimeupdate")]),t._v(", "),n("code",[t._v("ontoggle")]),t._v(", "),n("code",[t._v("onvolumechange")]),t._v(", "),n("code",[t._v("onwaiting")]),t._v(", "),n("code",[t._v("onwheel")]),t._v(", "),n("code",[t._v("onauxclick")]),t._v(", "),n("code",[t._v("ongotpointercapture")]),t._v(", "),n("code",[t._v("onlostpointercapture")]),t._v(", "),n("code",[t._v("onpointerdown")]),t._v(", "),n("code",[t._v("onpointermove")]),t._v(", "),n("code",[t._v("onpointerup")]),t._v(", "),n("code",[t._v("onpointercancel")]),t._v(", "),n("code",[t._v("onpointerover")]),t._v(", "),n("code",[t._v("onpointerout")]),t._v(", "),n("code",[t._v("onpointerenter")]),t._v(", "),n("code",[t._v("onpointerleave")]),t._v(", "),n("code",[t._v("onafterprint")]),t._v(", "),n("code",[t._v("onbeforeprint")]),t._v(", "),n("code",[t._v("onbeforeunload")]),t._v(", "),n("code",[t._v("onhashchange")]),t._v(", "),n("code",[t._v("onlanguagechange")]),t._v(", "),n("code",[t._v("onmessage")]),t._v(", "),n("code",[t._v("onmessageerror")]),t._v(", "),n("code",[t._v("onoffline")]),t._v(", "),n("code",[t._v("ononline")]),t._v(", "),n("code",[t._v("onpagehide")]),t._v(", "),n("code",[t._v("onpageshow")]),t._v(", "),n("code",[t._v("onpopstate")]),t._v(", "),n("code",[t._v("onrejectionhandled")]),t._v(", "),n("code",[t._v("onstorage")]),t._v(", "),n("code",[t._v("onunhandledrejection")]),t._v(", "),n("code",[t._v("onunload")]),t._v(", "),n("code",[t._v("performance")]),t._v(", "),n("code",[t._v("stop")]),t._v(", "),n("code",[t._v("open")]),t._v(", "),n("code",[t._v("alert")]),t._v(", "),n("code",[t._v("confirm")]),t._v(", "),n("code",[t._v("prompt")]),t._v(", "),n("code",[t._v("print")]),t._v(", "),n("code",[t._v("requestAnimationFrame")]),t._v(", "),n("code",[t._v("cancelAnimationFrame")]),t._v(", "),n("code",[t._v("requestIdleCallback")]),t._v(", "),n("code",[t._v("cancelIdleCallback")]),t._v(", "),n("code",[t._v("captureEvents")]),t._v(", "),n("code",[t._v("releaseEvents")]),t._v(", "),n("code",[t._v("getComputedStyle")]),t._v(", "),n("code",[t._v("matchMedia")]),t._v(", "),n("code",[t._v("moveTo")]),t._v(", "),n("code",[t._v("moveBy")]),t._v(", "),n("code",[t._v("resizeTo")]),t._v(", "),n("code",[t._v("resizeBy")]),t._v(", "),n("code",[t._v("getSelection")]),t._v(", "),n("code",[t._v("find")]),t._v(", "),n("code",[t._v("webkitRequestAnimationFrame")]),t._v(", "),n("code",[t._v("webkitCancelAnimationFrame")]),t._v(", "),n("code",[t._v("fetch")]),t._v(", "),n("code",[t._v("btoa")]),t._v(", "),n("code",[t._v("atob")]),t._v(", "),n("code",[t._v("createImageBitmap")]),t._v(", "),n("code",[t._v("scroll")]),t._v(", "),n("code",[t._v("scrollTo")]),t._v(", "),n("code",[t._v("scrollBy")]),t._v(", "),n("code",[t._v("onappinstalled")]),t._v(", "),n("code",[t._v("onbeforeinstallprompt")]),t._v(", "),n("code",[t._v("crypto")]),t._v(", "),n("code",[t._v("ondevicemotion")]),t._v(", "),n("code",[t._v("ondeviceorientation")]),t._v(", "),n("code",[t._v("ondeviceorientationabsolute")]),t._v(", "),n("code",[t._v("indexedDB")]),t._v(", "),n("code",[t._v("webkitStorageInfo")]),t._v(", "),n("code",[t._v("sessionStorage")]),t._v(", "),n("code",[t._v("localStorage")]),t._v(", "),n("code",[t._v("chrome")]),t._v(", "),n("code",[t._v("visualViewport")]),t._v(", "),n("code",[t._v("speechSynthesis")]),t._v(", "),n("code",[t._v("webkitRequestFileSystem")]),t._v(", "),n("code",[t._v("webkitResolveLocalFileSystemURL")]),t._v(", "),n("code",[t._v("openDatabase")]),t._v(", "),n("code",[t._v("applicationCache")]),t._v(", "),n("code",[t._v("caches")]),t._v(", "),n("code",[t._v("whichAnimationEvent")]),t._v(", "),n("code",[t._v("animationendEvent")]),t._v(", "),n("code",[t._v("infinity")]),t._v(", "),n("code",[t._v("SETTING")]),t._v(", "),n("code",[t._v("AppView")]),t._v(", "),n("code",[t._v("ExtensionOptions")]),t._v(", "),n("code",[t._v("ExtensionView")]),t._v(", "),n("code",[t._v("WebView")]),t._v(", "),n("code",[t._v("iconPath")]),t._v(", "),n("code",[t._v("_app")]),t._v(", "),n("code",[t._v("_ZOOM_")]),t._v(", "),n("code",[t._v("Feed")]),t._v(", "),n("code",[t._v("md5")]),t._v(", "),n("code",[t._v("$")]),t._v(", "),n("code",[t._v("jQuery")]),t._v(", "),n("code",[t._v("Search")]),t._v(", "),n("code",[t._v("windmill")]),t._v(", "),n("code",[t._v("Lethargy")]),t._v(", "),n("code",[t._v("alertTimeOut")]),t._v(", "),n("code",[t._v("supportApps")]),t._v(", "),n("code",[t._v("lethargyX")]),t._v(", "),n("code",[t._v("lethargyY")]),t._v(", "),n("code",[t._v("iView")]),t._v(", "),n("code",[t._v("onModuleResLoaded")]),t._v(", "),n("code",[t._v("iEditDelete")]),t._v(", "),n("code",[t._v("infinityDrag")]),t._v(", "),n("code",[t._v("i")]),t._v(", "),n("code",[t._v("array")]),t._v(", "),n("code",[t._v("TEMPORARY")]),t._v(", "),n("code",[t._v("PERSISTENT")]),t._v(", "),n("code",[t._v("addEventListener")]),t._v(", "),n("code",[t._v("removeEventListener")]),t._v(", "),n("code",[t._v("dispatchEvent")])]),t._v(" "),n("h4",{attrs:{id:"样式规范校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#样式规范校验"}},[t._v("#")]),t._v(" 样式规范校验")]),t._v(" "),n("ul",[n("li",[t._v("满足 css 规则")]),t._v(" "),n("li",[t._v("不支持级联")])]),t._v(" "),n("h5",{attrs:{id:"cmss-规则"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cmss-规则"}},[t._v("#")]),t._v(" CMSS 规则")]),t._v(" "),n("p",[t._v("CMSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。")]),t._v(" "),n("p",[t._v("selector {\ndeclaration1;\ndeclaration2;\n...\ndeclarationN\n}\n每条声明由一个属性和一个值组成。")]),t._v(" "),n("h5",{attrs:{id:"声明"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#声明"}},[t._v("#")]),t._v(" 声明")]),t._v(" "),n("p",[t._v("属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开，一条声明以分号结尾。")]),t._v(" "),n("div",{staticClass:"language-css extra-class"},[n("pre",{pre:!0,attrs:{class:"language-css"}},[n("code",[n("span",{pre:!0,attrs:{class:"token selector"}},[t._v("selector")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("selector 应为一条独立的 id 名称或者 class 名称，不支持级联")]),t._v(" "),n("div",{staticClass:"language-css extra-class"},[n("pre",{pre:!0,attrs:{class:"language-css"}},[n("code",[n("span",{pre:!0,attrs:{class:"token selector"}},[t._v("// 正确\n.selector")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#selector")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token selector"}},[t._v("// 错误\n#selector1 .selector")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("property2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h5",{attrs:{id:"多端之间的差异对比"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#多端之间的差异对比"}},[t._v("#")]),t._v(" 多端之间的差异对比")]),t._v(" "),n("table",[n("tr",[n("th",{attrs:{width:"200px"}},[t._v("CSS属性")]),t._v(" "),n("th",[t._v("H5")]),t._v(" "),n("th",{attrs:{width:"100px"}},[t._v("小程序")]),t._v(" "),n("th",[t._v("weex")])]),t._v(" "),n("tr",[n("td",[t._v("布局")]),t._v(" "),n("td",[t._v("all")]),t._v(" "),n("td",[t._v("all")]),t._v(" "),n("td",[t._v("flexbox")])]),t._v(" "),n("tr",[n("td",[t._v("盒模型")]),t._v(" "),n("td",[t._v("all")]),t._v(" "),n("td",[t._v("all")]),t._v(" "),n("td",[t._v("只支持display:border-box")])]),t._v(" "),n("tr",[n("td",[t._v("float浮动")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("display:inline-block|none")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("ID选择器")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("类选择器")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")])]),t._v(" "),n("tr",[n("td",[t._v("属性选择器")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("级联选择器、派生选择器(后代、子元素、相邻兄弟)")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("选择器分组")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")])]),t._v(" "),n("tr",[n("td",[t._v("伪类(:active|:focus)")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")])]),t._v(" "),n("tr",[n("td",[t._v("伪类(:hover|:link|:visited|:first-child|:lang)")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("伪元素(:first-letter|:first-line|:before|:after)")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("百分比定值")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("line-height:1")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])]),t._v(" "),n("tr",[n("td",[t._v("尺寸")]),t._v(" "),n("td",[t._v("px|rem|em|vw|vh")]),t._v(" "),n("td",[t._v("px|rpx")]),t._v(" "),n("td",[t._v("px")])]),t._v(" "),n("tr",[n("td",[t._v("!important")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("✅")]),t._v(" "),n("td",[t._v("❌")])])]),t._v(" "),n("p",[t._v("**注意:**框架会根据上表所述的多端之间的差异做校验。")]),t._v(" "),n("h4",{attrs:{id:"配置规范校验"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#配置规范校验"}},[t._v("#")]),t._v(" 配置规范校验")]),t._v(" "),n("p",[t._v("CML 文件配置规范的校验，包括语法格式，组件的引用等。")]),t._v(" "),n("ul",[n("li",[t._v("json 格式是否合法")]),t._v(" "),n("li",[t._v("usingComponents 只放置在 base 字段下")])]),t._v(" "),n("h5",{attrs:{id:"说明"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#说明"}},[t._v("#")]),t._v(" 说明")]),t._v(" "),n("p",[t._v("wx、alipay、baidu、web、weex 分别对应各端构建时所应用的配置信息，base 的配置会应用到每一端的配置，内部做的 result = merge(base,target)。")]),t._v(" "),n("p",[t._v("wx 字段配置的内容最终会生成到微信小程序所需要的 json 文件。")]),t._v(" "),n("p",[t._v("wx.component 字段,如果在微信中该 cml 文件是组件必须声明该字段。\nusingComponents 字段是目前最重要的配置，三端都会使用，微信小程序规定页面的 json 文件中配置使用到的组件。web 和 Weex 端的构建时也是根据该字段去找到相应的组件进行自动化的注册。所以用到组件必须进行配置\nusingComponents 中组件的引用地址支持引用 src 和 node_modules 下的组件，src 下的，可以写相对路径，也可以写相对于 src 的绝对路径，例如/components/**, node_modules 下的组件，不需要写 node_modules，直接从 npm 的包名称开始写例如 cml-test-ui/navi/navi。 路径写到.cml 文件所在层级，不写后缀。\n例子：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"c-scroller"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/scroller/scroller"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"c-checkbox"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/c-checkbox/c-checkbox"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#E2E2E2"')]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"alipay"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"defaultTitle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pullRefresh"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"allowsBounceVertical"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"YES"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"titleBarColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#ffffff"')]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"baidu"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarBackgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#ffffff"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"white"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#ffffff"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"enablePullDownRefresh"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"onReachBottomDistance"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("50")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n##### "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CML")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),t._v(" 规范\n\n包括以下三条：\n"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.")]),t._v(" 满足标准的 "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),t._v(" 格式规范，满足 "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("parse 的解析\n  "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" 数据在名称"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("值对中\n  "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" 数据由逗号分隔\n  "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" 花括号保存对象\n  "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" 方括号保存数组\n\n"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CML")]),t._v(" json为对象，必须包括base字段，根据适配的平台可配置wx"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("alipay"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("baidu"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("web"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("weex字段，作为单一端上的特殊配置\n\n"),n("span",{pre:!0,attrs:{class:"token template-string"}},[n("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),n("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("`javascript\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 适配微信小程序和weex")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"alipay"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"baidu"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"weex"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("ol",{attrs:{start:"3"}},[n("li",[t._v("usingComponents 使用规范:")])]),t._v(" "),n("p",[t._v("多端实现完全一致组件:")]),t._v(" "),n("p",[t._v("usingComponents 字段必须放置在 base 下，不应出现 wx|alipay|baidu|web|weex 字段中")]),t._v(" "),n("p",[t._v("多端实现不一致组件:")]),t._v(" "),n("p",[t._v("usingComponents 字段可以放置在 base 下，也可以在出现当前端对应的 wx|alipay|baidu|web|weex 字段中")]),t._v(" "),n("p",[t._v("注：多端实现完全一致组件 和 多端实现不一致组件 的说明可参见这")])])}),[],!1,null,null,null);a.default=e.exports}}]);