Skip to content

C
Chameleon

DiDi / Chameleon

通知 13
Star 1
Fork 0
C
Chameleon

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
11.2aa2c0dc.js 69.0 KB
Newer Older
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
1 
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{151:function(t,a,s){t.exports=s.p+"assets/img/cml_component.eaa81350.png"},456:function(t,a,s){t.exports=s.p+"assets/img/architecture_top_to_bottom.958793d9.png"},457:function(t,a,s){t.exports=s.p+"assets/img/architecture_bottom_to_top.5534fba7.png"},458:function(t,a,s){t.exports=s.p+"assets/img/com_export.81da445e.png"},515:function(t,a,s){"use strict";s.r(a);var n=s(17),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"导入与导出"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#导入与导出"}},[t._v("#")]),t._v(" 导入与导出")]),t._v(" "),n("p",[n("strong",[t._v("导出")])]),t._v(" "),n("p",[t._v("即 将 CML 可重用组件"),n("strong",[t._v("导出")]),t._v("给普通项目使用，或者说 某端普通项目里面使用 CML 可重用组件。")]),t._v(" "),n("p",[n("strong",[t._v("导入")])]),t._v(" "),n("p",[t._v("即 在 CML 可重用项目中"),n("strong",[t._v("导入")]),t._v("普通项目产出的组件，或者说 可重用代码 CML 项目使用某端普通组件。")]),t._v(" "),n("p",[n("strong",[t._v("使用方式")])]),t._v(" "),n("table",[n("tr",[n("th",{attrs:{width:"200px"}},[t._v("终端")]),t._v(" "),n("th",[t._v("项目框架")]),t._v(" "),n("th",{attrs:{width:"60px"}},[t._v("导入")]),t._v(" "),n("th",[t._v("导出")]),t._v(" "),n("th",[t._v("说明")])]),t._v(" "),n("tr",[n("td",[t._v("微信")]),t._v(" "),n("td",[t._v("原始项目")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("已支持")])]),t._v(" "),n("tr",[n("td",[t._v("微信")]),t._v(" "),n("td",[t._v("MPX")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("待支持")])]),t._v(" "),n("tr",[n("td",[t._v("Web")]),t._v(" "),n("td",[t._v("Vue")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("已支持")])]),t._v(" "),n("tr",[n("td",[t._v("Web")]),t._v(" "),n("td",[t._v("React")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("待支持")])]),t._v(" "),n("tr",[n("td",[t._v("Web")]),t._v(" "),n("td",[t._v("其他")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("支持导入，不支持导出")])]),t._v(" "),n("tr",[n("td",[t._v("Native")]),t._v(" "),n("td",[t._v("Vue")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("已支持")])]),t._v(" "),n("tr",[n("td",[t._v("Native")]),t._v(" "),n("td",[t._v("React")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("待支持")])]),t._v(" "),n("tr",[n("td",[t._v("Native")]),t._v(" "),n("td",[t._v("Flutter")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("待支持")])]),t._v(" "),n("tr",[n("td",[t._v("Native")]),t._v(" "),n("td",[t._v("Objective-C MVVM框架")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("待支持")])]),t._v(" "),n("tr",[n("td",[t._v("Native")]),t._v(" "),n("td",[t._v("Android Java MVVM框架")]),t._v(" "),n("td"),t._v(" "),n("td"),t._v(" "),n("td",[t._v("待支持")])])]),t._v(" "),n("h2",{attrs:{id:"渐进式接入"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#渐进式接入"}},[t._v("#")]),t._v(" 渐进式接入")]),t._v(" "),n("p",[t._v("跨端有 2 种需求。")]),t._v(" "),n("ul",[n("li",[n("strong",[t._v("整个项目一套代码实现")]),t._v("：第一种业务层需求在各端环境高度类似，原本需要针对不同端重复开发、重复测试，那么使用 CML 将整个项目”从上至下“都用一套代码运行，针对各端底层极个别差异化实现（使用多态协议）。 - 场景举例：首页官网、列表详情页等")]),t._v(" "),n("li",[n("strong",[t._v("仅组件一套代码运行")]),t._v("：第二种是各端页面需求不一致，却有共同的组件需要重复开发、重复测试，各个端用各自原本框架开发（或者使用 CML 方案)，使用一套代码开发公用组件，然后各个端可以使用公用组件实现业务 - 场景举例：分享组件、支付组件、地图组件")])]),t._v(" "),n("table",[n("tr",[n("th",[n("em",[t._v("整个项目")]),t._v("一套代码实现")]),t._v(" "),n("th",[n("em",[t._v("仅组件")]),t._v("一套代码运行")])]),t._v(" "),n("tr",[n("td",[n("img",{attrs:{height:"350px",src:s(456)}})]),t._v(" "),n("td",[n("img",{attrs:{height:"350px",src:s(457)}})])])]),t._v(" "),n("h3",{attrs:{id:"webpack-集成"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#webpack-集成"}},[t._v("#")]),t._v(" webpack 集成")]),t._v(" "),n("p",[n("b",[t._v("注：内部 webpack 插件版本基于 webpack@3.12.0 开发选择，暂不兼容 webpack4。")])]),t._v(" "),n("p",[t._v("通过以下步骤，可以让 webpack 项目中使用 CML 的任意组件。")]),t._v(" "),n("ul",[n("li",[n("p",[t._v("1 安装 npm 包 "),n("code",[t._v("npm i easy-chameleon chameleon-ui-builtin")])])]),t._v(" "),n("li",[n("p",[t._v("2 执行脚本 "),n("code",[t._v("node node_modules/\\easy-chameleon/bin/index.js")]),t._v("，该脚本会执行检测，安装未安装的第三方 npm 包")])]),t._v(" "),n("li",[n("p",[t._v("3 .babelrc 的 preset 添加 flow, CML 中用了 flow 语法，如果需要用到"),n("code",[t._v("chameleon-api")]),t._v("，建议配置"),n("code",[t._v("babel-plugin-chameleon-import")]),t._v("插件实现按需加载。例如：")])])]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v('{\n  "presets": [\n    "flow",\n    ["env", {\n      "targets": {\n        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]\n      }\n    }],\n    "stage-0"\n  ],\n  "plugins": [\n    "transform-vue-jsx",\n    "transform-runtime",\n    [\n      "babel-plugin-chameleon-import", {\n      "libraryName": "chameleon-api",\n      "libraryDirectory": "src/interfaces",\n      "libraryFileName": "index.js",\n      "defaulLibraryDirectory": "",\n      "defaulLibraryFileName": "index.js",\n      }\n    ]\n  ]\n}\n\n')])])]),n("ul",[n("li",[n("p",[t._v("4 入口代码中，引入代码 "),n("code",[t._v("import 'easy-chameleon/entry/web_global.js';")])])]),t._v(" "),n("li",[n("p",[t._v("5 修改 webpack 配置文件,"),n("code",[t._v("easy-chameleon")]),t._v("提供了"),n("code",[t._v("getConfig\b")]),t._v("方法获取 webpack 配置 \b，利用"),n("code",[t._v("webpack-merge")]),t._v("将项目原有 webpack 配置与"),n("code",[t._v("getConfig")]),t._v("方法获取的配置进行合并，例如：")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("const merge = require('webpack-merge')\n\nconst {getConfig} = require('easy-chameleon');\n\ndevWebpackConfig = merge(devWebpackConfig, getConfig({\n  cmlType: 'web',\n  media: 'dev',\n  hot: true,\n  disableExtract: false,\n  context: path.join(__dirname,'../'),\n  cmss: {\n    rem: false,\n    scale: 0.5\n  }\n}))\n")])])]),n("p",[n("code",[t._v("getConfig方法参数")]),t._v(" getConfig(Object object)")]),t._v(" "),n("table",[n("tr",[n("th",[t._v("参数")]),n("th",[t._v("类型")]),n("th",[t._v("默认值")]),n("th",[t._v("必填")]),n("th",[t._v("说明")])]),t._v(" "),n("tr",[n("td",[t._v("cmlType")]),n("td",[t._v("String")]),n("td"),n("td",[t._v("\b是")]),n("td",[t._v("端类型，可选值为web|wx|weex")])]),t._v(" "),n("tr",[n("td",[t._v("media")]),n("td",[t._v("String")]),n("td"),n("td",[t._v("\b是")]),n("td",[t._v("构建模式，可选值为dev|build")])]),t._v(" "),n("tr",[n("td",[t._v("hot")]),n("td",[t._v("Boolean")]),n("td",[t._v("false")]),n("td",[t._v("\b否")]),n("td",[t._v("\b是否开启热更新，只在web端生效")])]),t._v(" "),n("tr",[n("td",[t._v("disableExtract")]),n("td",[t._v("Boolean")]),n("td",[t._v("false")]),n("td",[t._v("\b否")]),n("td",[t._v("\b不提取css文件")])]),t._v(" "),n("tr",[n("td",[t._v("cmss")]),n("td",[t._v("Object")]),n("td"),n("td",[t._v("\b否")]),n("td",[t._v("\bcmss处理的配置\b，参见下方cmss对象属性列表")])]),t._v(" "),n("tr",[n("td",[t._v("wxConfig")]),n("td",[t._v("Object")]),n("td"),n("td",[t._v("\b否")]),n("td",[t._v("微信端构建配置，参见下方wxConfig对象属性列表")])])])])]),t._v(" "),n("p",[t._v("cmss 对象属性列表")]),t._v(" "),n("table",[n("tr",[n("th",[t._v("参数")]),n("th",[t._v("类型")]),n("th",[t._v("默认值")]),n("th",[t._v("必填")]),n("th",[t._v("说明")])]),t._v(" "),n("tr",[n("td",[t._v("rem")]),n("td",[t._v("Boolean")]),n("td",[t._v("true")]),n("td",[t._v("\b否")]),n("td",[t._v("将cpx以75cpx=1rem为标准转换成rem")])]),t._v(" "),n("tr",[n("td",[t._v("scale")]),n("td",[t._v("Number")]),n("td",[t._v("0.5")]),n("td",[t._v("\b否")]),n("td",[t._v("当rem为false时，scale将生效，将cpx乘以scale为px")])])]),t._v(" "),n("p",[t._v("wxConfig 对象属性列表")]),t._v(" "),n("table",[n("tr",[n("th",[t._v("参数")]),n("th",[t._v("类型")]),n("th",[t._v("默认值")]),n("th",[t._v("必填")]),n("th",[t._v("说明")])]),t._v(" "),n("tr",[n("td",[t._v("entry")]),n("td",[t._v("Array[String]")]),n("td"),n("td",[t._v("\b是")]),n("td",[t._v("指定输出的组件入口，以项目根目录下的相对路径,会寻找指定路径下的cml文件进行编译")])]),t._v(" "),n("tr",[n("td",[t._v("outputPath")]),n("td",[t._v("String")]),n("td"),n("td",[t._v("\b否")]),n("td",[t._v("输出路径")])])]),t._v(" "),n("h4",{attrs:{id:"示例"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#示例"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),n("p",[t._v("详细示例戳这里 "),n("RouterLink",{attrs:{to:"/tutorial/webpack-with-cml.html"}},[t._v("webpack 集成 CML")])],1),t._v(" "),n("h3",{attrs:{id:"组件导出"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#组件导出"}},[t._v("#")]),t._v(" 组件导出")]),t._v(" "),n("p",[t._v("这里介绍的是第二种场景，将 CML 组件导出到某个端使用。")]),t._v(" "),n("h4",{attrs:{id:"介绍"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),n("p",[t._v("为了让开发者更自由地使用 CML 我们提供组件导出的形式，让开发者可以在任意端原有项目中使用通过 CML 开发的组件。我们用 Web 端和小程序端举例，按正常开发模式我们需要分别维护着 4 套代码（web、wx、alipay、baidu），在某一个业务场景下需要开发一个时间选择器的组件，原有模式下我们需要每个端独自开发，而对于这种公共的组件，就可以选择使用 CML 去维护，通过 CML 开发，只需要维护一套组件代码，最后通过组件导出就可以在各个端进行使用了。这样的模式完全利用了 CML 的跨端优势，大大降低了代码开发维护成本。")]),t._v(" "),n("p",[t._v("组件导出开发模式：\n"),n("img",{attrs:{src:s(458),alt:""}})]),t._v(" "),n("h4",{attrs:{id:"命令行"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#命令行"}},[t._v("#")]),t._v(" 命令行")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("cml web export")]),t._v(" 执行 Web 端组件导出")]),t._v(" "),n("li",[n("code",[t._v("cml weex export")]),t._v(" 执行 Weex 端组件导出")]),t._v(" "),n("li",[n("code",[t._v("cml wx export")]),t._v(" 执行 wx 端组件导出")]),t._v(" "),n("li",[n("code",[t._v("cml alipay export")]),t._v(" 执行 alipay 端组件导出")]),t._v(" "),n("li",[n("code",[t._v("cml baidu export")]),t._v(" 执行 baidu 端组件导出")])]),t._v(" "),n("h4",{attrs:{id:"配置"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#配置"}},[t._v("#")]),t._v(" 配置")]),t._v(" "),n("p",[t._v("在 chameleon.config.js 中增加 export 配置，即可自定义组件导出配置,可配置项参考下表：")]),t._v(" "),n("table",[n("tr",[n("th",[t._v("配置项")]),t._v(" "),n("th",[t._v("类型")]),t._v(" "),n("th",[t._v("说明")])]),t._v(" "),n("tr",[n("td",[t._v("entry")]),t._v(" "),n("td",[t._v("Array")]),t._v(" "),n("td",[t._v("组件导出的入口目录，项目根目录的相对路径")])]),t._v(" "),n("tr",[n("td",[t._v("outputPath")]),t._v(" "),n("td",[t._v("String")]),t._v(" "),n("td",[t._v("组件导出目录，绝对路径")])]),t._v(" "),n("tr",[n("td",[t._v("publicPath")]),t._v(" "),n("td",[t._v("String")]),t._v(" "),n("td",[t._v("公共资源地址")])]),t._v(" "),n("tr",[n("td",[t._v("hash")]),t._v(" "),n("td",[t._v("Boolean")]),t._v(" "),n("td",[t._v("导出文件名是否带hash，默认true")])]),t._v(" "),n("tr",[n("td",[t._v("minimize")]),t._v(" "),n("td",[t._v("Boolean")]),t._v(" "),n("td",[t._v("导出文件名是否压缩，默认true")])]),t._v(" "),n("tr",[n("td",[t._v("disableExtract")]),t._v(" "),n("td",[t._v("Boolean")]),t._v(" "),n("td",[t._v("不拆分css，默认false")])]),t._v(" "),n("tr",[n("td",[t._v("externals")]),t._v(" "),n("td",[t._v("Object")]),t._v(" "),n("td",[t._v("导出依赖分离，可配置不导出部分依赖，而使用外部依赖")])])]),t._v(" "),n("p",[t._v("以 Web 端为例，配置如下：")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  web"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    dev"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    build"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      entry"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/components'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      publicPath"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://static.chameleon.com/static'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h4",{attrs:{id:"导出组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#导出组件"}},[t._v("#")]),t._v(" 导出组件")]),t._v(" "),n("p",[t._v("CML 组件导出目录结构如下：")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("├── dist\n|   ├── export\n│   │   ├── platform (web、weex、wx、alipay、baidu ...)\n│   │   │   ├── common\n|   │   │   │   ├── web_global.js [仅导出web端组件时存在，需要在入口文件中引用]\n|   │   │   │   ├── web_global.css [会在web_global.js中引用]\n│   │   │   ├── 组件目录\n│   │   │   └── 资源目录\n")])])]),n("p",[t._v("下面是在 webpack+vue 环境下引用 CML 导出组件的示例：")]),t._v(" "),n("p",[t._v("假设目前已经通过 CML 项目导出了 c-header 组件，将组件移动到 webpack+vue 的环境后，需要进行一下几步操作：")]),t._v(" "),n("ol",[n("li",[t._v("假设是 Web 端组件，则首先需要在入口文件中引用 web_global.js")]),t._v(" "),n("li",[t._v("在需要使用组件的地方引用组件即可")])]),t._v(" "),n("h4",{attrs:{id:"导出组件公共依赖分离"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#导出组件公共依赖分离"}},[t._v("#")]),t._v(" 导出组件公共依赖分离")]),t._v(" "),n("blockquote",[n("p",[t._v("当组件 A 和组件 B 同时依赖于公共模块 C 时，普通导出会将 C 打包到导出的 A、B 组件代码中，此时使用 A、B 组件相当于有两份模块 C 的代码，为了优化这一问题，导出组件提供分离公共依赖配置，即将模块 C 作为第三方依赖，在 A、B 组件导出时将模块 C 分离，在使用时依赖模块 C。")])]),t._v(" "),n("p",[t._v("这里以"),n("code",[t._v("chameleon-runtime")]),t._v("为例，首先将"),n("code",[t._v("chameleon-runtime")]),t._v("编译出仅 Web 端使用的版本"),n("code",[t._v("chameleon-runtime-web")]),t._v("，在导出 web 组件配置部分增加相关配置，然后导出的组件在依赖"),n("code",[t._v("chameleon-runtime")]),t._v("的部分就会变成依赖"),n("code",[t._v("chameleon-runtime-web")]),t._v("，最后在使用的项目中下载"),n("code",[t._v("chameleon-runtime-web")]),t._v("即可使用。")]),t._v(" "),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  web"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      entry"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/components'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      publicPath"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://static.chameleon.com/static'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      externals"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon-runtime'")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon-runtime-web'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h4",{attrs:{id:"bug-tips"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-tips"}},[t._v("#")]),t._v(" Bug & Tips")]),t._v(" "),n("ul",[n("li",[t._v(".babelrc 配置中去掉"),n("code",[t._v("module: false")])]),t._v(" "),n("li",[t._v("由于生产模式组件为编译后的模块，所以尽量使用线上资源")])]),t._v(" "),n("h4",{attrs:{id:"示例-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#示例-2"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),n("p",[t._v("详细示例戳这里"),n("RouterLink",{attrs:{to:"/tutorial/export-cml-component.html"}},[t._v("普通项目使用 CML 跨端组件")])],1),t._v(" "),n("h2",{attrs:{id:"web"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#web"}},[t._v("#")]),t._v(" Web")]),t._v(" "),n("p",[t._v("组件开发模式")]),t._v(" "),n("img",{attrs:{src:s(151)}}),t._v(" "),n("h3",{attrs:{id:"web-端组件接入"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#web-端组件接入"}},[t._v("#")]),t._v(" Web 端组件接入")]),t._v(" "),n("p",[t._v("chameleon 允许在 Web 端多态组件中直接引入原生 vue 组件，一方面是为了增加代码重用度，另一方面则是方便渐进式地迁移使用 CML")]),t._v(" "),n("h4",{attrs:{id:"为什么要接入-web-端组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#为什么要接入-web-端组件"}},[t._v("#")]),t._v(" 为什么要接入 Web 端组件")]),t._v(" "),n("p",[t._v("chameleon 作为跨端框架，将各端相同性及差异性进行统一封装形成 CML 的规范，但即使是这样，我们也没有办法百分百地避免差异，这样的差异可能来自产品的要求、技术的实现等等，由此 CML 提出了"),n("RouterLink",{attrs:{to:"/docs/poly.html#多态组件"}},[t._v("多态组件协议")]),t._v("，在多态组件实现中，直接引用原生组件，降低开发成本。")],1),t._v(" "),n("h4",{attrs:{id:"怎么引入-web-端组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#怎么引入-web-端组件"}},[t._v("#")]),t._v(" 怎么引入 Web 端组件")]),t._v(" "),n("p",[t._v("在 CML 中使用组件只需要在组件配置中写入依赖的子组件，下面是 Web 端组件引用 vue 单文件组件的示例：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- index.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-list")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-list")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n...\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"v-list"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/vue-components/v-list"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- components/vue-components/v-list.vue --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("l in list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ l }}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  props"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    list"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      type"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("blockquote",[n("p",[t._v("需要注意的是组件路径需要写到.vue 层级，但是不带后缀。")])]),t._v(" "),n("h4",{attrs:{id:"示例-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#示例-3"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),n("p",[t._v("详细示例戳这里"),n("RouterLink",{attrs:{to:"/tutorial/poly-component.html"}},[t._v("多态组件扩展")])],1),t._v(" "),n("h2",{attrs:{id:"weex"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#weex"}},[t._v("#")]),t._v(" Weex")]),t._v(" "),n("p",[t._v("组件开发模式\n"),n("img",{attrs:{src:s(151)}})]),t._v(" "),n("h3",{attrs:{id:"weex-端组件接入"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#weex-端组件接入"}},[t._v("#")]),t._v(" Weex 端组件接入")]),t._v(" "),n("p",[t._v("chameleon 允许在 Weex 端多态组件中直接引入原生 vue 组件，一方面是为了增加代码重用度，另一方面则是方便渐进式地迁移使用 CML")]),t._v(" "),n("h4",{attrs:{id:"为什么要接入-weex-端组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#为什么要接入-weex-端组件"}},[t._v("#")]),t._v(" 为什么要接入 Weex 端组件")]),t._v(" "),n("p",[t._v("chameleon 作为跨端框架，将各端相同性及差异性进行统一封装形成 CML 的规范，但即使是这样，我们也没有办法百分百地避免差异，这样的差异可能来自产品的要求、技术的实现等等，由此 CML 提出了多态组件协议，在多态组件实现中，直接引用原生组件，降低开发成本。")]),t._v(" "),n("h4",{attrs:{id:"怎么引入-weex-端组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#怎么引入-weex-端组件"}},[t._v("#")]),t._v(" 怎么引入 Weex 端组件")]),t._v(" "),n("p",[t._v("第一类是 Weex 支持的原生组件，比如"),n("code",[t._v("div")]),t._v(" "),n("code",[t._v("text")]),t._v("等，详细请查看"),n("a",{attrs:{href:"http://weex-project.io/cn/references/components/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Weex 原生组件列表"),n("OutboundLink")],1),t._v("，如果这样的组件已经满足开发需求，那么就可以直接使用了：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list.weex.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("l in list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ l }}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("第二类是原先封装好的组件，首先你需要将组件复制到 CML 项目中，然后只需要在 CML 组件中声明式引入该组件即可使用。\n还是以"),n("code",[t._v("list")]),t._v("组件为例，假设原有封装好的组件"),n("code",[t._v("custom-list")]),t._v("，目录结构如下：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- index.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-list")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-list")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n...\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"v-list"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/vue-components/v-list"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- components/vue-components/v-list.vue --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("l in list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ l }}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  props"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    list"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      type"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("blockquote",[n("p",[t._v("需要注意的是组件路径需要写到.vue 层级，但是不带后缀。")])]),t._v(" "),n("h4",{attrs:{id:"示例-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#示例-4"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),n("p",[t._v("详细示例戳这里"),n("RouterLink",{attrs:{to:"/tutorial/poly-component.html"}},[t._v("多态组件扩展")])],1),t._v(" "),n("h2",{attrs:{id:"微信小程序"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#微信小程序"}},[t._v("#")]),t._v(" 微信小程序")]),t._v(" "),n("p",[t._v("组件开发模式\n"),n("img",{attrs:{src:s(151)}})]),t._v(" "),n("h3",{attrs:{id:"小程序组件接入"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序组件接入"}},[t._v("#")]),t._v(" 小程序组件接入")]),t._v(" "),n("p",[t._v("chameleon 允许在多态组件中引入原生微信小程序组件，对于已经熟悉小程序组件开发的朋友将非常 easy，之前封装的微信小程序组件可以直接使用，微信小程序相关的 ui 库可以直接使用，微信小程序自带的组件也可以直接使用。")]),t._v(" "),n("h4",{attrs:{id:"为什么要接入微信小程序组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#为什么要接入微信小程序组件"}},[t._v("#")]),t._v(" 为什么要接入微信小程序组件")]),t._v(" "),n("p",[t._v("多态组件存在的差异不过来自于各端需求不同，又或是各端实现方式的不同。微信小程序组件的接入跟第二个问题完美契合，在原有的小程序开发过程中或许已经产出了常用组件，又或是使用着某个微信小程序的组件库，当使用 CML 进行开发时，避免了二次开发原有组件的成本。")]),t._v(" "),n("h4",{attrs:{id:"怎么引入微信小程序组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#怎么引入微信小程序组件"}},[t._v("#")]),t._v(" 怎么引入微信小程序组件")]),t._v(" "),n("p",[t._v("第一类是微信小程序支持的组件，比如"),n("code",[t._v("view")]),t._v(" "),n("code",[t._v("text")]),t._v("等，详细请查看"),n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/component/",target:"_blank",rel:"noopener noreferrer"}},[t._v("微信小程序组件列表"),n("OutboundLink")],1),t._v("，如果这样的组件已经满足开发需求，那么就可以直接使用了：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list.wx.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("l in list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ l }}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("第二类是原有的组件，首先你需要将组件复制到 CML 项目中，然后只需要在 CML 组件中声明式引入该组件即可使用。\n还是以"),n("code",[t._v("list")]),t._v("组件为例，假设原有封装好的微信小程序的组件"),n("code",[t._v("custom-list")]),t._v("，目录结构如下：")]),t._v(" "),n("div",{staticClass:"language-bash extra-class"},[n("pre",{pre:!0,attrs:{class:"language-bash"}},[n("code",[t._v("├── components                      // 组件文件夹\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   ├── custom-list\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   ├── custom-list.wxml\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   ├── custom-list.wxss\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   ├── custom-list.js\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   └── custom-list.json\n")])])]),n("p",[t._v("那么，在 list.wx.cml 中可以直接引用：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list.wx.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-list")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("list")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("custom-list")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n...\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n  "base": {\n    "usingComponents": {\n      "custom-list": "/components/custom-list/custom-list"\n    }\n  }\n}\n')])])]),n("blockquote",[n("p",[t._v("需要注意的是组件路径需要写到.wxml 层级，但是不带后缀。")])]),t._v(" "),n("p",[t._v("第三类是微信小程序的组件库，这里以"),n("a",{attrs:{href:"https://weapp.iviewui.com/docs/guide/start",target:"_blank",rel:"noopener noreferrer"}},[t._v("iVew Webapp"),n("OutboundLink")],1),t._v("为例，首先需要将其代码下载下来放到 CML 项目中，假设目录结构如下：")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("├── components                      // 组件文件夹\n|   ├── iview\n|   |   ├── action-sheet\n|   |   |   ├── index.js\n|   |   |   ├── index.json\n|   |   |   ├── index.wxml\n|   |   |   └── index.wxss\n|   |   ├── alert\n|   |   ├── avatar\n|   |   └── ...\n")])])]),n("p",[t._v("这里我们需要使用 action-sheet 组件只需要如下即可：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- component.wx.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("action-sheet")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("action-sheet")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n...\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n  "base": {\n    "usingComponents": {\n      "action-sheet": "/components/iview/action-sheet/index"\n    }\n  }\n}\n')])])]),n("blockquote",[n("p",[t._v("需要注意的是组件路径需要写到.wxml 层级，但是不带后缀。")])]),t._v(" "),n("h4",{attrs:{id:"示例-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#示例-5"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),n("p",[t._v("详细示例戳这里"),n("RouterLink",{attrs:{to:"/tutorial/poly-component.html"}},[t._v("多态组件扩展")])],1),t._v(" "),n("h2",{attrs:{id:"支付宝小程序"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#支付宝小程序"}},[t._v("#")]),t._v(" 支付宝小程序")]),t._v(" "),n("p",[t._v("组件开发模式\n"),n("img",{attrs:{src:s(151)}})]),t._v(" "),n("h3",{attrs:{id:"小程序组件接入-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序组件接入-2"}},[t._v("#")]),t._v(" 小程序组件接入")]),t._v(" "),n("p",[t._v("chameleon 允许在多态组件中直接引入支付宝小程序组件，如果你已经封装了支付宝小程序的组件，如果你已经在用支付宝小程序的组件库，不用担心，在 CML 项目中你仍然可以使用。")]),t._v(" "),n("h4",{attrs:{id:"为什么要接入支付宝小程序组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#为什么要接入支付宝小程序组件"}},[t._v("#")]),t._v(" 为什么要接入支付宝小程序组件")]),t._v(" "),n("p",[t._v("多态组件存在的差异不过来自于各端需求不同，又或是各端实现方式的不同。支付宝小程序组件的接入跟第二个问题完美契合，在原有的小程序开发过程中或许已经产出了常用组件，又或是使用着某个支付宝小程序的组件库，当使用 CML 进行开发时，避免了二次开发原有组件的成本。")]),t._v(" "),n("h4",{attrs:{id:"怎么引入支付宝小程序组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#怎么引入支付宝小程序组件"}},[t._v("#")]),t._v(" 怎么引入支付宝小程序组件")]),t._v(" "),n("p",[t._v("第一类是支付宝小程序支持的组件，比如"),n("code",[t._v("view")]),t._v(" "),n("code",[t._v("text")]),t._v("等，详细请查看"),n("a",{attrs:{href:"https://docs.alipay.com/mini/component/overview",target:"_blank",rel:"noopener noreferrer"}},[t._v("支付宝小程序组件列表"),n("OutboundLink")],1),t._v("，如果这样的组件已经满足开发需求，那么就可以直接使用了：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list.alipay.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("l in list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ l }}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("第二类是原有的组件，首先你需要将组件复制到 CML 项目中，然后只需要在 CML 组件中声明式引入该组件即可使用。\n还是以"),n("code",[t._v("list")]),t._v("组件为例，假设原有封装好的支付宝小程序的组件"),n("code",[t._v("custom-list")]),t._v("，目录结构如下：")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("├── components                      // 组件文件夹\n|   ├── custom-list\n|   |   ├── custom-list.axml\n|   |   ├── custom-list.acss\n|   |   ├── custom-list.js\n|   |   └── custom-list.json\n")])])]),n("p",[t._v("那么，在 list.alipay.cml 中可以直接引用：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list.alipay.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-list")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("list")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("custom-list")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n...\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n  "base": {\n    "usingComponents": {\n      "custom-list": "/components/custom-list/custom-list"\n    }\n  }\n}\n')])])]),n("blockquote",[n("p",[t._v("需要注意的是组件路径需要写到.axml 层级，但是不带后缀。")])]),t._v(" "),n("h4",{attrs:{id:"示例-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#示例-6"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),n("p",[t._v("详细示例戳这里"),n("RouterLink",{attrs:{to:"/tutorial/poly-component.html"}},[t._v("多态组件扩展")])],1),t._v(" "),n("h2",{attrs:{id:"百度小程序"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#百度小程序"}},[t._v("#")]),t._v(" 百度小程序")]),t._v(" "),n("p",[t._v("组件开发模式\n"),n("img",{attrs:{src:s(151)}})]),t._v(" "),n("h3",{attrs:{id:"小程序组件接入-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序组件接入-3"}},[t._v("#")]),t._v(" 小程序组件接入")]),t._v(" "),n("p",[t._v("chameleon 允许在多态组件中直接引入百度小程序组件，如果你已经封装了百度小程序的组件，如果你已经在用百度小程序的组件库，不用担心，在 CML 项目中你仍然可以使用。")]),t._v(" "),n("h4",{attrs:{id:"为什么要接入百度小程序组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#为什么要接入百度小程序组件"}},[t._v("#")]),t._v(" 为什么要接入百度小程序组件")]),t._v(" "),n("p",[t._v("多态组件存在的差异不过来自于各端需求不同，又或是各端实现方式的不同。百度小程序组件的接入跟第二个问题完美契合，在原有的小程序开发过程中或许已经产出了常用组件，又或是使用着某个百度小程序的组件库，当使用 CML 进行开发时，避免了二次开发原有组件的成本。")]),t._v(" "),n("h4",{attrs:{id:"怎么引入百度小程序组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#怎么引入百度小程序组件"}},[t._v("#")]),t._v(" 怎么引入百度小程序组件")]),t._v(" "),n("p",[t._v("第一类是百度小程序支持的组件，比如"),n("code",[t._v("view")]),t._v(" "),n("code",[t._v("text")]),t._v("等，详细请查看"),n("a",{attrs:{href:"https://smartprogram.baidu.com/docs/develop/component/view/",target:"_blank",rel:"noopener noreferrer"}},[t._v("百度小程序组件列表"),n("OutboundLink")],1),t._v("，如果这样的组件已经满足开发需求，那么就可以直接使用了：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list.baidu.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("l in list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ l }}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("第二类是原有的组件，首先你需要将组件复制到 CML 项目中，然后只需要在 CML 组件中声明式引入该组件即可使用。\n还是以"),n("code",[t._v("list")]),t._v("组件为例，假设原有封装好的百度小程序的组件"),n("code",[t._v("custom-list")]),t._v("，目录结构如下：")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("├── components                      // 组件文件夹\n|   ├── custom-list\n|   |   ├── custom-list.swan\n|   |   ├── custom-list.css\n|   |   ├── custom-list.js\n|   |   └── custom-list.json\n")])])]),n("p",[t._v("那么，在 list.baidu.cml 中可以直接引用：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list.baidu.cml --\x3e")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-list")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("list")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("custom-list")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n...\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("cml-type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n  "base": {\n    "usingComponents": {\n      "custom-list": "/components/custom-list/custom-list"\n    }\n  }\n}\n')])])]),n("blockquote",[n("p",[t._v("需要注意的是组件路径需要写到.swan 层级，但是不带后缀。")])]),t._v(" "),n("h4",{attrs:{id:"示例-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#示例-7"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),n("p",[t._v("详细示例戳这里"),n("RouterLink",{attrs:{to:"/tutorial/poly-component.html"}},[t._v("多态组件扩展")])],1)])}),[],!1,null,null,null);a.default=e.exports}}]);