Skip to content

C
Chameleon

DiDi / Chameleon

通知 13
Star 1
Fork 0
C
Chameleon

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
9.dc5cb60e.js 276.5 KB
Newer Older
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
1 
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{186:function(t,a,s){t.exports=s.p+"assets/img/architecture_hierarchy.35f5f61d.png"},476:function(t,a,s){t.exports=s.p+"assets/img/yuanli.21aa152a.png"},477:function(t,a,s){t.exports=s.p+"assets/img/interface.e1ccc440.png"},478:function(t,a,s){t.exports=s.p+"assets/img/extend1.4fa52fc8.png"},479:function(t,a,s){t.exports=s.p+"assets/img/projectgraph.a52d4757.png"},480:function(t,a,s){t.exports=s.p+"assets/img/new_compiler.e0d18d8a.png"},491:function(t,a,s){"use strict";s.r(a);var e=s(17),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"定制扩展端"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#定制扩展端"}},[t._v("#")]),t._v(" 定制扩展端")]),t._v(" "),e("p",[t._v("基于 "),e("strong",[e("code",[t._v("chameleon-tool@1.0.3")])])]),t._v(" "),e("p",[t._v("新框架太多？学不动啦？有这一套跨端标准，今后再也不用学习新框架了。")]),t._v(" "),e("p",[t._v("如今前端比较流行的 React Native、Weex、Flutter 等跨平台开发框架，对于开发来说属于技术方案的选择，比如，我们会考虑用这个技术开发，性能会不会超过 h5，开发效率会不会超过原生开发等等。")]),t._v(" "),e("p",[t._v("但是从 2017 年微信推出小程序，到至今各大厂商都推出自己的小程序，跨端开发就不仅仅是技术的问题了。已经变成了必争的流量入口。现在的小程序大战像极了当前的浏览器大战。大战中受苦的是我们一线开发者，同样的应用要开发 N 次，面对了前所未有的挑战，所以跨端框架的产生是大趋势下的必然产物。")]),t._v(" "),e("h2",{attrs:{id:"mvvm-协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mvvm-协议"}},[t._v("#")]),t._v(" MVVM+ 协议")]),t._v(" "),e("p",[t._v("chameleon 基于对跨端工作的积累， 规范了一套跨端标准，称之为 MVVM+ 协议；开发者只需要按照标准扩展流程，即可快速扩展任意 MVVM 架构模式的终端。并让已有项目无缝运行新端。所以如果你希望让 CML 快速支持淘宝小程序、React Native？只需按标准实现即可扩展。")]),t._v(" "),e("p",[t._v("最终让开发者只需要用 CML 开发，就可以在任意端运行，再也不用学习新平台框架啦。")]),t._v(" "),e("h3",{attrs:{id:"新端接入情况"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#新端接入情况"}},[t._v("#")]),t._v(" 新端接入情况")]),t._v(" "),e("p",[t._v("滴滴、芒果 TV、阿里的同学合作，按照跨端协议流程，目前已完成"),e("strong",[t._v("字节跳动小程序")]),t._v("的共建开发")]),t._v(" "),e("ul",[e("li",[t._v("分工排期如下：https://github.com/didi/chameleon/issues/157")]),t._v(" "),e("li",[t._v("仓库地址： https://github.com/chameleon-team/cml-tt-sets")])]),t._v(" "),e("p",[e("strong",[t._v("快应用官方研发团队")]),t._v("目前也接入完成")]),t._v(" "),e("ul",[e("li",[t._v("分工排期如下：https://github.com/didi/chameleon/issues/185")]),t._v(" "),e("li",[t._v("仓库地址： https://github.com/quickappcn/cml-extplatform-quickapp")])]),t._v(" "),e("h3",{attrs:{id:"跨端原理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#跨端原理"}},[t._v("#")]),t._v(" 跨端原理")]),t._v(" "),e("p",[t._v("跨端框架最核心的工作是统一，chameleon 定义了标准的跨端协议，通过编译时+运行时的手段去实现各端的代码和功能，其实现原理如下图所示。")]),t._v(" "),e("p",[e("img",{attrs:{src:s(186),alt:""}})]),t._v(" "),e("p",[t._v("其中运行时和基础库部分利用多态协议实现各端的独立性与框架的统一性。chameleon 目前支持的端都是采用这种方式，我们定义了扩展一个新端所需要实现的所有标准，用户只需要按照这些标准实现即可完成一个新端的扩展。")]),t._v(" "),e("h3",{attrs:{id:"跨端标准协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#跨端标准协议"}},[t._v("#")]),t._v(" 跨端标准协议")]),t._v(" "),e("p",[t._v("我们再来看一张 CML 的设计图，能够实现标准化的扩展新端，得益于多态协议中对各层代码进行了接口的定义，各端代码按照接口定义进行实现，向用户代码提供统一调用，同时还提供”多态协议“让用户代码保障可维护性的前提下，直接触达各端原生能力的方式。")]),t._v(" "),e("img",{attrs:{src:s(476),width:"300px"}}),t._v(" "),e("ul",[e("li",[t._v("API 接口协议：定义基础接口能力标准。")]),t._v(" "),e("li",[t._v("内置组件协议：定义基础 UI 组件标准。")]),t._v(" "),e("li",[t._v("框架协议：定义生命周期、路由等框架标准。")]),t._v(" "),e("li",[t._v("DSL 协议：定义视图和逻辑层的语法标准。")]),t._v(" "),e("li",[t._v("多态实现协议：定义允许用户使用差异化能力标准。")])]),t._v(" "),e("p",[e("img",{attrs:{src:s(477),alt:""}})]),t._v(" "),e("h3",{attrs:{id:"如何扩展新端？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#如何扩展新端？"}},[t._v("#")]),t._v(" 如何扩展新端？")]),t._v(" "),e("p",[t._v("简单来说只需要实现 6 个 npm 包。")]),t._v(" "),e("p",[e("img",{attrs:{src:s(478),alt:""}})]),t._v(" "),e("h4",{attrs:{id:"实现-api-接口协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#实现-api-接口协议"}},[t._v("#")]),t._v(" 实现 API 接口协议")]),t._v(" "),e("p",[e("code",[t._v("chameleon-api")]),t._v("提供了网络请求，数据存储，获取系统信息，交互反馈等方法，用户需要创建一个 npm 包，结构参考"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("cml-demo-api"),e("OutboundLink")],1),t._v("。将 "),e("code",[t._v("chameleon-api")]),t._v(" 中提供的每个方法利用多态接口扩展语法扩展新端的实现。\n以扩展一个"),e("code",[t._v("alert")]),t._v("方法为例,"),e("code",[t._v("chameleon-api")]),t._v("中"),e("code",[t._v("alert")]),t._v("方法的接口定义文件为"),e("code",[t._v("chameleon-api/src/interfaces/alert.interface")]),t._v("，其中的接口定义内容如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('<script cml-type="interface">\ntype alertOpt = {\n  message: String,\n  confirmTitle: String\n}\ntype successCallBack = (result: String) => void;\ntype failCallBack = (result: String) => void;\ninterface uiInterface {\n  alert(opt: alertOpt, successCallBack: successCallBack, failCallBack: failCallBack): void,\n}\n<\/script>\n')])])]),e("p",[t._v("用户实现的"),e("code",[t._v("interface")]),t._v("文件中采用"),e("code",[t._v("<include></include>")]),t._v("语法引入"),e("code",[t._v("chameleon-api")]),t._v("中"),e("code",[t._v("alert")]),t._v("方法的 interface 文件, 实现"),e("code",[t._v("uiInterface")]),t._v("。")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-api/src/interfaces/alert/index.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 扩展实现新端（以头条小程序为例，假设端扩展标识为：tt）")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"tt"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uiInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" successCallBack"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" failCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据头条小程序实现alert弹窗")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    tt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      content"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      confirmText"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("h4",{attrs:{id:"实现内置组件协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#实现内置组件协议"}},[t._v("#")]),t._v(" 实现内置组件协议")]),t._v(" "),e("p",[t._v("组件分为内置组件 "),e("code",[t._v("chameleon-ui-builtin")]),t._v(" 和扩展组件 "),e("code",[t._v("cml-ui")]),t._v("。所以用户需要创建两个 npm 包分别实现这两个组件库，结构参考"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-ui-builtin",target:"_blank",rel:"noopener noreferrer"}},[t._v("cml-demo-ui-builtin"),e("OutboundLink")],1),t._v("和"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-ui",target:"_blank",rel:"noopener noreferrer"}},[t._v("cml-demo-ui"),e("OutboundLink")],1),t._v("。利用多态组件扩展语法，对原有组件库中的每一个组件进行新端的实现。")]),t._v(" "),e("p",[t._v("原有组件库中的组件也分为两种，一种为各端都有分别实现的多态组件，例如"),e("code",[t._v("chameleon-ui-builtin")]),t._v("中的"),e("code",[t._v("button")]),t._v("组件。实现起来新端基本上也是要单独实现。另一种例如"),e("code",[t._v("chameleon-ui-builtin")]),t._v("中的"),e("code",[t._v("radio")]),t._v("组件，各端的实现都是用的"),e("code",[t._v("chameleon-ui-builtin/components/radio/radio.cml")]),t._v("。所以新端基本也可以复用这个实现，(还需要测试情况确实是否可以复用)。")]),t._v(" "),e("p",[e("strong",[t._v("新端独立实现")])]),t._v(" "),e("p",[t._v("例如：")]),t._v(" "),e("p",[t._v("编写 "),e("code",[t._v("my-ui-builtin/components/button/button.interface")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/button/button.interface"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("p",[t._v("编写 "),e("code",[t._v("my-ui-builtin/components/button/button.demo.cml")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("origin-button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("tap")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onclick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{openType}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("origin-button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// js实现部分")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token style"}},[e("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n// 样式部分\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// json配置")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("独立实现的 "),e("code",[t._v("my-ui-builtin/components/button/button.demo.cml")]),t._v(" 文件属于多态组件的灰度层，可以调用各端底层组件和 api，具体例子参见 "),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-ui-builtin/tree/master/src/components/button",target:"_blank",rel:"noopener noreferrer"}},[e("code",[t._v("button")]),e("OutboundLink")],1),t._v(" 和 "),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-ui-builtin/tree/master/src/components/scroller",target:"_blank",rel:"noopener noreferrer"}},[e("code",[t._v("scroller")]),e("OutboundLink")],1),t._v(" 的实现。")]),t._v(" "),e("p",[e("strong",[t._v("新端复用现有组件")])]),t._v(" "),e("p",[t._v("编写 "),e("code",[t._v("my-ui-builtin/components/radio/button.interface")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/radio/radio.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 复用官方的实现")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"demo"')]),t._v(" src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/radio/radio.cml"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("h4",{attrs:{id:"实现-dsl-协议（编译时插件）"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#实现-dsl-协议（编译时插件）"}},[t._v("#")]),t._v(" 实现 DSL 协议（编译时插件）")]),t._v(" "),e("p",[t._v("chameleon 内部会将整个项目文件编译为如下编译图结构，节点中的内容经过了标准编译，比如"),e("code",[t._v("script")]),t._v("节点的"),e("code",[t._v("babel")]),t._v("处理，"),e("code",[t._v("style")]),t._v("节点的"),e("code",[t._v("less")]),t._v("与"),e("code",[t._v("stylus")]),t._v("处理等等。\n"),e("img",{attrs:{src:s(479)}})]),t._v(" "),e("p",[t._v("节点的数据结构如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class CMLNode {\n  constructor(options = {}) {\n    this.realPath; // 文件物理地址  会带参数\n    this.moduleType; // template/style/script/json/asset\n    this.dependencies = []; // 该节点的直接依赖       app.cml依赖pages.cml pages.cml依赖components.cml js依赖js\n    this.childrens = []; // 子模块 cml文件才有子模块\n    this.source; // 模块源代码\n    this.output; // 模块输出  各种过程操作该字段\n    ......\n  }\n}\n\n")])])]),e("p",[t._v("用户只需要实现一个"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/blob/master/packages/cml-demo-plugin/index.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("编译插件类"),e("OutboundLink")],1),t._v("，利用钩子方法实现对节点的编译，所有节点编译完后再进行文件的组织。编译类如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("module.exports = class DemoPlugin {\n  constructor(options) {\n    ......\n  }\n  /**\n   * @description 注册插件\n   * @param {compiler} 编译对象\n   * */\n  register(compiler) {\n    // 编译script节点，比如做模块化\n    compiler.hook('compile-script', function(currentNode, parentNodeType) {\n    })\n    // 编译template节点 语法转义\n    compiler.hook('compile-template', function(currentNode, parentNodeType) {\n    })\n    // 编译style节点  比如尺寸单位转义\n    compiler.hook('compile-style', function(currentNode, parentNodeType) {\n    })\n    // 编译结束进入打包阶段\n    compiler.hook('pack', function(projectGraph) {\n      // 遍历编译图的节点，进行各项目的拼接\n      // 调用writeFile方法写入文件\n      // compiler.writeFile()\n    })\n    ......\n  }\n}\n\n")])])]),e("h4",{attrs:{id:"实现框架协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#实现框架协议"}},[t._v("#")]),t._v(" 实现框架协议")]),t._v(" "),e("p",[t._v("运行时主要是对 cml 文件的逻辑对象进行适配，chameleon 内部将 cml 文件的逻辑对象分为三类 App、Page、Component。对应会调用用户运行时 npm 包的"),e("code",[t._v("createApp、createPage、createComponent")]),t._v("方法，所以对外只需要实现这三个方法。")]),t._v(" "),e("p",[t._v("例如一个 Page 的逻辑对象如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class PageIndex {\n  data = {\n    name: 'chameleon'\n  }\n  computed = {\n    sayName () {\n      return 'Hello' + this.name;\n    }\n  }\n  mounted() {\n  }\n}\nexport default new PageIndex();\n")])])]),e("p",[t._v("编译时就会自动插入用户的运行时方法处理逻辑对象，例如"),e("code",[t._v("cml-demo-runtime")]),t._v("：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class PageIndex {\n  ......\n}\nexport default new PageIndex();\n\n// 编译时自动插入用户配置的运行时方法\nimport {createPage} from 'cml-demo-runtime';\ncreatePage(exports.default);\n")])])]),e("p",[e("code",[t._v("createApp、createPage、createComponent")]),t._v("方法,参考 "),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-runtime",target:"_blank",rel:"noopener noreferrer"}},[t._v("cml-demo-runtime"),e("OutboundLink")],1),t._v(" 的结构进行实现，需要 "),e("code",[t._v("include")]),t._v(" 中相应的接口进行实现，才能够实现对 "),e("code",[t._v("chameleon-runtime")]),t._v(" 的扩展。用户的工作量主要在于对逻辑对象的处理，可以参考 "),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/tree/master/src/interfaces",target:"_blank",rel:"noopener noreferrer"}},[e("code",[t._v("chameleon-runtime")]),e("OutboundLink")],1),t._v(" 中的实现方式，一般需要如下方面的适配工作。")]),t._v(" "),e("p",[t._v("从宏观来看，运行时处理可分为：")]),t._v(" "),e("ul",[e("li",[t._v("输入 Options 对象的适配，"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("跨端运行时能力注入，"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("从微观来看，有以下处理：")]),t._v(" "),e("ul",[e("li",[t._v("生命周期："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/util/lifecycle.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("映射表参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L91",target:"_blank",rel:"noopener noreferrer"}},[t._v("实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("组件 props 属性："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L89",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L48",target:"_blank",rel:"noopener noreferrer"}},[t._v("变化监听参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("数据响应："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L63",target:"_blank",rel:"noopener noreferrer"}},[t._v("数据响应实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("computed 计算能力："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L85",target:"_blank",rel:"noopener noreferrer"}},[t._v("实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("watch 监听能力："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L126",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L97",target:"_blank",rel:"noopener noreferrer"}},[t._v("实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("methods 方法属性："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L46",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("mixins 能力："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L31",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L42",target:"_blank",rel:"noopener noreferrer"}},[t._v("合并参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L34",target:"_blank",rel:"noopener noreferrer"}},[t._v("生命周期多态"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("例如： createPage 方法的实现")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('<include src="chameleon-runtime/src/interfaces/createPage/index.interface"></include>\n<script cml-type="demo">\n  class Method implements createPageInterface {\n    createPage(options) {\n      // 各端自行实现adapter\n      adapter(options);\n      //例如调用小程序原生页面构造函数\n      Page(options);\n      return {};\n    }\n  }\n\n  export default new Method();\n<\/script>\n')])])]),e("h4",{attrs:{id:"实现框架数据管理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#实现框架数据管理"}},[t._v("#")]),t._v(" 实现框架数据管理")]),t._v(" "),e("p",[e("code",[t._v("chameleon-store")]),t._v(" 提供了类似 Vuex 的数据管理解决方案，具体标准参见"),e("RouterLink",{attrs:{to:"/docs/store.html"}},[t._v("数据管理")]),t._v("。同样利用多态协议实现其功能。")],1),t._v(" "),e("h4",{attrs:{id:"更多"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#更多"}},[t._v("#")]),t._v(" 更多")]),t._v(" "),e("ul",[e("li",[e("p",[t._v("扩展新端 Demo 示例仓库: https://github.com/chameleon-team/cml-extplatform-demo。 实现了微信端的基本扩展，用户可以以此为模板进行开发。")])]),t._v(" "),e("li",[e("p",[t._v("更详细的教程参见"),e("RouterLink",{attrs:{to:"/docs/mvvm.html#扩展新端"}},[t._v("扩展新端操作教程")]),t._v("。")],1)])]),t._v(" "),e("p",[t._v("期待更多人的加入开源。")]),t._v(" "),e("h2",{attrs:{id:"扩展新端"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#扩展新端"}},[t._v("#")]),t._v(" 扩展新端")]),t._v(" "),e("h3",{attrs:{id:"开发示例体验"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发示例体验"}},[t._v("#")]),t._v(" 开发示例体验")]),t._v(" "),e("p",[t._v("扩展新端 Demo 示例仓库: https://github.com/chameleon-team/cml-extplatform-demo。 实现了微信端的基本扩展。")]),t._v(" "),e("h4",{attrs:{id:"运行项目"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#运行项目"}},[t._v("#")]),t._v(" 运行项目")]),t._v(" "),e("ul",[e("li",[t._v("首先全局安装支持扩展新端的命令行"),e("code",[t._v("npm i chameleon-tool@1.0.3 -g")]),t._v("。")]),t._v(" "),e("li",[t._v("全局安装"),e("code",[t._v("lerna")]),t._v(" 对本项目进行管理 "),e("code",[t._v("npm i lerna -g")]),t._v("。")]),t._v(" "),e("li",[t._v("在本仓库根目录执行"),e("code",[t._v("lerna bootstrap")]),t._v("，这一步是安装外部依赖与建立本仓库 npm 包之间的依赖。")]),t._v(" "),e("li",[t._v("在"),e("code",[t._v("cml-demo-project")]),t._v("目录执行"),e("code",[t._v("cml demo dev")]),t._v(", 用微信开发者工具打开"),e("code",[t._v("cml-demo-project/dist/demo")]),t._v("目录。")])]),t._v(" "),e("h3",{attrs:{id:"开发流程"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发流程"}},[t._v("#")]),t._v(" 开发流程")]),t._v(" "),e("p",[t._v("采用 lerna 对开发的 npm 包进行管理，解决本地开发时多个 npm 包之间相互依赖的问题。lerna init 即可创建一个 lerna 项目，建议直接用"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo",target:"_blank",rel:"noopener noreferrer"}},[t._v("示例仓库"),e("OutboundLink")],1),t._v("进行修改。")]),t._v(" "),e("h4",{attrs:{id:"确定名称，创建-npm-包"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#确定名称，创建-npm-包"}},[t._v("#")]),t._v(" 确定名称，创建 npm 包")]),t._v(" "),e("ul",[e("li",[e("p",[t._v("端标识，扩展一个新端首先要确定这个端的标识名称，例如微信小程序端为"),e("code",[t._v("wx")]),t._v(",百度小程序端为"),e("code",[t._v("baidu")]),t._v("，这个标识决定了构建命令的名称、多态协议中的 cmlType, 配置对象中的 cmlType 等。 示例中确定为"),e("code",[t._v("demo")]),t._v("。")])]),t._v(" "),e("li",[e("p",[t._v("运行时 npm 包名称， 建议以"),e("code",[t._v("cml-${端标识名称}-runtime")]),t._v("格式命名，示例中为"),e("code",[t._v("cml-demo-runtime")]),t._v("。")])]),t._v(" "),e("li",[e("p",[t._v("api 库 npm 包名称， 建议以"),e("code",[t._v("cml-${端标识名称}-api")]),t._v("格式命名，示例中为"),e("code",[t._v("cml-demo-api")]),t._v("。")])]),t._v(" "),e("li",[e("p",[t._v("内置组件 npm 包名称， 建议以"),e("code",[t._v("cml-${端标识名称}-ui-builtin")]),t._v("格式命名，示例中为"),e("code",[t._v("cml-demo-ui-builtin")]),t._v("。")])]),t._v(" "),e("li",[e("p",[t._v("扩展组件 npm 包名称， 建议以"),e("code",[t._v("cml-${端标识名称}-ui")]),t._v("格式命名，示例中为"),e("code",[t._v("cml-demo-ui")]),t._v("。")])]),t._v(" "),e("li",[e("p",[t._v("数据管理 npm 包名称， 建议以"),e("code",[t._v("cml-${端标识名称}-store")]),t._v("格式命名，示例中为"),e("code",[t._v("cml-demo-store")]),t._v("。")])]),t._v(" "),e("li",[e("p",[t._v("编译插件 npm 包名称， 建议以"),e("code",[t._v("cml-${端标识名称}-plugin")]),t._v("格式命名，示例中为"),e("code",[t._v("cml-demo-plugin")]),t._v("。")])])]),t._v(" "),e("p",[t._v("在"),e("code",[t._v("packages")]),t._v("目录创建上述的 6 个 npm 包。")]),t._v(" "),e("h4",{attrs:{id:"创建开发-cml-项目"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#创建开发-cml-项目"}},[t._v("#")]),t._v(" 创建开发 CML 项目")]),t._v(" "),e("p",[t._v("在"),e("code",[t._v("packages")]),t._v("目录创建一个 CML 的项目作为测试项目，开发过程中可以进行调试代码。示例中为"),e("code",[t._v("cml-demo-project")]),t._v("。")]),t._v(" "),e("p",[t._v("1 "),e("code",[t._v("cml-demo-project")]),t._v("的"),e("code",[t._v("chameleon.config.js")]),t._v("需要 添加 extPlatform，babelPath，builtinNpmName 字段的配置，配置如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("\ncml.config.merge({\n  builtinNpmName: 'cml-demo-ui-builtin',\n  extPlatform: {\n    demo: 'cml-demo-plugin',\n  },\n  babelPath: [\n    path.join(__dirname,'node_modules/cml-demo-ui-builtin'),\n    path.join(__dirname,'node_modules/cml-demo-runtime'),\n    path.join(__dirname,'node_modules/cml-demo-api'),\n  ]\n})\n\n")])])]),e("p",[e("b",[t._v("你的项目中注意把示例 npm 包名称改成你命名的 npm 包名称")]),t._v("。")]),t._v(" "),e("ul",[e("li",[t._v("builtinNpmName 字段是你定义的内置 npm 包名称")]),t._v(" "),e("li",[t._v("extPlatform 是配置扩展新端的编译插件，key 值为端标识，value 为编译插件 npm 包名称。")]),t._v(" "),e("li",[t._v("babelPath 配置运行时相关的三个 npm 包需要过 babel")])]),t._v(" "),e("p",[t._v("2 "),e("code",[t._v("cml-demo-project")]),t._v("的"),e("code",[t._v("package.json")]),t._v("的"),e("code",[t._v("dependencies")]),t._v("中添加这几个开发 npm 包。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('"cml-demo-api": "1.0.0",\n"cml-demo-plugin": "1.0.0",\n"cml-demo-runtime": "1.0.0",\n"cml-demo-ui-builtin": "1.0.0"\n')])])]),e("p",[t._v("3 在仓库的根目录执行"),e("code",[t._v("lerna bootstrap")]),t._v("安装依赖，建立关联，这样"),e("code",[t._v("cml-demo-project")]),t._v("的"),e("code",[t._v("node_modules")]),t._v("下的这几个 npm 包会符号链接到"),e("code",[t._v("packages")]),t._v("下的同名 npm 包。")]),t._v(" "),e("h3",{attrs:{id:"如何进行开发分工"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#如何进行开发分工"}},[t._v("#")]),t._v(" 如何进行开发分工")]),t._v(" "),e("ul",[e("li",[t._v("api 的工作是独立的 不依赖其他 npm 包的开发")]),t._v(" "),e("li",[t._v("runtime 运行时的工作也是独立的 不依赖其他 npm 包")]),t._v(" "),e("li",[t._v("plugin 中的模板编译 在事件绑定的代理函数中依赖 runtime 其他的工作不依赖")]),t._v(" "),e("li",[t._v("ui-builtin 和 ui 依赖 runtime 和 plugin 的完成 才能正确执行。\ncml-tt-store 的工作也是独立的，基本上小程序端实现是相同的。")])]),t._v(" "),e("h3",{attrs:{id:"开发编译插件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发编译插件"}},[t._v("#")]),t._v(" 开发编译插件")]),t._v(" "),e("p",[t._v("参考"),e("code",[t._v("cml-demo-plugin/index.js")]),t._v("文件 实现编译类。对项目中的每一个文件或者部分进行编译处理。处理节点的"),e("code",[t._v("source")]),t._v("字段，编译后结果放入"),e("code",[t._v("output")]),t._v("字段。")]),t._v(" "),e("h4",{attrs:{id:"模板编译"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#模板编译"}},[t._v("#")]),t._v(" 模板编译")]),t._v(" "),e("p",[t._v("监听"),e("code",[t._v("compile-template")]),t._v("事件\n参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v(".cml")]),t._v(" 文件的模板部分，如果模板是类 vue 语法，内部已经将其转为标准的 cml 语法，这个阶段用于对模板语法进行编译，生成目标代码。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('compile-template', function(currentNode, parentNodeType) {\n    currentNode.output = templateParser(currentNode.source)\n})\n")])])]),e("p",[e("b",[e("code",[t._v("mvvm-template-parser")]),t._v("这个 npm 包提供了模板编译的方法。")]),t._v(" "),e("code",[t._v("const {cmlparse, generator, types: t, traverse} = require('mvvm-template-parser');")])]),t._v(" "),e("ul",[e("li",[t._v("cmlparse 将字符串转为 ast 语法树")]),t._v(" "),e("li",[t._v("traverse 对语法树进行遍历")]),t._v(" "),e("li",[t._v("types 语法树节点类型判断")]),t._v(" "),e("li",[t._v("generator 语法树生成字符串")])]),t._v(" "),e("p",[t._v("例如模板编译方法如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("const {cmlparse, generator, types: t, traverse} = require('mvvm-template-parser');\n\nmodule.exports = function(content) {\n  let ast = cmlparse(content);\n  traverse(ast, {\n    enter(path) {\n      let node = path.node;\n      if (t.isJSXElement(node)) {\n        let attributes = node.openingElement.attributes;\n        attributes.forEach(attr=>{\n          if(t.isJSXIdentifier(attr.name) && attr.name.name === 'c-for') {\n            attr.name.name = 'wx:for'\n          }\n          if(t.isJSXIdentifier(attr.name) && attr.name.name === 'c-if') {\n            attr.name.name = 'wx:if'\n          }\n        })\n        let tagName = node.openingElement.name.name;\n        if(/^origin\\-/.test(tagName)) {\n          let newtagName = tagName.replace(/^origin\\-/,'');\n          node.openingElement.name.name = newtagName;\n          node.closingElement.name.name = newtagName;\n        }\n      }\n    }\n  });\n  return generator(ast).code;\n}\n\n")])])]),e("p",[t._v("上面的方法就可以将 模板")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('<view>\n  <view c-for="{{array}}">\n  </view>\n  <view c-if="{{condition}}"> True </view>\n  <origin-button></origin-button>\n</view>\n')])])]),e("p",[t._v("编译为")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('<view>\n  <view wx:for="{{array}}">\n  </view>\n  <view wx:if="{{condition}}"> True </view>\n  <button></button>\n</view>\n')])])]),e("p",[t._v("对模板 ast 的编译本质上是对目标节点的增删改，通过类型判断确定目标节点.\n可以使用网站"),e("code",[t._v("https://astexplorer.net/")]),t._v(" 方便我们确定节点类型。该网站是将 ast 中的节点图形化展示出来，注意选择"),e("code",[t._v("javascript")]),t._v(","),e("code",[t._v("babylon7")]),t._v(" "),e("code",[t._v("jsx")]),t._v("。")]),t._v(" "),e("p",[t._v("增删改的 api 参考 babel 插件编写文档"),e("code",[t._v("https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md#toc-replacing-a-node-with-multiple-nodes")]),t._v("。")]),t._v(" "),e("p",[t._v("我们没有直接让用户采用 babel 系列 是因为对"),e("code",[t._v("generator和parser")]),t._v("内部都有做针对 CML 的改造。")]),t._v(" "),e("h5",{attrs:{id:"原生组件的处理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#原生组件的处理"}},[t._v("#")]),t._v(" 原生组件的处理")]),t._v(" "),e("p",[t._v("chameleon 中规定，在模板中使用"),e("code",[t._v("origin-组件名称")]),t._v("作为组件名称，代表使用各端原生组件。例如")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("<template>\n  <origin-button></origin-button>\n</tempalte>\n")])])]),e("p",[t._v("代表使用原生的"),e("code",[t._v("<button></button>")]),t._v("组件，CML 对于模板的标准编译没有处理"),e("code",[t._v("origin-组件名称")]),t._v("这种标签名称，原因是能够让用户根据组件的名称区别组件是否是原生组件而做不同的处理，例如原生组件的事件不做代理。所以最后用户的模板编译中应该对"),e("code",[t._v("origin-组件名称")]),t._v("这种组件名称进行替换。替换方法如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("traverse(ast, {\n    enter(path) {\n      let node = path.node;\n      if (t.isJSXElement(node)) {\n        let tagName = node.openingElement.name.name;\n        if(/^origin\\-/.test(tagName)) {\n          let newtagName = tagName.replace(/^origin\\-/,'');\n          node.openingElement.name.name = newtagName;\n          node.closingElement.name.name = newtagName;\n        }\n      }\n    }\n  });\n")])])]),e("h5",{attrs:{id:"注"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#注"}},[t._v("#")]),t._v(" 注")]),t._v(" "),e("p",[t._v("模板编译总体上是要将所有的"),e("RouterLink",{attrs:{to:"/docs/cml.html"}},[t._v("CML 的语法")]),t._v("编译成目标端的语法，可以参考 "),e("a",{attrs:{href:"ttps://github.com/didi/chameleon/tree/master/packages/chameleon-template-parse"}},[e("code",[t._v("chameleon-template-parse")])]),t._v(" 中的编译实现。\n比如微信端包括如下几方面的实现：")],1),t._v(" "),e("ul",[e("li",[t._v("标签的替换，比如"),e("code",[t._v("slider-item")]),t._v(" 标签替换成"),e("code",[t._v("swiper-item")]),t._v("。")]),t._v(" "),e("li",[t._v("属性的替换，c-if c-else c-else-if c-show c-for c-text c-key。")]),t._v(" "),e("li",[t._v("动态组件，component is 动态组件的支持。")]),t._v(" "),e("li",[t._v("style 与 class 的编译处理")]),t._v(" "),e("li",[t._v("c-model 的实现 配合运行时 mixins 代理事件与处理事件对象")]),t._v(" "),e("li",[t._v("c-animation 的处理")]),t._v(" "),e("li",[t._v("c-bind 事件绑定 配合运行时 mixins 代理事件与处理事件对象")])]),t._v(" "),e("h4",{attrs:{id:"样式编译"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#样式编译"}},[t._v("#")]),t._v(" 样式编译")]),t._v(" "),e("p",[t._v("监听"),e("code",[t._v("compile-style")]),t._v("事件\n参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理所有的 "),e("code",[t._v("style")]),t._v(" 节点，内部已经对 less stylus 等语法进行编译处理，这里得到的已经是标准的 css 格式，可以转成对应端的样式，比如对尺寸单位 cpx 的转换，将 css 转成对象形式等。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('compile-style', function(currentNode, parentNodeType) {\n  currentNode.output = styleParser(currentNode.source);\n})\n")])])]),e("p",[t._v("推荐用户使用"),e("code",[t._v("postcss")]),t._v("或者"),e("code",[t._v("rework")]),t._v("进行编译，参考"),e("code",[t._v("cml-demo-plugin/styleParser.js")]),t._v("的实现。利用了"),e("code",[t._v("chameleon-css-loader")]),t._v("中的 postcss 插件进行编译。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("const postcss = require('postcss');\nconst cpx = require('chameleon-css-loader/postcss/cpx.js')\nconst weexPlus = require('chameleon-css-loader/postcss/weex-plus.js')\n\nmodule.exports = function(source) {\n  let options = {\n    cpxType: 'rpx'\n  }\n  return postcss([cpx(options), weexPlus()]).process(source).css;\n}\n\n")])])]),e("p",[t._v("上面方法可以将 内容")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v(".test {\n  font-size: 24cpx;\n  lines: 1;\n}\n")])])]),e("p",[t._v("编译为：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v(".test {\n  font-size: 24rpx;\n  lines: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n}\n\n")])])]),e("h4",{attrs:{id:"script-编译"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#script-编译"}},[t._v("#")]),t._v(" script 编译")]),t._v(" "),e("p",[t._v("参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v("script")]),t._v("节点，内部已经对 js 文件进行了 babel 处理，这个阶段用于做模块的包装，"),e("code",[t._v("compiler.amd")]),t._v("对象提供了 amd 模块的包装方法，模块 id 使用节点的"),e("code",[t._v("modId")]),t._v("字段。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('compile-script', function(currentNode, parentNodeType) {\n  currentNode.output = compiler.amd.amdWrapModule(currentNode.source, currentNode.modId);\n})\n")])])]),e("p",[t._v("例如一个节点 source 如下，modId 为 './component/test.js'：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("module.exports = function() {\n  return 'test';\n}\n")])])]),e("p",[t._v("经过"),e("code",[t._v("compiler.amd.amdWrapModule(currentNode.source, currentNode.modId)")]),t._v("处理后成为")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("cmldefine('./component/test.js', function(require, exports, module) {\n  module.exports = function() {\n    return 'test';\n  }\n})\n\n")])])]),e("h4",{attrs:{id:"asset-编译"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#asset-编译"}},[t._v("#")]),t._v(" asset 编译")]),t._v(" "),e("p",[t._v("静态资源的编译和"),e("code",[t._v("script")]),t._v("节点的编译相同，因为 cml 内部已经将静态资源节点变成了资源的 publicPath 字符串。\n例如"),e("code",[t._v("src/assets/img/chameleon.png")]),t._v("这个节点的 source 为")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v(" module.exports = 'http://168.1.1.1:8000/static/img/chameleon.png'\n")])])]),e("p",[t._v("经过"),e("code",[t._v("compiler.amd.amdWrapModule(currentNode.source, currentNode.modId)")]),t._v("处理后成为")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("cmldefine('./component/test.js', function(require, exports, module) {\n  module.exports = 'http://168.1.1.1:8000/static/img/chameleon.png';\n})\n\n")])])]),e("h4",{attrs:{id:"编译打包与文件输出"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译打包与文件输出"}},[t._v("#")]),t._v(" 编译打包与文件输出")]),t._v(" "),e("p",[t._v("参考"),e("code",[t._v("cml-demo-plugin/index.js")]),t._v("中对"),e("code",[t._v("compiler.hook('pack', function(projectGraph) {})")]),t._v(" "),e("code",[t._v("pack")]),t._v("事件的实现，编译编译图，拼接目标文件，调用"),e("code",[t._v("compiler.writeFile")]),t._v("输出文件。")]),t._v(" "),e("h3",{attrs:{id:"开发-api-库"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发-api-库"}},[t._v("#")]),t._v(" 开发 api 库")]),t._v(" "),e("p",[t._v("用户需要创建一个 npm 包，结构参考"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("cml-demo-api"),e("OutboundLink")],1),t._v("。将"),e("code",[t._v("chameleon-api")]),t._v("中提供的每个方法利用多态接口扩展语法扩展新端的实现。")]),t._v(" "),e("p",[t._v("** 扩展新端 API（以头条小程序为例，假设端扩展标识为：tt）**")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-api/src/interfaces/alert/index.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 扩展实现新端（以头条小程序为例，假设端扩展标识为：tt）")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"tt"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uiInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" successCallBack"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" failCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据头条小程序实现alert弹窗")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    tt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      showCancel"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      title"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      content"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      confirmText"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("successCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fail")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("failCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 想覆写某已有端的方法实现（以微信小程序为例）")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uiInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" successCallBack"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" failCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 按你的想法重新实现")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("p",[t._v("需要注意的是，为了方便结合异步流程控制如 async、await 等进行操作，chameleon 官方提供的 api 接口均以 promise 形式进行返回。所以你也需要在外层使用 js 文件进行包装，将 interface 实现进行 promise 化或进行其他操作（如传入默认值）。")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" ui "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./index.interface'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("opt")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'操作成功'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" confirmTitle "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'我知道了'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    ui"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" confirmTitle "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resolve"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h3",{attrs:{id:"开发运行时"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发运行时"}},[t._v("#")]),t._v(" 开发运行时")]),t._v(" "),e("p",[t._v("运行时主要是对 cml 文件的逻辑对象进行适配，chameleon 内部将 cml 文件的逻辑对象分为三类 App、Page、Component。对应会调用用户运行时 npm 包的"),e("code",[t._v("createApp、createPage、createComponent")]),t._v("方法，所以对外只需要实现这三个方法。")]),t._v(" "),e("p",[t._v("例如一个 Page 的逻辑对象如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class PageIndex {\n  data = {\n    name: 'chameleon'\n  }\n  computed = {\n    name2 () {\n      return 'Hello' + this.name;\n    }\n  }\n  beforeCreated() {\n  }\n  mounted() {\n  }\n}\n\nexport default new PageIndex();\n")])])]),e("p",[t._v("在"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/blob/master/packages/cml-demo-plugin/index.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("编译插件"),e("OutboundLink")],1),t._v("的构造函数中添加上运行时 npm 包名称，"),e("code",[t._v("cml-demo-runtime")]),t._v("。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("  constructor(options) {\n    this.runtimeNpmName = 'cml-demo-runtime';\n  }\n")])])]),e("p",[t._v("编译时就会自动插入"),e("code",[t._v("cml-demo-runtime")]),t._v("处理逻辑对象的方法：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class PageIndex {\n  data = {\n    name: 'chameleon'\n  }\n  computed = {\n    name2 () {\n      return 'Hello' + this.name;\n    }\n  }\n  beforeCreated() {\n  }\n  mounted() {\n  }\n}\nexport default new PageIndex();\n\n// 编译时自动插入用户配置的运行时方法\nimport {createPage} from 'cml-demo-runtime';\ncreatePage(exports.default);\n")])])]),e("p",[e("code",[t._v("createApp")]),t._v("、"),e("code",[t._v("createPage")]),t._v("、"),e("code",[t._v("createComponent")]),t._v(" 方法，参考 "),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-runtime",target:"_blank",rel:"noopener noreferrer"}},[e("code",[t._v("cml-demo-runtime")]),e("OutboundLink")],1),t._v(" 的结构进行实现，需要 "),e("code",[t._v("include")]),t._v(" "),e("code",[t._v("chameleon-runtime")]),t._v(" 中相应的接口进行实现，才能够实现对 "),e("code",[t._v("chameleon-runtime")]),t._v(" 的扩展。用户的工作量主要在于对逻辑对象的处理，可以参考 "),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/tree/master/src/interfaces",target:"_blank",rel:"noopener noreferrer"}},[t._v("chameleon-runtime"),e("OutboundLink")],1),t._v(" 中的实现方式，一般需要如下方面的适配工作。")]),t._v(" "),e("p",[t._v("从宏观来看，运行时处理可分为：")]),t._v(" "),e("ul",[e("li",[t._v("输入 Options 对象的适配，"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("跨端运行时能力注入，"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("从微观来看，有以下处理：")]),t._v(" "),e("ul",[e("li",[t._v("生命周期："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/util/lifecycle.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("映射表参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L91",target:"_blank",rel:"noopener noreferrer"}},[t._v("实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("组件 props 属性："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L89",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L48",target:"_blank",rel:"noopener noreferrer"}},[t._v("变化监听参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("数据响应："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L63",target:"_blank",rel:"noopener noreferrer"}},[t._v("数据响应实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("computed 计算能力："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L85",target:"_blank",rel:"noopener noreferrer"}},[t._v("实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("watch 监听能力："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L126",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniRuntimeCore.js#L97",target:"_blank",rel:"noopener noreferrer"}},[t._v("实现参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("methods 方法属性："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L46",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("mixins 能力："),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L31",target:"_blank",rel:"noopener noreferrer"}},[t._v("适配参考"),e("OutboundLink")],1),t._v(" 和"),e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L42",target:"_blank",rel:"noopener noreferrer"}},[t._v("合并参考"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-runtime/blob/master/src/platform/common/proto/MiniVmAdapter.js#L34",target:"_blank",rel:"noopener noreferrer"}},[t._v("生命周期多态"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("例如： createPage 方法的实现")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('<include src="chameleon-runtime/src/interfaces/createPage/index.interface"></include>\n<script cml-type="demo">\n  class Method implements createPageInterface {\n    createPage(options) {\n      // 各端自行实现PageRuntime\n      let pageRuntime = new PageRuntime(options);\n\n      // 处理props\n      pageRuntime.initProps();\n\n      // 处理data\n      pageRuntime.initData();\n\n      // 处理computed\n      pageRuntime.initComputed();\n\n      // 处理methods\n      pageRuntime.initMethods();\n\n      // 处理生命周期映射\n      pageRuntime.initLifeCycle();\n\n      //调用小程序原生页面构造函数\n      Page(options);\n      return {};\n    }\n  }\n\n  export default new Method();\n<\/script>\n')])])]),e("h3",{attrs:{id:"开发组件库"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发组件库"}},[t._v("#")]),t._v(" 开发组件库")]),t._v(" "),e("p",[t._v("组件分为内置组件 "),e("code",[t._v("chameleon-ui-builtin")]),t._v(" 和扩展组件 "),e("code",[t._v("cml-ui")]),t._v("。所以用户需要创建两个 npm 包分别实现这两个组件库，结构参考"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-ui-builtin",target:"_blank",rel:"noopener noreferrer"}},[t._v("cml-demo-ui-builtin"),e("OutboundLink")],1),t._v("和"),e("a",{attrs:{href:"https://github.com/chameleon-team/cml-extplatform-demo/tree/master/packages/cml-demo-ui",target:"_blank",rel:"noopener noreferrer"}},[t._v("cml-demo-ui"),e("OutboundLink")],1),t._v("。利用多态组件扩展语法，对原有组件库中的每一个组件进行新端的实现。")]),t._v(" "),e("p",[t._v("原有组件库中的组件也分为两种，一种为各端都有分别实现的多态组件，例如"),e("code",[t._v("chameleon-ui-builtin")]),t._v("中的"),e("code",[t._v("button")]),t._v("组件。实现起来新端基本上也是要单独实现。另一种例如"),e("code",[t._v("chameleon-ui-builtin")]),t._v("中的"),e("code",[t._v("radio")]),t._v("组件，各端的实现都是用的"),e("code",[t._v("chameleon-ui-builtin/components/radio/radio.cml")]),t._v("。所以新端基本也可以复用这个实现，(还需要测试情况确实是否可以复用)。")]),t._v(" "),e("h4",{attrs:{id:"新端独立实现"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#新端独立实现"}},[t._v("#")]),t._v(" 新端独立实现")]),t._v(" "),e("p",[t._v("例如：")]),t._v(" "),e("p",[t._v("编写 "),e("code",[t._v("my-ui-builtin/components/button/button.interface")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/button/button.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("p",[t._v("编写 "),e("code",[t._v("my-ui-builtin/components/button/button.demo.cml")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("origin-button")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cml-btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("tap")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onclick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token style-attr language-css"}},[e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('="')]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("mrBtnStyle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{openType}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{lang}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("session-from")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sessionFrom}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-title")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessageTitle}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-path")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessagePath}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-img")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessageImg}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show-message-card")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showMessageCard}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("app-parameter")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{appParameter}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("getuserinfo")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getuserinfo"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("contact")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("contact"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("getphonenumber")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getphonenumber"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("error")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("error"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("opensetting")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("opensetting"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn-text"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token style-attr language-css"}},[e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('="')]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("mrTextStyle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ text }}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("origin-button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// js实现部分")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token style"}},[e("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n// 样式部分\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// json配置")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h4",{attrs:{id:"新端复用现有组件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#新端复用现有组件"}},[t._v("#")]),t._v(" 新端复用现有组件")]),t._v(" "),e("p",[t._v("编写 "),e("code",[t._v("my-ui-builtin/components/radio/button.interface")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/radio/radio.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 复用官方的实现")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"demo"')]),t._v(" src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/radio/radio.cml"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("h3",{attrs:{id:"开发数据管理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#开发数据管理"}},[t._v("#")]),t._v(" 开发数据管理")]),t._v(" "),e("h2",{attrs:{id:"标准实现"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#标准实现"}},[t._v("#")]),t._v(" 标准实现")]),t._v(" "),e("h3",{attrs:{id:"逻辑对象协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#逻辑对象协议"}},[t._v("#")]),t._v(" 逻辑对象协议")]),t._v(" "),e("p",[t._v("逻辑层负责反馈用户对界面操作的处理中心。")]),t._v(" "),e("p",[t._v("而 "),e("code",[t._v("逻辑对象")]),t._v(" 是逻辑层规范的输入口，是运行时方法("),e("code",[t._v("ceateApp")]),t._v("、"),e("code",[t._v("createComponent")]),t._v("、"),e("code",[t._v("createPage")]),t._v(")的输入，包括")]),t._v(" "),e("table",[e("tr",[e("th",[t._v("字段名")]),e("th",[t._v("类型")]),e("th",[t._v("说明")])]),t._v(" "),e("tr",[e("td",[t._v("props")]),e("td",[t._v("Object")]),t._v(" "),e("td",[t._v("\n  声明当前组件可接收数据属性 "),e("br"),t._v("\n  props = { type, default } "),e("br"),t._v("\n  type为数据类型，default为数据默认值\n  ")])]),t._v(" "),e("tr",[e("td",[t._v("data")]),e("td",[t._v("Object")]),e("td",[t._v("CML模板可直接使用的响应数据，是连接视图层的枢纽")])]),t._v(" "),e("tr",[e("td",[t._v("methods")]),e("td",[t._v("Object")]),e("td",[t._v("处理业务逻辑与交互逻辑的方法")])]),t._v(" "),e("tr",[e("td",[t._v("watch")]),e("td",[t._v("Object")]),e("td",[t._v("侦听属性，监听数据的变化，触发相应操作")])]),t._v(" "),e("tr",[e("td",[t._v("computed")]),e("td",[t._v("Object")]),e("td",[t._v("CML模板可直接使用的计算属性数据,也是连接视图层的枢纽")])]),t._v(" "),e("tr",[e("td",[t._v("beforeCreate")]),e("td",[t._v("Function")]),e("td",[t._v("例初始化之后，数据和方法挂在到实例之前\n    一个页面只会返回一次")])]),t._v(" "),e("tr",[e("td",[t._v("created")]),e("td",[t._v("Function")]),e("td",[t._v("数据及方法挂载完成")])]),t._v(" "),e("tr",[e("td",[t._v("beforeMount")]),e("td",[t._v("Function")]),e("td",[t._v("开始挂载已经编译完成的cml到对应的节点时")])]),t._v(" "),e("tr",[e("td",[t._v("mounted")]),e("td",[t._v("Function")]),e("td",[t._v("cml模板编译完成,且渲染到dom中完成")])]),t._v(" "),e("tr",[e("td",[t._v("beforeDestroy")]),e("td",[t._v("Function")]),e("td",[t._v("实例销毁之前")])]),t._v(" "),e("tr",[e("td",[t._v("destroyed")]),e("td",[t._v("Function")]),e("td",[t._v("实例销毁后")])])]),t._v(" "),e("p",[t._v("理解了每个输入字段代表的含义后，可以扩展("),e("code",[t._v("ceateApp")]),t._v("、"),e("code",[t._v("createComponent")]),t._v("、"),e("code",[t._v("createPage")]),t._v(")处理"),e("code",[t._v("逻辑对象")]),t._v("，将"),e("code",[t._v("逻辑对象")]),t._v("转换成当前平台可接收的格式。")]),t._v(" "),e("h4",{attrs:{id:"运行时能力注入"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#运行时能力注入"}},[t._v("#")]),t._v(" 运行时能力注入")]),t._v(" "),e("p",[t._v("映射，并且在各生命周期中，注入新端到 cml 框架的运行时能力")]),t._v(" "),e("h4",{attrs:{id:"生命周期-hook-映射"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#生命周期-hook-映射"}},[t._v("#")]),t._v(" 生命周期 hook 映射")]),t._v(" "),e("p",[t._v("每个 CML 实例(App、Page、Component)在被创建时都要经过一系列的初始化过程 ————")]),t._v(" "),e("p",[t._v("例如，需要设置数据监听、编译模板、将实例挂载到 \bCML 节点并在数据变化时更新 CML 节点等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给开发者在不同阶段添加自己的代码的机会。")]),t._v(" "),e("p",[t._v("CML 为 App、Page、Component 提供了一系列生命周期事件，保障应用有序执行。")]),t._v(" "),e("p",[t._v("另外，你还需要实现生命周期多态。")]),t._v(" "),e("h4",{attrs:{id:"methods"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" methods")]),t._v(" "),e("p",[t._v("应用程序运行过程中，提供给上下文"),e("code",[t._v("this")]),t._v("可调用的方法")]),t._v(" "),e("h4",{attrs:{id:"数据驱动能力"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#数据驱动能力"}},[t._v("#")]),t._v(" 数据驱动能力")]),t._v(" "),e("p",[t._v("当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。")]),t._v(" "),e("p",[t._v("注入的核心是：赋予生命周期 hook "),e("code",[t._v("mixins扩展能力")]),t._v("，并且在特定 hook 中，赋予"),e("code",[t._v("this")]),t._v("响应数据变化的能力")]),t._v(" "),e("h4",{attrs:{id:"data-数据属性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#data-数据属性"}},[t._v("#")]),t._v(" data 数据属性")]),t._v(" "),e("h4",{attrs:{id:"watch-监听属性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#watch-监听属性"}},[t._v("#")]),t._v(" watch 监听属性")]),t._v(" "),e("h4",{attrs:{id:"computed-计算属性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#computed-计算属性"}},[t._v("#")]),t._v(" computed 计算属性")]),t._v(" "),e("h3",{attrs:{id:"组件化标准"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组件化标准"}},[t._v("#")]),t._v(" 组件化标准")]),t._v(" "),e("p",[t._v("MVVM 标准中将"),e("code",[t._v(".cml")]),t._v("文件分为三类，"),e("code",[t._v("src/app/app.cml")]),t._v("为 app，"),e("code",[t._v("router.config.json")]),t._v("中配置的路由对应的文件为 page，其他的"),e("code",[t._v(".cml")]),t._v("文件为 component。")]),t._v(" "),e("h4",{attrs:{id:"组件引用"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组件引用"}},[t._v("#")]),t._v(" 组件引用")]),t._v(" "),e("p",[t._v("在"),e("code",[t._v(".cml")]),t._v("文件的"),e("code",[t._v('<script cml-type="json"><\/script>')]),t._v("json 部分，"),e("code",[t._v("usingComponents")]),t._v("字段中声明组件的引用。\n例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('{\n  "base":{\n    "usingComponents": {\n      "navi": "/components/navi/navi",\n      "c-cell": "../components/c-cell/c-cell",\n      "navi-npm": "cml-test-ui/navi/navi"\n    }\n  }\n}\n')])])]),e("p",[e("code",[t._v("usingComponents")]),t._v("对象中，key 为组件名称，组件名称为小写字母、中划线和下划线组成。value 为组件路径，组件路径的规则如下：")]),t._v(" "),e("ul",[e("li",[t._v("相对当前文件的相对路径")]),t._v(" "),e("li",[t._v("src 下的绝对路径")]),t._v(" "),e("li",[t._v("node_modules 下的组件直接从 npm 的包名称开始写例如 cml-test-ui/navi/navi")]),t._v(" "),e("li",[t._v("组件的路径禁止包含后缀扩展名，查找的优先级为\n"),e("ul",[e("li",[t._v("1.interface 文件指向的多态组件")]),t._v(" "),e("li",[t._v("2 .cml 文件")]),t._v(" "),e("li",[t._v("3 用户通过 hook: find-component 找到的组件")])])])]),t._v(" "),e("h4",{attrs:{id:"组件使用"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组件使用"}},[t._v("#")]),t._v(" 组件使用")]),t._v(" "),e("p",[t._v("组件在 CML 模板中使用，组件名为 usingComponents 中的 key 值，组件使用形式为闭合标签，标签名为组件名。例如：")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("c-cell")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("c-cell")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"c-cell"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/c-cell/c-cell"')]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h3",{attrs:{id:"事件系统标准"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#事件系统标准"}},[t._v("#")]),t._v(" 事件系统标准")]),t._v(" "),e("p",[e("code",[t._v("Chameleon")]),t._v(" 支持一些基础的原生事件和自定义事件，保障各端效果一致运行。")]),t._v(" "),e("ul",[e("li",[t._v("事件是视图层到逻辑层的通讯方式。")]),t._v(" "),e("li",[t._v("事件可以将用户的行为反馈到逻辑层进行处理。")]),t._v(" "),e("li",[t._v("事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。")])]),t._v(" "),e("h4",{attrs:{id:"原生事件标准"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#原生事件标准"}},[t._v("#")]),t._v(" 原生事件标准")]),t._v(" "),e("p",[t._v("当用户点击该组件的时候会在该组件逻辑 VM 对象的 "),e("code",[t._v("methods")]),t._v(" 中寻找相应的处理函数，该处理函数会收到一个事件对象。")]),t._v(" "),e("h5",{attrs:{id:"原生基础事件的类型"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#原生基础事件的类型"}},[t._v("#")]),t._v(" 原生基础事件的类型")]),t._v(" "),e("table",[e("tr",[e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("触发条件")])]),t._v(" "),e("tr",[e("td",[t._v("tap")]),t._v(" "),e("td",[t._v("手指触摸后马上离开")])]),t._v(" "),e("tr",[e("td",[t._v("touchstart")]),t._v(" "),e("td",[t._v("手指触摸动作开始")])]),t._v(" "),e("tr",[e("td",[t._v("touchmove")]),t._v(" "),e("td",[t._v("手指触摸后移动")])]),t._v(" "),e("tr",[e("td",[t._v("touchend")]),t._v(" "),e("td",[t._v("手指触摸动作结束")])])]),t._v(" "),e("h5",{attrs:{id:"原生事件对象"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#原生事件对象"}},[t._v("#")]),t._v(" 原生事件对象")]),t._v(" "),e("p",[t._v("它有以下属性：")]),t._v(" "),e("table",[e("tr",[e("th",[t._v("名称")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("说明")])]),t._v(" "),e("tr",[e("td",[t._v("type")]),t._v(" "),e("td",[t._v("String")]),t._v(" "),e("td",[t._v("事件类型")])]),t._v(" "),e("tr",[e("td",[t._v("timeStamp")]),t._v(" "),e("td",[t._v("Number")]),t._v(" "),e("td",[t._v("页面打开到触发事件所经过的毫秒数")])]),t._v(" "),e("tr",[e("td",[t._v("target")]),t._v(" "),e("td",[t._v("Object")]),t._v(" "),e("td",[t._v("\n      触发事件的目标元素\n      且 target = { id, dataset }\n    ")])]),t._v(" "),e("tr",[e("td",[t._v("currentTarget")]),t._v(" "),e("td",[t._v("Object")]),t._v(" "),e("td",[t._v("\n      绑定事件的目标元素\n      且 currentTarget = { id, dataset }\n    ")])]),t._v(" "),e("tr",[e("td",[t._v("touches")]),t._v(" "),e("td",[t._v("Array")]),t._v(" "),e("td",[t._v("\n      触摸事件中的属性，当前停留在屏幕中的触摸点信息的数组\n      且 touches = [{\n        identifier,\n        pageX,\n        pageY,\n        clientX,\n        clientY\n      }]\n    ")])]),t._v(" "),e("tr",[e("td",[t._v("changedTouches")]),t._v(" "),e("td",[t._v("Array")]),t._v(" "),e("td",[t._v("\n      触摸事件中的属性，当前变化的触摸点信息的数组\n      且 changedTouches = [{\n        identifier,\n        pageX,\n        pageY,\n        clientX,\n        clientY\n      }]\n    ")])]),t._v(" "),e("tr",[e("td",[t._v("detail")]),t._v(" "),e("td",[t._v("Object")]),t._v(" "),e("td",[t._v("\n      自定义事件所携带的数据。\n      通过`$cmlEmit`方法触发自定义事件，可以传递自定义数据即detail。具体下面`自定义事件`。\n    ")])]),t._v(" "),e("tr",[e("td",[t._v("_originEvent")]),t._v(" "),e("td",[t._v("Object")]),t._v(" "),e("td",[t._v("\n      CML 对各平台的事件对象进行统一，会把原始的事件对象放到_originEvent属性中，当需要特殊处理的可以进行访问。\n    ")])])]),t._v(" "),e("p",[e("strong",[t._v("target && currentTarget 事件属性")])]),t._v(" "),e("table",[e("tr",[e("th",[t._v("属性")]),e("th",[t._v("类型")]),e("th",[t._v("说明")])]),t._v(" "),e("tr",[e("td",[t._v("id")]),e("td",[t._v("String")]),e("td",[t._v("事件源组件的id")])]),t._v(" "),e("tr",[e("td",[t._v("dataset")]),e("td",[t._v("Object")]),e("td",[t._v("事件源组件上由`data-`开头的自定义属性组成的集合")])])]),t._v(" "),e("p",[e("strong",[t._v("touches && changedTouches 事件属性")])]),t._v(" "),e("p",[t._v("数组中的对象具有如下属性：")]),t._v(" "),e("table",[e("tr",[e("th",[t._v("属性")]),e("th",[t._v("类型")]),e("th",[t._v("说明")])]),t._v(" "),e("tr",[e("td",[t._v("identifier")]),e("td",[t._v("Number")]),e("td",[t._v("触摸点的标识符")])]),t._v(" "),e("tr",[e("td",[t._v("pageX, pageY")]),e("td",[t._v("Number")]),e("td",[t._v("距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴")])]),t._v(" "),e("tr",[e("td",[t._v("clientX, clientY")]),e("td",[t._v("Number")]),e("td",[t._v("距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴")])])]),t._v(" "),e("h4",{attrs:{id:"自定义事件标准"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#自定义事件标准"}},[t._v("#")]),t._v(" 自定义事件标准")]),t._v(" "),e("p",[t._v("自定义事件用于父子组件之间的通信，父组件给子组件绑定自定义事件，子组件内部触发该事件。绑定事件的方法是以"),e("code",[t._v('bind+事件名称="事件处理函数')]),t._v("的形式给组件添加属性，"),e("b",[t._v("规定事件名称不能存在大写字母")]),t._v("触发事件的方法是调用"),e("code",[t._v("this.$cmlEmit(事件名称,detail对象)")]),t._v("。")]),t._v(" "),e("h3",{attrs:{id:"状态管理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#状态管理"}},[t._v("#")]),t._v(" 状态管理")]),t._v(" "),e("h4",{attrs:{id:"数据管理-createstore"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#数据管理-createstore"}},[t._v("#")]),t._v(" 数据管理 createStore")]),t._v(" "),e("p",[t._v("创建返回数据 store 实例")]),t._v(" "),e("h4",{attrs:{id:"store-实例方法"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-实例方法"}},[t._v("#")]),t._v(" store 实例方法")]),t._v(" "),e("h5",{attrs:{id:"store-commit-type-string-payload-any"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-commit-type-string-payload-any"}},[t._v("#")]),t._v(" "),e("code",[t._v("Store.commit(type: string, payload?: any)")])]),t._v(" "),e("p",[t._v("提交 mutation。"),e("RouterLink",{attrs:{to:"/api/#store-commit"}},[t._v("详细介绍")])],1),t._v(" "),e("h5",{attrs:{id:"store-dispatch-type-string-payload-any"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-dispatch-type-string-payload-any"}},[t._v("#")]),t._v(" "),e("code",[t._v("Store.dispatch(type: string, payload?: any)")])]),t._v(" "),e("p",[t._v("分发 action。"),e("RouterLink",{attrs:{to:"/api/#store-dispatch"}},[t._v("详细介绍")])],1),t._v(" "),e("h5",{attrs:{id:"store-mapstate-map-array-string-object-string-object"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-mapstate-map-array-string-object-string-object"}},[t._v("#")]),t._v(" "),e("code",[t._v("Store.mapState(map:Array\\<string\\>|Object\\<string\\>): Object")])]),t._v(" "),e("p",[t._v("为组件创建计算属性以返回 store 中的状态。"),e("RouterLink",{attrs:{to:"/api/#store-mapstate"}},[t._v("详细介绍")])],1),t._v(" "),e("h5",{attrs:{id:"store-mapgetters-map-array-string-object-string-object"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-mapgetters-map-array-string-object-string-object"}},[t._v("#")]),t._v(" "),e("code",[t._v("Store.mapGetters(map:Array\\<string\\>|Object\\<string\\>): Object")])]),t._v(" "),e("p",[t._v("为组件创建计算属性以返回 getter 的返回值。"),e("RouterLink",{attrs:{to:"/api/#store-mapgetters"}},[t._v("详细介绍")])],1),t._v(" "),e("h5",{attrs:{id:"store-mapmutations-map-array-string-object-string-object"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-mapmutations-map-array-string-object-string-object"}},[t._v("#")]),t._v(" "),e("code",[t._v("Store.mapMutations(map:Array\\<string\\>|Object\\<string\\>): Object")])]),t._v(" "),e("p",[t._v("创建组件方法提交 mutation。"),e("RouterLink",{attrs:{to:"/api/#store-mapmutations"}},[t._v("详细介绍")])],1),t._v(" "),e("h5",{attrs:{id:"store-mapactions-map-array-string-object-string-object"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-mapactions-map-array-string-object-string-object"}},[t._v("#")]),t._v(" "),e("code",[t._v("Store.mapActions(map:Array\\<string\\>|Object\\<string\\>): Object")])]),t._v(" "),e("p",[t._v("创建组件方法分发 action。"),e("RouterLink",{attrs:{to:"/api/#store-mapactions"}},[t._v("详细介绍")])],1),t._v(" "),e("h5",{attrs:{id:"store-registermodule-path-string-module-module"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store-registermodule-path-string-module-module"}},[t._v("#")]),t._v(" "),e("code",[t._v("Store.registerModule(path: String, module: Module)")])]),t._v(" "),e("p",[t._v("注册一个动态模块。"),e("RouterLink",{attrs:{to:"/api/#store-registermodule"}},[t._v("详细介绍")])],1),t._v(" "),e("h2",{attrs:{id:"多态扩展"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#多态扩展"}},[t._v("#")]),t._v(" 多态扩展")]),t._v(" "),e("h3",{attrs:{id:"多态接口扩展"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#多态接口扩展"}},[t._v("#")]),t._v(" 多态接口扩展")]),t._v(" "),e("p",[e("b",[t._v("(chameleon-tool@0.4.0 以上开始支持)")])]),t._v(" "),e("p",[t._v("多态接口一节讲解了多态接口的使用，这一节讲解多态接口的一些扩展语法，更适用于扩展新端使用。")]),t._v(" "),e("h4",{attrs:{id:"扩展语法"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#扩展语法"}},[t._v("#")]),t._v(" 扩展语法")]),t._v(" "),e("h4",{attrs:{id:"include标签"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#include标签"}},[t._v("#")]),t._v(" "),e("code",[t._v("include")]),t._v("标签")]),t._v(" "),e("p",[t._v("当前 interface 文件用"),e("code",[t._v("<include>")]),t._v("标签可以引入其他"),e("code",[t._v(".interface")]),t._v("文件，代表继承该文件的接口定义和实现。然后在当前文件中去实现引入的接口定义，可以覆写引入的某一端实现，也可以去扩展新端的实现。 语法是"),e("code",[t._v('<include src="${引用路径}.interface"></include>')]),t._v("，有如下规则：")]),t._v(" "),e("ul",[e("li",[t._v("src 属性指向的文件路径不支持 webpack 别名，只能是相对路径或者 npm 包名开始。")])]),t._v(" "),e("h5",{attrs:{id:"例如扩展新端-api（以头条小程序为例，假设端扩展标识为：toutiao）"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#例如扩展新端-api（以头条小程序为例，假设端扩展标识为：toutiao）"}},[t._v("#")]),t._v(" 例如扩展新端 API（以头条小程序为例，假设端扩展标识为：toutiao）:")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-api/src/interfaces/alert/index.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 扩展实现新端（以头条小程序为例，假设端扩展标识为：toutiao）")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"toutiao"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uiInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" successCallBack"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" failCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据头条小程序实现alert弹窗")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    tt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      showCancel"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      title"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      content"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      confirmText"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("successCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fail")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("failCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("confirmTitle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 想覆写某已有端的方法实现（以微信小程序为例）")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uiInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("opt"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" successCallBack"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" failCallBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 按你的想法重新实现")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("h4",{attrs:{id:"script-src-属性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#script-src-属性"}},[t._v("#")]),t._v(" "),e("code",[t._v("script")]),t._v(" src 属性")]),t._v(" "),e("p",[e("code",[t._v("<script><\/script>")]),t._v("标签可以通过指定"),e("code",[t._v("src")]),t._v("的方式引用外部 js 文件为某一平台或某几个的实现或者接口定义。\n有如下规则：")]),t._v(" "),e("ul",[e("li",[t._v("src 属性指向的文件路径不支持 webpack 别名，只能是相对路径或者 npm 包名开始。")]),t._v(" "),e("li",[t._v('cml-type 属性为字符串，如果多个端可以用英文逗号 , 进行分割，例如 cml-type="web,wx".')])]),t._v(" "),e("p",[t._v("例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('<script cml-type="interface">\ninterface FirstInterface {\n  getMsg(msg: String): String;\n}\n\n<\/script>\n\n<script cml-type="web" src="./web.js"><\/script>\n\n<script cml-type="wx,alipay" src="./miniapp.js"><\/script>\n')])])]),e("p",[e("code",[t._v("web.js")]),t._v("文件内容如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class Method implements FirstInterface {\n  getMsg(msg) {\n    return 'web:' + msg;\n  }\n}\n\nexport default new Method();\n")])])]),e("h4",{attrs:{id:"多态-api-查找优先级"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#多态-api-查找优先级"}},[t._v("#")]),t._v(" 多态 API 查找优先级")]),t._v(" "),e("p",[t._v("没有扩展语法之前，每个端的实现都在同一个文件中，没有优先级的问题，但是有了扩展语法之后，就会有优先级问题。查找优先级如下：")]),t._v(" "),e("ul",[e("li",[t._v("文件内部的定义, 包括采用 src 的形式指定其他文件")]),t._v(" "),e("li",[e("code",[t._v("<include>src")]),t._v("属性指向的 interface 文件中继续查找该部分")])]),t._v(" "),e("p",[t._v("例如有如下两个 interface 文件：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("├── first\n│   └── first.interface\n└── second\n    └── second.interface\n\n")])])]),e("p",[e("code",[t._v("first.interface")]),t._v(" 包括接口定义，web 和 Weex 端的实现，内容如下：")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("interface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMsg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("msg"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("web"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMsg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("msg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'first web:'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" msg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("weex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMsg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("msg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'first weex:'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" msg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[e("code",[t._v("second.interface")]),t._v(" 包括对"),e("code",[t._v("first.interface")]),t._v("的"),e("code",[t._v("include")]),t._v(" Weex 端和 wx 端的实现，内容如下：")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("include")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("../first/first.interface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("include")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("weex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMsg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("msg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'second weex:'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" msg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstInterface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMsg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("msg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'second wx:'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" msg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Method")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("当外部引用"),e("code",[t._v("second.interface")]),t._v("文件并调用 getMsg 方法时 各端编译获取方法如下：")]),t._v(" "),e("ul",[e("li",[t._v("Web 端，因为"),e("code",[t._v("second.interface")]),t._v("中没有 Web 端实现 所以查找到"),e("code",[t._v("first.interface")]),t._v("中 Web 端 getMsg 方法")]),t._v(" "),e("li",[t._v("Weex 端，因为"),e("code",[t._v("second.interface")]),t._v("中有 Weex 端实现 所以使用"),e("code",[t._v("second.interface")]),t._v("中 Weex 端 getMsg 方法")]),t._v(" "),e("li",[t._v("wx 端，因为"),e("code",[t._v("second.interface")]),t._v("中有 wx 端实现 所以使用"),e("code",[t._v("second.interface")]),t._v("中 wx 端 getMsg 方法")])]),t._v(" "),e("h5",{attrs:{id:"注意-cml-type-interface-部分必须是唯一的"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#注意-cml-type-interface-部分必须是唯一的"}},[t._v("#")]),t._v(" 注意 cml-type interface 部分必须是唯一的")]),t._v(" "),e("p",[t._v("例 1：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('// 引入chameleon-api interface文件\n<include src="chameleon-api/src/interfaces/alert/index.interface"></include>\n\n// 错误实现interface部分\n<script cml-type="interface">\n......\n<\/script>\n\n// 扩展实现新端\n<script cml-type="demo">\n......\n<\/script>\n')])])]),e("p",[e("code",[t._v("<include>")]),t._v("的"),e("code",[t._v("chameleon-api/src/interfaces/alert/index.interface")]),t._v("文件中已经有"),e("code",[t._v('cml-type="interface"')]),t._v("的定义，所以当前文件中"),e("code",[t._v('<script cml-type="interface"><\/script>')]),t._v("定义部分是错误的。")]),t._v(" "),e("p",[t._v("例 2：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('// 引入cml-tt-api interface文件\n<include src="cml-tt-api/src/interfaces/alert/index.interface"></include>\n\n// 引入cml-quickapp-api interface文件\n<include src="cml-quickapp-api/src/interfaces/alert/index.interface"></include>\n\n// 扩展实现新端\n<script cml-type="demo">\n......\n<\/script>\n')])])]),e("p",[t._v("文件中引入了两个"),e("code",[t._v("interface")]),t._v("文件，但是他们内部找到的"),e("code",[t._v('<script cml-type="interface"><\/script>')]),t._v("定义部分都在"),e("code",[t._v("chameleon-api/src/interfaces/alert/index.interface")]),t._v("中，是同一文件。所以不认为是错误的。")]),t._v(" "),e("h3",{attrs:{id:"多态组件扩展"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#多态组件扩展"}},[t._v("#")]),t._v(" 多态组件扩展")]),t._v(" "),e("p",[e("b",[t._v("(chameleon-tool@0.4.0 以上开始支持)")])]),t._v(" "),e("p",[t._v("多态组件一节讲解了多态组件的使用，这一节讲解多态组件的一些扩展语法，更适用于扩展新端使用。")]),t._v(" "),e("h4",{attrs:{id:"扩展语法-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#扩展语法-2"}},[t._v("#")]),t._v(" 扩展语法")]),t._v(" "),e("h4",{attrs:{id:"include标签-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#include标签-2"}},[t._v("#")]),t._v(" "),e("code",[t._v("include")]),t._v("标签")]),t._v(" "),e("p",[t._v("多态组件的"),e("code",[t._v(".interface")]),t._v("文件内部可以用"),e("code",[t._v("<include>")]),t._v("标签引入其他多态组件的"),e("code",[t._v(".interface")]),t._v("文件，代表采用该文件的接口定义和对应的各端实现。\n语法是"),e("code",[t._v('<include src="${引用路径}.interface"></include>')]),t._v("，有如下规则：")]),t._v(" "),e("ul",[e("li",[t._v("src 属性指向的文件路径不支持 webpack 别名，只能是相对路径或者 npm 包名开始。")]),t._v(" "),e("li",[t._v("cml-type interface 部分必须是唯一的")])]),t._v(" "),e("h5",{attrs:{id:"例如扩展新端组件（以头条小程序为例，假设端扩展标识为：toutiao）"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#例如扩展新端组件（以头条小程序为例，假设端扩展标识为：toutiao）"}},[t._v("#")]),t._v(" 例如扩展新端组件（以头条小程序为例，假设端扩展标识为：toutiao）:")]),t._v(" "),e("p",[t._v("编写 "),e("code",[t._v("my-ui-builtin/button/button.interface")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/button/button.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("p",[t._v("再编写 "),e("code",[t._v("my-ui-builtin/button/button.toutiao.cml")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[t._v("//\n扩展实现新端（以头条小程序为例，假设端扩展标识为：toutiao），具体代码可参考在其他端的实现如：chameleon-ui-builtin/components/button/button.wx.cml\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cml-btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("tap")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onclick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token style-attr language-css"}},[e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('="')]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("mrBtnStyle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{openType}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{lang}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("session-from")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sessionFrom}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-title")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessageTitle}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-path")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessagePath}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-img")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessageImg}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show-message-card")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showMessageCard}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("app-parameter")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{appParameter}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("getuserinfo")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getuserinfo"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("contact")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("contact"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("getphonenumber")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getphonenumber"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("error")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("error"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("opensetting")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("opensetting"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn-text"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token style-attr language-css"}},[e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('="')]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("mrTextStyle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ text }}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// js实现部分")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token style"}},[e("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n// 样式部分\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// json配置")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("这样在引用"),e("code",[t._v("my-ui-builtin/button/button")]),t._v("这个多态组件时，就会有"),e("code",[t._v("chameleon-ui-builtin")]),t._v("中 button 支持的端和自己扩展的端。")]),t._v(" "),e("h4",{attrs:{id:"script-src-属性-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#script-src-属性-2"}},[t._v("#")]),t._v(" "),e("code",[t._v("script")]),t._v(" src 属性")]),t._v(" "),e("p",[e("code",[t._v("<script><\/script>")]),t._v("标签可以通过指定"),e("code",[t._v("src")]),t._v("的方式引用 cml 文件作为某一平台或某几个平台的实现或者接口定义。\n有如下规则：")]),t._v(" "),e("ul",[e("li",[t._v("src 属性指向的文件路径不支持 webpack 别名，只能是相对路径或者 npm 包名开始。")]),t._v(" "),e("li",[t._v('cml-type 属性为字符串，如果多个端可以用英文逗号 , 进行分割，例如 cml-type="web,wx"。')])]),t._v(" "),e("p",[t._v("例如上面扩展 button 的例子可以写成 下面的形式\n编写 "),e("code",[t._v("my-ui-builtin/button/button.interface")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/button/button.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"toutiao"')]),t._v(" src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./mybutton.cml"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("p",[t._v("再编写 "),e("code",[t._v("my-ui-builtin/button/mybutton.cml")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[t._v("//\n扩展实现新端（以头条小程序为例，假设端扩展标识为：toutiao），具体代码可参考在其他端的实现如：chameleon-ui-builtin/components/button/button.wx.cml\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cml-btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("tap")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onclick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token style-attr language-css"}},[e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('="')]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("mrBtnStyle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{openType}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{lang}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("session-from")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sessionFrom}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-title")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessageTitle}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-path")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessagePath}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("send-message-img")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{sendMessageImg}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show-message-card")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showMessageCard}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("app-parameter")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{appParameter}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("getuserinfo")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getuserinfo"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("contact")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("contact"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("getphonenumber")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getphonenumber"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("error")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("error"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("opensetting")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("opensetting"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn-text"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token style-attr language-css"}},[e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('="')]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("mrTextStyle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ text }}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// js实现部分")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token style"}},[e("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n// 样式部分\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// json配置")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h4",{attrs:{id:"多态组件查找优先级"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#多态组件查找优先级"}},[t._v("#")]),t._v(" 多态组件查找优先级")]),t._v(" "),e("p",[t._v("没有扩展语法之前，采用的是各端的实现和"),e("code",[t._v(".interface")]),t._v("文件保持同名的方式，各端有各自的端标识后缀，有了扩展语法之后这种约定同名的方式被打破。 多态组件的查找从 interface 作为入口进行查找，多态组件的查找，包含在组件的查找内，所以这里直接讲组件的查找优先级。\n以一个例子进行说明\n组件引用")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('{\n  "usingComponents": {\n    "demo-com": "/componnets/button/button"\n  }\n}\n')])])]),e("p",[t._v("文件结构")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("├── components\n  ├── button\n    └── button.interface\n    └── custombutton.cml\n    └── button.toutiao.cml\n    └── button.cml\n")])])]),e("p",[e("code",[t._v("button.interface")]),t._v("内容如下：")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入官方标准interface文件")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("include src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"chameleon-ui-builtin/components/button/button.interface"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("include"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"toutiao"')]),t._v(" src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./custombutton.cml"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),e("p",[t._v("当前端标识为"),e("code",[t._v("toutiao")]),t._v("查找优先级如下：")]),t._v(" "),e("ul",[e("li",[e("p",[t._v("1 找"),e("code",[t._v("/componnets/button/button.interface")]),t._v("文件，如果里面"),e("code",[t._v("<script>")]),t._v("的 cmltype 等于当前端标识 toutiao,则找到"),e("code",[t._v("<script>")]),t._v("的 src 属性指向的 cml 文件。本例子中是"),e("code",[t._v("custombutton.cml")])])]),t._v(" "),e("li",[e("p",[t._v("2 找"),e("code",[t._v("/componnets/button/button.interface")]),t._v("文件 对应同名的带有当前端标识的 cml 文件，本例子中是"),e("code",[t._v("button.toutiao.cml")])])]),t._v(" "),e("li",[e("p",[t._v("3 找"),e("code",[t._v("/componnets/button/button.interface")]),t._v("文件，里面的"),e("code",[t._v("<include></include>")]),t._v("标签的 src 指向的"),e("code",[t._v(".interface")]),t._v("文件，以该文件进行递归执行 1，2 步的查找。")])]),t._v(" "),e("li",[e("p",[t._v("3 找非多态组件"),e("code",[t._v("/componnets/button/button.cml")]),t._v("文件")])]),t._v(" "),e("li",[e("p",[t._v("4 找各平台的原生组件例如"),e("code",[t._v("/componnets/button/button.vue")]),t._v(","),e("code",[t._v("/componnets/button/button.wxml")]),t._v(" ，还有扩展新端中用户可以自定义查找")])])]),t._v(" "),e("h5",{attrs:{id:"注意-cml-type-interface-部分必须是唯一的-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#注意-cml-type-interface-部分必须是唯一的-2"}},[t._v("#")]),t._v(" 注意 cml-type interface 部分必须是唯一的")]),t._v(" "),e("p",[t._v("例 1：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('// 引入cml-ui interface文件\n<include src="cml-ui/src/components/c-tab/c-tab.interface"></include>\n\n// 错误实现interface部分\n<script cml-type="interface"><\/script>\n\n// 扩展实现新端\n<script cml-type="demo" src="......"><\/script>\n')])])]),e("p",[e("code",[t._v("<include>")]),t._v("的"),e("code",[t._v("cml-ui/src/components/c-tab/c-tab.interface")]),t._v("文件中已经有"),e("code",[t._v('cml-type="interface"')]),t._v("的定义，所以当前文件中定义"),e("code",[t._v('<script cml-type="interface"><\/script>')]),t._v("部分是错误的。")]),t._v(" "),e("p",[t._v("例 2：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('// 引入cml-tt-ui interface文件\n<include src="cml-tt-ui/src/components/c-tab/c-tab.interface"></include>\n\n// 引入cml-quickapp-ui interface文件\n<include src="cml-quickapp-ui/src/components/c-tab/c-tab.interface"></include>\n\n// 扩展实现新端\n<script cml-type="demo" src="......"><\/script>\n')])])]),e("p",[t._v("文件中引入了两个"),e("code",[t._v("interface")]),t._v("文件，但是他们内部找到的"),e("code",[t._v('<script cml-type="interface"><\/script>')]),t._v("定义部分都在"),e("code",[t._v("cml-ui/src/components/c-tab/c-tab.interface")]),t._v("中，是同一文件。所不认为是错误的。")]),t._v(" "),e("h2",{attrs:{id:"新端编译插件扩展"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#新端编译插件扩展"}},[t._v("#")]),t._v(" 新端编译插件扩展")]),t._v(" "),e("h3",{attrs:{id:"命令行"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#命令行"}},[t._v("#")]),t._v(" 命令行")]),t._v(" "),e("p",[e("b",[t._v("安装"),e("code",[t._v("chameleon-tool@1.0.3")]),t._v(" 进行扩展新端的开发。")])]),t._v(" "),e("h3",{attrs:{id:"扩展新端总体编译流程"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#扩展新端总体编译流程"}},[t._v("#")]),t._v(" 扩展新端总体编译流程")]),t._v(" "),e("p",[t._v("扩展新端 首先要了解扩展新端总体的编译流程，理解用户扩展新端的工作处于编译的什么阶段。")]),t._v(" "),e("ul",[e("li",[t._v("黄色部分表示 cml 命令行及 webpack 编译")]),t._v(" "),e("li",[t._v("蓝色部分表示扩展的 mvvm+编译")]),t._v(" "),e("li",[t._v("绿色部分表示用户要实现的部分，整个项目的文件会用一张编译图表示，用户提供针对每一个节点的编译处理，全部编译完成后，进行文件的拼接打包。")])]),t._v(" "),e("img",{attrs:{src:s(480)}}),t._v(" "),e("h3",{attrs:{id:"编译图与编译节点"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译图与编译节点"}},[t._v("#")]),t._v(" 编译图与编译节点")]),t._v(" "),e("p",[t._v("在总体编译流程中，webpack 编译完成后，会将 webpack 编译的结果转成标准的 mvvm 编译图 projectGraph，这个图由 CMLNode 节点构成，先理解编译图的组织形式和节点的数据结构，对用户写编译插件有很大帮助。")]),t._v(" "),e("h4",{attrs:{id:"编译节点"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译节点"}},[t._v("#")]),t._v(" 编译节点")]),t._v(" "),e("p",[t._v("编译节点是 CMLNode 类的实例，CMLNode 定义如下:")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class CMLNode {\n  constructor(options = {}) {\n    this.ext;\n    this.realPath; // 文件物理地址  会带参数\n    this.nodeType; // app/page/component/module // 节点类型     app/page/component  其他的为module  cml文件中的每一个部分也是一个Node节点\n    this.moduleType; // template/style/script/json/asset\n    this.dependencies = []; // 该节点的直接依赖       app.cml依赖pages.cml pages.cml依赖components.cml js依赖js\n    this.childrens = []; // 子模块 cml文件才有子模块\n    this.parent; // 父模块 cml文件中的子模块才有\n    this.source; // 模块源代码\n    this.convert; // 源代码的格式化形式\n    this.output; // 模块输出  各种过程操作该字段\n    this.identifier; // 节点唯一标识\n    this.modId; // 模块化的id requirejs\n    this.extra; // 节点的额外信息\n    Object.keys(options).forEach(key => {\n      this[key] = options[key];\n    })\n  }\n}\n\n")])])]),e("p",[t._v("具体字段含义如下:")]),t._v(" "),e("table",[e("tr",[e("th",[t._v("字段")]),t._v(" "),e("th",[t._v("含义")])]),t._v(" "),e("tr",[e("td",{staticStyle:{color:"red"}},[t._v("nodeType")]),t._v(" "),e("td",[t._v("节点类型，分为app/page/component/module，其中只有src/app/app.cml类型为app， router.config.json中配置的cml文件为page，其他的cml文件为component。非cml文件为Module")])]),t._v(" "),e("tr",[e("td",{staticStyle:{color:"red"}},[t._v("moduleType")]),t._v(" "),e("td",[t._v("\n      模块类型，当节点的nodeType为app/page/component时，其moduleType为undefined。cml文件中四个部分的moduleType分别为template、script、style、json。其他节点的nodeType为module时，根据文件后缀判断moduleType。\n      "),e("table",[e("tr",[e("td",[t._v("后缀")]),t._v(" "),e("td",[t._v("moduleType值")])]),t._v(" "),e("tr",[e("td",[t._v("/\\.css|\\.less|\\.stylus|\\.styls$/")]),t._v(" "),e("td",[t._v("style")])]),t._v(" "),e("tr",[e("td",[t._v("/\\.js|\\.interface$/")]),t._v(" "),e("td",[t._v("script")])]),t._v(" "),e("tr",[e("td",[t._v("/\\.json$/")]),t._v(" "),e("td",[t._v("json")])]),t._v(" "),e("tr",[e("td",[t._v("/\\.(png|jpe?g|gif|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff|woff2?|eot|ttf|otf)(\\?.*)?$")]),t._v(" "),e("td",[t._v("asset")])]),t._v(" "),e("tr",[e("td",[t._v("其他后缀")]),t._v(" "),e("td",[t._v("other")])])])])]),t._v(" "),e("tr",[e("td",[t._v("dependencies")]),t._v(" "),e("td",[t._v("节点的依赖节点，app依赖page page依赖component script节点中依赖require的节点")])]),t._v(" "),e("tr",[e("td",[t._v("childrens")]),t._v(" "),e("td",[t._v("节点的子节点，只有cml文件才会有子节点，子节点为cml文件的四个部分，分别为四个节点")])]),t._v(" "),e("tr",[e("td",[t._v("parent")]),t._v(" "),e("td",[t._v("节点的父节点，只有cml文件节点的子节点才有父节点")])]),t._v(" "),e("tr",[e("td",[t._v("originSource")]),t._v(" "),e("td",[t._v("节点编译前源代码（目前只有script节点有该字段）")])]),t._v(" "),e("tr",[e("td",[t._v("source")]),t._v(" "),e("td",[t._v("经过mvvm标准编译之后节点的代码")])]),t._v(" "),e("tr",[e("td",[t._v("convert")]),t._v(" "),e("td",[t._v("source的转换格式，source均为字符串，convert可能装成AST或者JSON对象")])]),t._v(" "),e("tr",[e("td",[t._v("output")]),t._v(" "),e("td",[t._v("节点的输出内容，建议用户编译可以将编译结果放在output字段用于输出")])]),t._v(" "),e("tr",[e("td",[t._v("identifier")]),t._v(" "),e("td",[t._v("节点的唯一标识，是webpack module中的request字段，保证了唯一性")])]),t._v(" "),e("tr",[e("td",[t._v("modId")]),t._v(" "),e("td",[t._v("节点的模块id，用于js的模块化id标识")])]),t._v(" "),e("tr",[e("td",[t._v("extra")]),t._v(" "),e("td",[t._v("节点的额外信息，例如template节点就会添加上模板使用的原生组件和内置组件信息")])]),t._v(" "),e("tr",[e("td",[t._v("ext")]),t._v(" "),e("td",[t._v("文件后缀，例如.js 注意如果引用资源后有参数也会带着，例如 .png?__inline")])]),t._v(" "),e("tr",[e("td",[t._v("realPath")]),t._v(" "),e("td",[t._v("节点对应的文件路径，注意如果引用资源后有参数也会带着，例如 /user/didi/yyl/project/chameleon.png?__inline")])])]),t._v(" "),e("h4",{attrs:{id:"编译图组织结构"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译图组织结构"}},[t._v("#")]),t._v(" 编译图组织结构")]),t._v(" "),e("p",[t._v("编译图由上节介绍的编译节点组成，以 nodeType 为 app 的节点开始形成编译图，内部会递归编译节点，根据节点的类型触发相应的用户编译。")]),t._v(" "),e("p",[e("img",{attrs:{src:"",alt:""}})]),t._v(" "),e("h3",{attrs:{id:"如何编写用户插件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#如何编写用户插件"}},[t._v("#")]),t._v(" 如何编写用户插件")]),t._v(" "),e("p",[t._v("扩展内置组件库和内置 API 库是独立的两个 NPM 包，其他编译相关的工作都放在用户插件中。")]),t._v(" "),e("h4",{attrs:{id:"确定端标识名称"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#确定端标识名称"}},[t._v("#")]),t._v(" 确定端标识名称")]),t._v(" "),e("p",[t._v("扩展一个新端首先要确定这个端的标识名称，例如微信小程序端为"),e("code",[t._v("wx")]),t._v(",百度小程序端为"),e("code",[t._v("baidu")]),t._v("，这个标识决定了构建命令的名称、多态协议中的 cmlType, 配置对象中的 cmlType 等。")]),t._v(" "),e("h4",{attrs:{id:"配置插件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#配置插件"}},[t._v("#")]),t._v(" 配置插件")]),t._v(" "),e("p",[t._v("在项目的 chameleon.config.js 中配置构建目标端命令时要执行的插件,这里配置的只是插件的名称，后面会讲解插件的写法。配置的字段为"),e("code",[t._v("extPlatform")]),t._v(" Object 类型,"),e("b",[t._v("key 值为上一步确定的端标识名称")]),t._v(","),e("b",[t._v("value 为要实现的插件的 npm 包名称")]),t._v(", 例如要扩展头条小程序，确定标识为"),e("code",[t._v("toutiao")]),t._v("。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("cml.config.merge({\n  extPlatform: {\n    toutiao: 'cml-toutiao-plugin'\n  }\n})\n")])])]),e("p",[t._v("当执行"),e("code",[t._v("cml 端标识名称 dev|build")]),t._v("时将走用户插件进行编译。")]),t._v(" "),e("h4",{attrs:{id:"扩展新端插件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#扩展新端插件"}},[t._v("#")]),t._v(" 扩展新端插件")]),t._v(" "),e("p",[t._v("上一步讲解了如何配置端标识命令对应的用户插件，这里讲一下插件该如何编写。插件是一个"),e("code",[t._v("类")]),t._v("，要求是 npm 包的入口。下面展示出这个类的属性和方法。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("\nmodule.exports = class ToutiaoPlugin {\n    constructor(options) {\n      let { cmlType, media} = options;\n      this.webpackRules = []; // webpack的rules设置  用于当前端特殊文件处理\n      this.moduleRules = []; // 文件后缀对应的节点moduleType\n      this.logLevel = 3;\n      this.originComponentExtList = ['.wxml']; // 用于扩展原生组件的文件后缀查找\n      this.runtimeNpmName = 'cml-demo-runtime'; // 指定当前端的运行时库\n      this.builtinUINpmName = 'cml-demo-ui-builtin'; // 指定当前端的内置组件库\n      this.cmlType = cmlType;\n      this.media = media;\n      this.miniappExt = {  // 小程序原生组件处理\n        rule: /\\.wxml$/,\n        mapping: {\n          'template': '.wxml',\n          'style': '.wxss',\n          'script': '.js',\n          'json': '.json'\n        }\n      }\n      // 需要压缩文件的后缀\n      this.minimizeExt = {\n        js: ['.js'],\n        css: ['.css','.wxss']\n      }\n    }\n  /**\n   * @description 注册插件\n   * @param {compiler} 编译对象\n   * */\n  register(compiler) {\n      /**\n       * cml节点编译前\n       * currentNode 当前节点\n       * nodeType 节点的nodeType\n       */\n      compiler.hook('compile-preCML', function(currentNode, nodeType) {\n\n      })\n      /**\n       * cml节点编译后\n       * currentNode 当前节点\n       * nodeType 节点的nodeType\n       */\n      compiler.hook('compile-postCML', function(currentNode, nodeType) {\n\n      })\n\n      /**\n       * 编译script节点，比如做模块化\n       * currentNode 当前节点\n       * parentNodeType 父节点的nodeType\n       */\n      compiler.hook('compile-script', function(currentNode, parentNodeType) {\n\n      })\n\n      /**\n       * 编译template节点 语法转义\n       * currentNode 当前节点\n       * parentNodeType 父节点的nodeType\n       */\n      compiler.hook('compile-template', function(currentNode, parentNodeType) {\n\n      })\n\n      /**\n       * 编译style节点  比如尺寸单位转义\n       * currentNode 当前节点\n       * parentNodeType 父节点的nodeType\n       */\n      compiler.hook('compile-style', function(currentNode, parentNodeType) {\n\n      })\n\n      /**\n       * 编译json节点\n       * currentNode 当前节点\n       * parentNodeType 父节点的nodeType\n       */\n      compiler.hook('compile-json', function(currentNode, parentNodeType) {\n\n      })\n\n      /**\n       * 编译other类型节点\n       * currentNode 当前节点\n       */\n      compiler.hook('compile-other', function(currentNode) {\n\n      })\n\n\n      /**\n       * 编译结束进入打包阶段\n       */\n      compiler.hook('pack', function(projectGraph) {\n        // 遍历编译图的节点，进行各项目的拼接\n        //调用writeFile方法写入文件\n        // compiler.writeFile()\n      })\n  }\n}\n")])])]),e("p",[t._v("下面对插件类中的每一个属性和方法的使用进行介绍。")]),t._v(" "),e("h4",{attrs:{id:"插件构造函数参数"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#插件构造函数参数"}},[t._v("#")]),t._v(" 插件构造函数参数")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("  constructor(options) {\n    let { cmlType, media} = options;\n  }\n")])])]),e("p",[t._v("用户插件的构造函数会接受"),e("code",[t._v("options")]),t._v("参数,"),e("code",[t._v("cmlType")]),t._v("是当前端标识名称，例如"),e("code",[t._v("web|wx|weex")]),t._v(", "),e("code",[t._v("media")]),t._v("是构建的模式，"),e("code",[t._v("dev|build")]),t._v("。")]),t._v(" "),e("h5",{attrs:{id:"this-loglevel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-loglevel"}},[t._v("#")]),t._v(" this.logLevel")]),t._v(" "),e("p",[t._v("类型：Number\n日志的等级, 可取值 0，1，2，3，默认值为 2，值越大显示日志越详细。")]),t._v(" "),e("h5",{attrs:{id:"this-origincomponentextlist"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-origincomponentextlist"}},[t._v("#")]),t._v(" this.originComponentExtList")]),t._v(" "),e("p",[t._v("类型：Array\n用于设置原生组件的文件后缀，适用于多态组件的查找。\n例如 usingComponents 中对于组件的引用是没有后缀的，用户可以对其进行扩展，再进行组件查找时会尝试用户设置的后缀，一般用于多态组件调用底层原生组件。\n例如微信小程序中：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("this.originComponentExtList = ['.wxml']; // 用于扩展原生组件的文件后缀查找\n")])])]),e("h5",{attrs:{id:"this-runtimenpmname"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-runtimenpmname"}},[t._v("#")]),t._v(" this.runtimeNpmName")]),t._v(" "),e("p",[t._v("类型：String\n用于设置当前端运行时 npm 包名称。")]),t._v(" "),e("h5",{attrs:{id:"this-builtinuinpmname"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-builtinuinpmname"}},[t._v("#")]),t._v(" this.builtinUINpmName")]),t._v(" "),e("p",[t._v("类型：String\n用于设置当前端内置组件 npm 包名称。")]),t._v(" "),e("h5",{attrs:{id:"this-minimizeext"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-minimizeext"}},[t._v("#")]),t._v(" this.minimizeExt")]),t._v(" "),e("p",[t._v("类型：Object")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("  {\n    js: Array,\n    css: Array\n  }\n")])])]),e("p",[t._v("内置了两种代码压缩，一种是 js 一直是 css，用户指定输出文件后缀对应的压缩类型。例如微信小程序中：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("  this.minimizeExt = {\n    js: ['.js'],\n    css: ['.css','.wxss']\n  }\n")])])]),e("h5",{attrs:{id:"this-miniappext"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-miniappext"}},[t._v("#")]),t._v(" this.miniappExt")]),t._v(" "),e("p",[t._v("类型：Object\nchameleon 内置了针对小程序类的原生组件的处理方法，只需要用户进行文件后缀的配置。例如微信小程序：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("this.miniappExt = {  // 小程序原生组件处理\n  rule: /\\.wxml$/,\n  mapping: {\n    'template': '.wxml',\n    'style': '.wxss',\n    'script': '.js',\n    'json': '.json'\n  }\n}\n")])])]),e("p",[t._v("rule 的正则匹配文件后缀和"),e("code",[t._v("this.originComponentExtList")]),t._v("中的设置的文件后缀保持一致。\nmapping 中的四个部分配置小程序对应的文件后缀。")]),t._v(" "),e("h5",{attrs:{id:"this-webpackrules"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-webpackrules"}},[t._v("#")]),t._v(" this.webpackRules")]),t._v(" "),e("p",[t._v("类型：Array\n当用户有其他文件类型的原生组件要处理，可以通过配置 weback 的 module.rules 字段，用于扩展目标端特殊文件类型的处理，用户可以扩展 webpack 编译过程的 loader。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("this.webpackRules = [{\n  test: /\\.vue$/,\n  use: [{\n    loader:'vue-loader',\n    options: {}\n  }]\n}]\n")])])]),e("p",[t._v("在 loader 中可以设置 this._module 中的一些字段控制生成的"),e("code",[t._v("CMLNode")]),t._v("的内容。")]),t._v(" "),e("ul",[e("li",[t._v("this._module._cmlSource 设置"),e("code",[t._v("CMLNode")]),t._v("的 source 字段")]),t._v(" "),e("li",[t._v("this._module._nodeType 设置"),e("code",[t._v("CMLNode")]),t._v("的 nodeType 字段")]),t._v(" "),e("li",[t._v("this._module._moduleType 设置"),e("code",[t._v("CMLNode")]),t._v("的 moduleType 字段")]),t._v(" "),e("li",[t._v("this._module._cmlExtra 设置"),e("code",[t._v("CMLNode")]),t._v("的 extra 字段")])]),t._v(" "),e("h5",{attrs:{id:"this-modulerules"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#this-modulerules"}},[t._v("#")]),t._v(" this.moduleRules")]),t._v(" "),e("p",[t._v("类型：Array\n设置文件类型对应的 moduleType，可以配合 webpackRules 使用，内置对应关系如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v(" [ // 文件后缀对应module信息\n  {\n    test: /\\.css|\\.less|\\.stylus|\\.styls$/,\n    moduleType: 'style'\n  },\n  {\n    test: /\\.js|\\.interface$/,\n    moduleType: 'script'\n  },\n  {\n    test: /\\.json$/,\n    moduleType: 'json'\n  },\n  {\n    test: /\\.(png|jpe?g|gif|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff|woff2?|eot|ttf|otf)(\\?.*)?$/,\n    moduleType: 'asset'\n  }\n]\n")])])]),e("p",[t._v("例如用户可以扩展"),e("code",[t._v(".vue")]),t._v("类型的 moduleType 为"),e("code",[t._v("vue")]),t._v("。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("this.webpackRules = [{\n  test: /\\.vue$/,\n  moduleType: 'vue'\n}]\n")])])]),e("p",[t._v("在递归触发用户编译阶段的钩子名称，也是根据节点的"),e("code",[t._v("moduleType")]),t._v("决定，所以用户扩展了节点的"),e("code",[t._v("moduleType")]),t._v("，相应这个节点触发的编译钩子也为"),e("code",[t._v("compile-${moduleType}")]),t._v(", 上面的例子中触发"),e("code",[t._v("compile-vue")]),t._v("。")]),t._v(" "),e("h4",{attrs:{id:"register-方法"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#register-方法"}},[t._v("#")]),t._v(" register 方法")]),t._v(" "),e("p",[t._v("register 方法中接受"),e("code",[t._v("compiler")]),t._v("对象，该对象是编译的核心对象，用户通过该对象注册编译流程。")]),t._v(" "),e("h4",{attrs:{id:"compiler-hook-方法"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#compiler-hook-方法"}},[t._v("#")]),t._v(" compiler.hook 方法")]),t._v(" "),e("p",[t._v("使用该方法可以注册编译流程，第一个参数是钩子名称，第二个参数是处理函数，处理函数中会接收编译流程对应的参数，下面说明每一个钩子的作用和参数。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook(钩子名称, function(参数) {\n\n})\n")])])]),e("p",[e("strong",[t._v("compile-preCML")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode，nodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("nodeType 当前节点的 nodeType，app/page/component")])]),t._v(" "),e("p",[t._v("说明：")]),t._v(" "),e("p",[t._v("这个钩子是编译 cml 文件节点之前触发，并且传递 cml 文件节点，可以通过该钩子去处理 cml 文件节点的"),e("code",[t._v("template、json、style、script")]),t._v("四个子节点之前需要的联系。")]),t._v(" "),e("p",[e("strong",[t._v("compile-postCML")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode，nodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("nodeType 当前节点的 nodeType，app/page/component")])]),t._v(" "),e("p",[t._v("说明：")]),t._v(" "),e("p",[t._v("这个钩子是编译完 cml 文件节点的依赖和子节点后触发，传递 cml 文件节点，可以通过该钩子去处理 cml 文件节点编译之后的处理。")]),t._v(" "),e("p",[e("strong",[t._v("compile-script")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v("nodeType='module'")]),t._v(","),e("code",[t._v("moduleType='script'")]),t._v("的节点，内部已经对 js 文件进行了 babel 处理，这个阶段用于做模块的包装，"),e("code",[t._v("compiler.amd")]),t._v("对象提供了 amd 模块的包装方法，模块 id 使用节点的"),e("code",[t._v("modId")]),t._v("字段。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('compile-script', function(currentNode, parentNodeType) {\n  currentNode.output = compiler.amd.amdWrapModule(currentNode.source, currentNode.modId);\n})\n\n")])])]),e("p",[e("strong",[t._v("compile-template")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v("nodeType='module'")]),t._v(","),e("code",[t._v("moduleType='template'")]),t._v("的节点，如果模板是类 vue 语法，内部已经将其转为标准的 cml 语法，这个阶段用于对模板语法进行编译，生成目标代码，转义可以采用"),e("code",[t._v("mvvm-template-parser")]),t._v("npm 包提供的方法，可以将模板字符串转为 ast 语法树进行操作。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("const {cmlparse,generator,types,traverse} = require('mvvm-template-parser');\ncompiler.hook('compile-template', function(currentNode, parentNodeType) {\n    let ast = cmlparse(currentNode.source);\n    traverse(ast, {\n      enter(path) {\n        //进行转义\n      }\n    });\n    currentNode.output =  generate(ast).code;\n})\n\n")])])]),e("p",[e("strong",[t._v("compile-style")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v("nodeType='module'")]),t._v(","),e("code",[t._v("moduleType='style'")]),t._v("的节点，内部已经对 less stylus 等语法进行编译处理，这里得到的已经是标准的 css 格式，可以转成对应端的样式，比如对尺寸单位 cpx 的转换，将 css 转成对象形式等。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('compile-style', function(currentNode, parentNodeType) {\n   //利用编写postcss插件的形式进行转义\n    let output = postcss([cpx()]).process(currentNode.source).css;\n    currentNode.output =  output;\n})\n\n")])])]),e("p",[e("strong",[t._v("compile-json")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v("nodeType='module'")]),t._v(","),e("code",[t._v("moduleType='json'")]),t._v("的节点。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('compile-json', function(currentNode, parentNodeType) {\n  let jsonObj = currentNode.convert;\n  jsonObj.name = \"用户自定义操作\"\n  currentNode.output = JSON.stringify(jsonObj);\n})\n\n")])])]),e("p",[e("strong",[t._v("compile-other")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v("nodeType='module'")]),t._v(","),e("code",[t._v("moduleType='other'")]),t._v("的节点。对于不是 cml 识别的模块类型进行编译。")]),t._v(" "),e("p",[e("strong",[t._v("compile-asset")])]),t._v(" "),e("p",[t._v("参数列表：(currentNode，parentNodeType)")]),t._v(" "),e("ul",[e("li",[t._v("currentNode 当前处理的节点")]),t._v(" "),e("li",[t._v("parentNodeType 父节点的 nodeType，如果是 app/page/component 节点的子节点会有值，否则为 undefined")])]),t._v(" "),e("p",[t._v("说明：\n这个钩子用于处理"),e("code",[t._v("nodeType='module'")]),t._v(","),e("code",[t._v("moduleType='asset'")]),t._v("的节点，资源节点内部已经将其 source 转为 js 语法，返回资源的"),e("code",[t._v("publichPath")]),t._v(",所以将其等同于"),e("code",[t._v("script")]),t._v("节点进行处理。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('compile-script', function(currentNode, parentNodeType) {\n  currentNode.output = compiler.amd.amdWrapModule(currentNode.source, currentNode.modId);\n})\n\n")])])]),e("p",[e("strong",[t._v("pack")])]),t._v(" "),e("p",[t._v("参数列表：(projectGraph)")]),t._v(" "),e("ul",[e("li",[t._v("projectGraph 编译图根节点")])]),t._v(" "),e("p",[t._v("说明：\n所有编译结束之后触发这个钩子，在这个钩子中编译图，拼接目标端的文件内容，调用"),e("code",[t._v("compiler.writeFile()")]),t._v("方法写入要生成的文件路径及内容。")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("compiler.hook('pack', function(projectGraph) {\n  // 遍历编译图的节点，进行各项目的拼接\n  //调用writeFile方法写入生成文件\n  compiler.writeFile('/app.json',projectGraph.output)\n})\n")])])]),e("h5",{attrs:{id:"compiler-amd"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#compiler-amd"}},[t._v("#")]),t._v(" compiler.amd")]),t._v(" "),e("p",[t._v("compiler.amd 对象提供了 js 语言的 AMD 模块化方案供开发者使用，")]),t._v(" "),e("p",[e("strong",[t._v("ompiler.amd.amdWrapModule")])]),t._v(" "),e("p",[t._v("参数列表 ({content, modId})")]),t._v(" "),e("ul",[e("li",[t._v("content js 模块的内容")]),t._v(" "),e("li",[t._v("modId 该模块的 Id")])]),t._v(" "),e("p",[t._v("说明： 将 js 模块包装成 amd 模块。\n例如 modId 为"),e("code",[t._v("src/pages/index/index.cml")]),t._v(",content 为如下的模块：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("class Index  {\n  data = {\n    title: \"chameleon\",\n    chameleonSrc: require('../../images/images/chameleon.png')\n  }\n}\n\nexport default new Index();\n")])])]),e("p",[t._v("调用 compiler.amd.amdWrapModule 后返回的结果为：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("cmldefine('src/pages/index/index.cml', function(require, exports, module) {\n  class Index  {\n    data = {\n      title: \"chameleon\",\n      chameleonSrc: require('../../images/images/chameleon.png')\n    }\n  }\n\n  export default new Index();\n})\n")])])]),e("p",[e("strong",[t._v("compiler.amd.getGlobalBootstrap")])]),t._v(" "),e("p",[t._v("参数列表 (globalName)")]),t._v(" "),e("ul",[e("li",[t._v("globalName 环境的全局变量")])]),t._v(" "),e("p",[t._v("说明: 该方法返回 js amd 模块方案的启动脚本，这个脚本是将 cmldefine 和 cmlrequire 都放到用户传递的全局变量上。返回代码如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("\n(function(cmlglobal) {\n  cmlglobal = cmlglobal || {};\n  cmlglobal.cmlrequire;\n\n  var factoryMap = {};\n\n  var modulesMap = {};\n  cmlglobal.cmldefine = function(id, factory) {\n    factoryMap[id] = factory;\n  };\n\n  cmlglobal.cmlrequire = function(id) {\n    var mod = modulesMap[id];\n    if (mod) {\n      return mod.exports;\n    }\n\n    var factory = factoryMap[id];\n    if (!factory) {\n      throw new Error('[ModJS] Cannot find module `' + id + '`');\n    }\n\n    mod = modulesMap[id] = {\n      exports: {}\n    };\n\n    var ret = (typeof factory == 'function')\n      ? factory.apply(mod, [require, mod.exports, mod])\n      : factory;\n\n    if (ret) {\n      mod.exports = ret;\n    }\n    return mod.exports;\n  };\n\n})($GLOBAL); // 全局变量\n")])])]),e("p",[e("strong",[t._v("compiler.amd.getModuleBootstrap")])]),t._v(" "),e("p",[t._v("无参数。")]),t._v(" "),e("p",[t._v("说明： 某些平台没有提供全局变量，所有 amd 的启动脚本也提供了模块化的方案。返回如下代码：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("\n/**\n * 模块型\n */\n(function() {\n\n  var factoryMap = {};\n\n  var modulesMap = {};\n  var cmldefine = function(id, factory) {\n    factoryMap[id] = factory;\n  };\n\n  var cmlrequire = function(id) {\n    var mod = modulesMap[id];\n    if (mod) {\n      return mod.exports;\n    }\n\n    var factory = factoryMap[id];\n    if (!factory) {\n      throw new Error('[ModJS] Cannot find module `' + id + '`');\n    }\n\n    mod = modulesMap[id] = {\n      exports: {}\n    };\n\n    var ret = (typeof factory == 'function')\n      ? factory.apply(mod, [require, mod.exports, mod])\n      : factory;\n\n    if (ret) {\n      mod.exports = ret;\n    }\n    return mod.exports;\n  };\n\n  module.exports = {\n    cmldefine,\n    cmlrequire\n  }\n})();\n\n")])])]),e("h5",{attrs:{id:"compiler-writefile"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#compiler-writefile"}},[t._v("#")]),t._v(" compiler.writeFile")]),t._v(" "),e("p",[t._v("参数列表 (filePath, content)")]),t._v(" "),e("ul",[e("li",[t._v("filePath 文件路径相对路径，会在项目根目录"),e("code",[t._v("dist/${端标识}")]),t._v("下拼接上 filePath。")]),t._v(" "),e("li",[t._v("content 输出的文件内容 "),e("code",[t._v("String or Buffer")])])]),t._v(" "),e("p",[t._v("说明： 在"),e("code",[t._v("pack")]),t._v("钩子中通知用户所有节点已经编译完成，用户可以遍历"),e("code",[t._v("projectGraph")]),t._v("编译图，进行目标文件的拼接，调用"),e("code",[t._v("compiler.writeFile")]),t._v("方法进行写出，"),e("code",[t._v("pack")]),t._v("钩子执行完毕后，内部编译将输出文件。例如：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('let appJson = {\n  window: {\n    "navigationBarTitleText": "Chameleon"\n  }\n}\ncompiler.writeFile(\'/app.json\', JSON.stringify(appJson))\n')])])]),e("h5",{attrs:{id:"compiler-getrouterconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#compiler-getrouterconfig"}},[t._v("#")]),t._v(" compiler.getRouterConfig")]),t._v(" "),e("p",[t._v("参数列表： 无参数\n返回值结构：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("{\n  projectRouter,\n  subProjectRouter\n}\n")])])]),e("p",[t._v("说明：projectRouter 为当前项目的 router.config.json 的对象形式。\nsubProjectRouter 为包含所有子项目的 router.config.json 对象，例如如下配置子项目：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("cml.config.merge({\n  subProject: ['cml-subproject']\n})\n")])])]),e("p",[t._v("compiler.getRouterConfig() 返回值结构如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('{\n  projectRouter: {\n    "mode": "history",\n    "domain": "https://www.chameleon.com",\n    "routes":[\n      {\n        "url": "/cml/h5/index",\n        "path": "/pages/page1/page1",\n        "name": "主项目",\n        "mock": "index.php"\n      }\n    ]\n  },\n  subProjectRouter: {\n    // 子项目npm包名称为key，value为子项目的router.config.json\n    "cml-subproject": {\n      "mode": "history",\n      "domain": "https://www.chameleon.com",\n      "routes":[\n        {\n          "url": "/cml/h5/index",\n          "path": "/pages/page1/page1",\n          "name": "主项目",\n          "mock": "index.php"\n        }\n      ]\n    }\n  }\n\n}\n')])])]),e("p",[t._v("利用这个方法可以获取路由配置，用户可以根据这些配置进行路由实现，同时 app 节点的"),e("code",[t._v("dependencies")]),t._v("字段中的节点都是页面节点。")]),t._v(" "),e("h4",{attrs:{id:"组件化相关信息"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组件化相关信息"}},[t._v("#")]),t._v(" 组件化相关信息")]),t._v(" "),e("p",[t._v("1 cml 文件的 extra 字段 (0.4.0 以上开始生效)\nCMLNode 中的 extra 字段用于存放节点的额外信息，cml 文件对应的节点，extra 中的 componentFiles 字段记录 cml 文件引用的组件信息,结构如下：")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v('{\n  componentFiles: {\n    demo-com: "/user/cml/demo-project/src/components/demo-com/demo-com.cml"\n  }\n}\n')])])]),e("p",[t._v("key 为组件名称，value 为组件的绝对路径。")]),t._v(" "),e("p",[t._v("2 cml 文件节点的 dependencies 字段\ncml 文件节点的 dependencies 字段记录的就是这个 cml 文件引用的组件节点，其中如果 cml 文件是 app 节点 则"),e("code",[t._v("dependencies")]),t._v("中还包含页面节点。通过"),e("code",[t._v("componentFiles")]),t._v("字段中的组件绝对路径匹配"),e("code",[t._v("dependencies")]),t._v("中节点的"),e("code",[t._v("realPath")]),t._v("字段，就能找到组件名对应的节点。")]),t._v(" "),e("p",[t._v("3 cml 节点的 json 子节点\ncml 节点的 children 字段存放 cml 文件的四个子节点，其中 moduleType 为 json 的节点 convert 字段为编译后的 json 对象。")]),t._v(" "),e("p",[t._v("扩展新端 Demo 仓库: https://github.com/chameleon-team/cml-extplatform-demo")]),t._v(" "),e("h2",{attrs:{id:"cml-模板语言标准"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#cml-模板语言标准"}},[t._v("#")]),t._v(" CML 模板语言标准")]),t._v(" "),e("p",[e("strong",[t._v("CML 支持两种语法，在模板 "),e("code",[t._v("template")]),t._v(" 标签中声明 "),e("code",[t._v("lang")]),t._v(" 属性即可")])]),t._v(" "),e("p",[t._v("声明模板中用 CML 语法")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cml"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("声明模板中用类 "),e("code",[t._v("vue")]),t._v(" 的语法")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("vue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("如果不声明的话默认就是 cml 语法")]),t._v(" "),e("h3",{attrs:{id:"cml-语法协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#cml-语法协议"}},[t._v("#")]),t._v(" CML 语法协议")]),t._v(" "),e("h4",{attrs:{id:"数据绑定"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#数据绑定"}},[t._v("#")]),t._v(" 数据绑定")]),t._v(" "),e("p",[t._v("模板中的数据要使用 Mustache"),e("code",[t._v("{{}}")]),t._v("将变量包起来，可以作用于")]),t._v(" "),e("h5",{attrs:{id:"标签内容"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#标签内容"}},[t._v("#")]),t._v(" 标签内容")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    message"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" 'helloCML"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h5",{attrs:{id:"组件属性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组件属性"}},[t._v("#")]),t._v(" 组件属性")]),t._v(" "),e("p",[t._v("简单属性")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item-{{id}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    id"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("控制属性")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h5",{attrs:{id:"运算：可以在-中进行简单的运算，支持如下几种形式"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#运算：可以在-中进行简单的运算，支持如下几种形式"}},[t._v("#")]),t._v(" 运算：可以在 "),e("code",[t._v("{{}}")]),t._v("中进行简单的运算，支持如下几种形式")]),t._v(" "),e("p",[t._v("三元运算")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{true ? 'cls1':'cls2'}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("逻辑判断")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{length > 5}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("字符串运算")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{'hello' + name}} "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    name"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("数据路径运算")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{object.key}} {{array[0]}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    object"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" key"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Chameleon'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h5",{attrs:{id:"组合"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组合"}},[t._v("#")]),t._v(" 组合")]),t._v(" "),e("p",[t._v("可以在 "),e("code",[t._v("{{}}")]),t._v("中直接写数组；")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[{name:'apple'},{name:'orange'}]}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{item.name}}\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h4",{attrs:{id:"列表渲染"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#列表渲染"}},[t._v("#")]),t._v(" 列表渲染")]),t._v(" "),e("p",[t._v("默认数组的当前项的下标变量名为 "),e("code",[t._v("index")]),t._v(",数组当前项的变量名为"),e("code",[t._v("item")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n{{index}}:{{item.message}}\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("使用 "),e("code",[t._v("c-for-item")]),t._v("可以用来指定数组当前元素的变量名")]),t._v(" "),e("p",[t._v("使用"),e("code",[t._v("c-for-index")]),t._v("可以指定数组当前下标的变量名")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for-item")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("itemName"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for-index")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("idx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n{{idx}}:{{itemName.message}}\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态")]),t._v(" "),e("p",[e("code",[t._v("c-key")]),t._v(" 的值以两种形式提供")]),t._v(" "),e("p",[t._v("字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。\n保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：\n当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。")]),t._v(" "),e("p",[e("code",[t._v("c-key")]),t._v("等于 item 项中某个 property")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[e("code",[t._v("c-key")]),t._v("等于关键字 "),e("code",[t._v("*this")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("*this"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h4",{attrs:{id:"条件渲染"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#条件渲染"}},[t._v("#")]),t._v(" 条件渲染")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("结合"),e("code",[t._v("c-else-if c-else")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-else-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-else")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h4",{attrs:{id:"事件绑定"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#事件绑定"}},[t._v("#")]),t._v(" 事件绑定")]),t._v(" "),e("p",[e("code",[t._v("c-bind")]),t._v("表示可以冒泡的事件")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  methods "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleClick")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("e")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//默认传递一个事件对象参数")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[e("code",[t._v("c-catch")]),t._v("表示阻止冒泡的事件")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-catch:")]),t._v("click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("内联事件")]),t._v(" "),e("p",[t._v("内联事件可以直接传递参数，特殊的参数 "),e("code",[t._v("$event")]),t._v("代表事件对象参数")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick1(1,'string',item,index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("c-bind:")]),t._v("click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick2(1,'string',item,index,$event)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("name"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'apple'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("name"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'orange'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  methods "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleClick1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleClick1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h3",{attrs:{id:"类-vue-语法协议"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#类-vue-语法协议"}},[t._v("#")]),t._v(" 类 Vue 语法协议")]),t._v(" "),e("h4",{attrs:{id:"数据绑定-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#数据绑定-2"}},[t._v("#")]),t._v(" 数据绑定")]),t._v(" "),e("h5",{attrs:{id:"标签内容-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#标签内容-2"}},[t._v("#")]),t._v(" 标签内容")]),t._v(" "),e("p",[t._v("模板中的标签内容中的变量要使用 Mustache"),e("code",[t._v("{{}}")]),t._v("包起来")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    message"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" 'helloCML"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("标签中的内容支持简单的运算")]),t._v(" "),e("p",[t._v("字符串运算")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{'hello' + name}} "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    name"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("数据路径运算")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{object.key}} {{array[0]}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    object"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" key"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Chameleon'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h5",{attrs:{id:"组件属性-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#组件属性-2"}},[t._v("#")]),t._v(" 组件属性")]),t._v(" "),e("p",[t._v("简单属性")]),t._v(" "),e("p",[t._v("模板中组件属性中的变量要通过 "),e("code",[t._v(':id="value"')]),t._v("或者 "),e("code",[t._v('v-bind:id="value"')]),t._v("这种形式去使用。")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":id")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("item-' + id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    id"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("控制属性")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("condition"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h4",{attrs:{id:"列表渲染-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#列表渲染-2"}},[t._v("#")]),t._v(" 列表渲染")]),t._v(" "),e("p",[e("code",[t._v("v-for")]),t._v("指令根据一组数组的选项列表进行渲染。"),e("code",[t._v("v-for")]),t._v(" 指令需要使用 "),e("code",[t._v("（item,index) in items")]),t._v(" 形式的特殊语法，"),e("code",[t._v("items")]),t._v(" 是源数据数组并且 "),e("code",[t._v("item")]),t._v("是数组元素迭代的别名,"),e("code",[t._v("index")]),t._v("是数组元素的下标")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(item, index) in array"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n{{index}}:{{item.message}}\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        message"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态")]),t._v(" "),e("p",[e("code",[t._v(":key")]),t._v(" 的值以两种形式提供")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(item, index) in array"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item.id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[e("code",[t._v(":key")]),t._v("等于 数组元素")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(item, index) in array"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h4",{attrs:{id:"条件渲染-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#条件渲染-2"}},[t._v("#")]),t._v(" 条件渲染")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("condition"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("结合"),e("code",[t._v("v-else-if v-else")])]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("length < 5"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-else-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("length > 5"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-else")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    length"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h4",{attrs:{id:"事件绑定-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#事件绑定-2"}},[t._v("#")]),t._v(" 事件绑定")]),t._v(" "),e("p",[e("code",[t._v("@eventName")]),t._v("或者 "),e("code",[t._v("v-on:eventName")]),t._v(" 表示可以冒泡的事件")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  methods "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleClick")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("e")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//默认传递一个事件对象参数")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[e("code",[t._v("@eventName.stop")]),t._v("或者"),e("code",[t._v("v-on:eventName.stop")]),t._v("表示阻止冒泡的事件")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click.stop")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("内联事件")]),t._v(" "),e("p",[t._v("内联事件可以直接传递参数，特殊的参数 "),e("code",[t._v("$event")]),t._v("代表事件对象参数")]),t._v(" "),e("div",{staticClass:"language-vue extra-class"},[e("pre",{pre:!0,attrs:{class:"language-vue"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(item, index) in array"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick1(1,'string',item,index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click.stop")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleClick2(1,'string',item,index,$event)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Index")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("name"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'apple'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("name"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'orange'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  methods "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleClick1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleClick1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=n.exports}}]);