Skip to content

C
Chameleon

DiDi / Chameleon

通知 13
Star 1
Fork 0
C
Chameleon

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
first-cml-app.html 73.5 KB
Newer Older
J
doc: update  
JiM-W 已提交
1 2 3 4 5 6 7 8 9 10 
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>开发第一个 CML 应用 | Chameleon 变色龙</title>
    <meta name="description" content="一套代码运行多端，一端所见即多端所见">
    <meta name="generator" content="VuePress 1.4.0">
    <link rel="icon" href="/brand/logo.png">
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
11 12 
    <link rel="preload" href="/assets/css/0.styles.54ae56e3.css" as="style"><link rel="preload" href="/assets/js/app.bcfec7ef.js" as="script"><link rel="preload" href="/assets/js/60.7feedc98.js" as="script"><link rel="preload" href="/assets/js/1.b97c77c7.js" as="script"><link rel="preload" href="/assets/js/58.ebf8ba39.js" as="script"><link rel="preload" href="/assets/js/2.d28a060e.js" as="script"><link rel="prefetch" href="/assets/js/10.051c47d1.js"><link rel="prefetch" href="/assets/js/11.2aa2c0dc.js"><link rel="prefetch" href="/assets/js/12.c44665a3.js"><link rel="prefetch" href="/assets/js/13.70dfc111.js"><link rel="prefetch" href="/assets/js/14.6a71260e.js"><link rel="prefetch" href="/assets/js/15.705c4158.js"><link rel="prefetch" href="/assets/js/16.71245a0d.js"><link rel="prefetch" href="/assets/js/17.1a08cd91.js"><link rel="prefetch" href="/assets/js/18.e24096cc.js"><link rel="prefetch" href="/assets/js/19.8a8e69c2.js"><link rel="prefetch" href="/assets/js/20.cfee8d18.js"><link rel="prefetch" href="/assets/js/21.659a4f9f.js"><link rel="prefetch" href="/assets/js/22.ca78fab7.js"><link rel="prefetch" href="/assets/js/23.28baa1bb.js"><link rel="prefetch" href="/assets/js/24.c0a085ec.js"><link rel="prefetch" href="/assets/js/25.2f0d69d1.js"><link rel="prefetch" href="/assets/js/26.205c20fa.js"><link rel="prefetch" href="/assets/js/27.5314d987.js"><link rel="prefetch" href="/assets/js/28.0087c8dc.js"><link rel="prefetch" href="/assets/js/29.70de71c9.js"><link rel="prefetch" href="/assets/js/30.9c7a51df.js"><link rel="prefetch" href="/assets/js/31.a0c45279.js"><link rel="prefetch" href="/assets/js/32.b68995bf.js"><link rel="prefetch" href="/assets/js/33.5ebcc272.js"><link rel="prefetch" href="/assets/js/34.76b8c9f0.js"><link rel="prefetch" href="/assets/js/35.6d4c26dc.js"><link rel="prefetch" href="/assets/js/36.70afd6a5.js"><link rel="prefetch" href="/assets/js/37.d40c4e19.js"><link rel="prefetch" href="/assets/js/38.3f0d946f.js"><link rel="prefetch" href="/assets/js/39.def09b51.js"><link rel="prefetch" href="/assets/js/40.7f6b7784.js"><link rel="prefetch" href="/assets/js/41.a0de49d9.js"><link rel="prefetch" href="/assets/js/42.8c3379e9.js"><link rel="prefetch" href="/assets/js/43.a81a4bb3.js"><link rel="prefetch" href="/assets/js/44.a26444fd.js"><link rel="prefetch" href="/assets/js/45.1393dfc0.js"><link rel="prefetch" href="/assets/js/46.e2ebc893.js"><link rel="prefetch" href="/assets/js/47.4da9ab59.js"><link rel="prefetch" href="/assets/js/48.2fdfc375.js"><link rel="prefetch" href="/assets/js/49.f9d1a56b.js"><link rel="prefetch" href="/assets/js/5.1068e2bd.js"><link rel="prefetch" href="/assets/js/50.1ceb9d3f.js"><link rel="prefetch" href="/assets/js/51.a255833a.js"><link rel="prefetch" href="/assets/js/52.98e72823.js"><link rel="prefetch" href="/assets/js/53.03ba08cb.js"><link rel="prefetch" href="/assets/js/54.9d82aee4.js"><link rel="prefetch" href="/assets/js/55.4956ad06.js"><link rel="prefetch" href="/assets/js/56.5f511c62.js"><link rel="prefetch" href="/assets/js/57.9806475a.js"><link rel="prefetch" href="/assets/js/59.ebca6969.js"><link rel="prefetch" href="/assets/js/6.25d813cf.js"><link rel="prefetch" href="/assets/js/61.45ebc898.js"><link rel="prefetch" href="/assets/js/62.3a2ee585.js"><link rel="prefetch" href="/assets/js/63.310dd45c.js"><link rel="prefetch" href="/assets/js/64.5cc72cbe.js"><link rel="prefetch" href="/assets/js/65.fdc686c2.js"><link rel="prefetch" href="/assets/js/66.7730cd91.js"><link rel="prefetch" href="/assets/js/67.5c4cc3ba.js"><link rel="prefetch" href="/assets/js/68.35e45285.js"><link rel="prefetch" href="/assets/js/69.f52c6d25.js"><link rel="prefetch" href="/assets/js/7.9a617213.js"><link rel="prefetch" href="/assets/js/70.fb558cc9.js"><link rel="prefetch" href="/assets/js/71.bb886562.js"><link rel="prefetch" href="/assets/js/72.3c87e0a1.js"><link rel="prefetch" href="/assets/js/73.4cd26a47.js"><link rel="prefetch" href="/assets/js/74.ae876b8f.js"><link rel="prefetch" href="/assets/js/75.80730e6c.js"><link rel="prefetch" href="/assets/js/76.3eca2e20.js"><link rel="prefetch" href="/assets/js/77.5f4c3e9b.js"><link rel="prefetch" href="/assets/js/78.991d2007.js"><link rel="prefetch" href="/assets/js/79.2798e216.js"><link rel="prefetch" href="/assets/js/8.b158ec59.js"><link rel="prefetch" href="/assets/js/80.c095fb3b.js"><link rel="prefetch" href="/assets/js/81.e408e60b.js"><link rel="prefetch" href="/assets/js/82.cc25d73a.js"><link rel="prefetch" href="/assets/js/83.356558e4.js"><link rel="prefetch" href="/assets/js/84.8866a75b.js"><link rel="prefetch" href="/assets/js/85.87eac94e.js"><link rel="prefetch" href="/assets/js/86.76900837.js"><link rel="prefetch" href="/assets/js/87.103b6b87.js"><link rel="prefetch" href="/assets/js/88.94e419d1.js"><link rel="prefetch" href="/assets/js/89.8be3decb.js"><link rel="prefetch" href="/assets/js/9.dc5cb60e.js"><link rel="prefetch" href="/assets/js/90.48dae3fa.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.1b18fdaf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.54ae56e3.css">
J
doc: update  
JiM-W 已提交
13 14 
  </head>
  <body>
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
15 
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/brand/logo.png" alt="Chameleon 变色龙" class="logo"> <span class="site-name can-hide">Chameleon 变色龙</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
J
doc: update  
JiM-W 已提交
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link router-link-active">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link router-link-active">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>教程</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/tutorial/first-cml-app.html" class="active sidebar-link">开发第一个 CML 应用</a></li><li><a href="/tutorial/web-wx-only-app.html" class="sidebar-link">只跨 Web 与小程序的应用</a></li><li><a href="/tutorial/bytedance-cml-app.html" class="sidebar-link">字节跳动小程序体验</a></li><li><a href="/tutorial/quickapp-cml-app.html" class="sidebar-link">快应用体验</a></li><li><a href="/tutorial/poly-api.html" class="sidebar-link">实现多态 API</a></li><li><a href="/tutorial/poly-component.html" class="sidebar-link">实现多态 ECharts 组件</a></li><li><a href="/tutorial/export-cml-component.html" class="sidebar-link">普通项目使用 CML 跨端组件</a></li><li><a href="/tutorial/webpack-with-cml.html" class="sidebar-link">webpack 集成 CML</a></li><li><a href="/tutorial/build-config.html" class="sidebar-link">项目工程化配置</a></li><li><a href="/tutorial/deploy-guide.html" class="sidebar-link">项目上线指南</a></li><li><a href="/tutorial/bundle-splitting.html" class="sidebar-link">使用项目分包</a></li><li><a href="/tutorial/android-sdk.html" class="sidebar-link">CML Android SDK 使用范例</a></li><li><a href="/tutorial/ios-sdk.html" class="sidebar-link">CML iOS SDK 使用范例</a></li><li><a href="/tutorial/use-gestures.html" class="sidebar-link">卡片拖拽手势删除效果</a></li><li><a href="/tutorial/normal-vs-cml.html" class="sidebar-link">普通跨端 vs CML</a></li><li><a href="/tutorial/editor-plugin.html" class="sidebar-link">编辑器插件</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="开发第一个-cml-应用"><a href="#开发第一个-cml-应用" class="header-anchor">#</a> 开发第一个 CML 应用</h1> <p>跟随这个教程，开启你的 CML 跨端开发。</p> <h2 id="视频教程"><a href="#视频教程" class="header-anchor">#</a> 视频教程</h2> <p><video width="100%" src="http://sfwb.didistatic.com/static/wb/5%E5%88%86%E9%92%9F.mp4" controls="controls"></video></p> <h2 id="起步"><a href="#起步" class="header-anchor">#</a> 起步</h2> <h3 id="安装运行环境"><a href="#安装运行环境" class="header-anchor">#</a> 安装运行环境</h3> <p>开发 CML 项目的第一步是要安装运行环境和全局安装 chameleon-tool。</p> <blockquote><p>**[success] 运行环境 **</p> <p><a href="https://nodejs.org/en/download/" target="_blank" rel="noopener noreferrer">node<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>&gt;= 8.10.0
npm &gt;= 5.6.0</p></blockquote> <p>建议安装使用<a href="https://github.com/creationix/nvm" target="_blank" rel="noopener noreferrer">nvm<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>管理 node 版本。</p> <h3 id="安装命令行工具"><a href="#安装命令行工具" class="header-anchor">#</a> 安装命令行工具</h3> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> i -g chameleon-tool
</code></pre></div><p><b style="font-size:14px;">注：暂不支持使用 yarn、cnpm 等第三方 npm 工具进行安装。</b></p> <p>安装成功后，执行 <code>cml -v</code> 即可查看当前版本， <code>cml -h</code>查看命令行帮助文档，更多命令参见<a href="/docs/setup.html">命令行工具</a>。接下来就可以使用它快速的创建 CML 项目。</p> <h3 id="创建与启动第一个-cml-项目"><a href="#创建与启动第一个-cml-项目" class="header-anchor">#</a> 创建与启动第一个 CML 项目</h3> <ul><li>执行 <code>cml init project</code></li> <li>输入项目名称</li> <li>等待自动执行 npm install 依赖</li> <li>切换到项目根目录执行<code>cml dev</code></li> <li>会自动打开预览界面 预览界面如下：</li></ul> <p><img src="/assets/img/home2.127662cd.png" alt=""></p> <p>Web 端可以点击模拟器内页面右上角打开新的浏览器窗口。</p> <p>Native 端的效果请下载 <a href="https://beatles-chameleon.github.io/playground/download.md" target="_blank" rel="noopener noreferrer">CML playground<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>(目前可下载 Android 端，iOS 端即将发布)或者下载 <a href="http://weex.apache.org/cn/tools/playground.md" target="_blank" rel="noopener noreferrer">Weex playground<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>扫码预览</p> <p>微信小程序端请下载<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.md" target="_blank" rel="noopener noreferrer">微信开发者工具<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，打开项目根目录下的 <code>/dist/wx</code> 目录预览。
支付宝小程序端请下载<a href="https://docs.alipay.com/mini/ide/download" target="_blank" rel="noopener noreferrer">支付宝开发者工具<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，打开项目根目录下的 <code>/dist/alipay</code> 目录预览。
百度小程序端请下载<a href="https://smartprogram.baidu.com/docs/develop/tutorial/index_first/" target="_blank" rel="noopener noreferrer">百度开发者工具<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，打开项目根目录下的 <code>/dist/baidu</code> 目录预览。</p> <p>接下来，我们一起看看 CML 项目的目录结构与代码构成。</p> <h2 id="目录结构与代码构成"><a href="#目录结构与代码构成" class="header-anchor">#</a> 目录结构与代码构成</h2> <h3 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h3> <p>刚刚生成 CML 项目的目录结构如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code>├── chameleon.config.js                 // 项目的配置文件
├── dist                                // 打包产出目录
├── mock                                // 模拟数据目录
├── node_modules                        // npm包依赖，基于多态协议直接使用各端原生组件
├── package.json
└── src                                 // 项目源代码
    ├── app                             // app入口
    ├── components                      // 组件文件夹
    ├── pages                           // 页面文件夹
    ├── router.config.json              // 路由配置文件
    └── store                           // 全局状态管理
</code></pre></div><blockquote><p> 编辑器中语法高亮，暂时使用 <code>.vue</code> 的插件，参见<a href="/tutorial/editor-plugin.html">编辑器插件</a>，后续会推出更强大的插件。</p></blockquote> <p>CML 的目录结构将组件、页面、路由、 全局状态管理、静态资源、模拟数据等按照功能进行划分。更多参见<a href="/docs/folder.html">目录结构</a>。
你可以留意到这个项目中的 app 入口、组件和页面下都是<code>.cml</code>为后缀的文件，接下来我们就看看<code>.cml</code>文件代码构成。</p> <h3 id="cml-文件代码构成"><a href="#cml-文件代码构成" class="header-anchor">#</a> .cml 文件代码构成</h3> <p> 从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，同样道理，CML 中采用的是 CML + CMSS + JS。我们定义了扩展名为<code>.cml</code>的文件  将一个组件需要的所有部分组合（CML、CMSS、JS 逻辑交互、JSON 配置）在一起，更方便开发。</p> <h4 id="cml"><a href="#cml" class="header-anchor">#</a> CML</h4> <p>CML（Chameleon Markup Language）用于描述页面的结构，我们知道 HTML 是有一套标准的语义化标签，例如文本是<code>&lt;span&gt;</code> 按钮是<code>&lt;button&gt;</code>。CML 同样具有一套标准的标签，我们将标签定义为<code>组件</code>，CML 为用户提供了一系列<a href="/components/base.html">组件</a>。CML 中还支持<b>模板语法</b>，例如条件渲染、列表渲染，数据绑定等等，更多参见 <a href="/docs/cml.html">CML</a>。简单举例：</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 数据绑定与计算属性 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>class1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ message2 }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 条件与循环渲染 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">c-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{showlist}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">c-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">c-for-index</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>idx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">c-for-item</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>itemName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">c-key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>city<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span> {{ idx }}: {{ itemName.city }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 事件绑定 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">c-bind:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>changeShow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>切换展示<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">class</span> <span class="token class-name">Index</span> <span class="token punctuation">{</span>
  data <span class="token operator">=</span> <span class="token punctuation">{</span>
    message<span class="token operator">:</span> <span class="token string">'HelloCML'</span><span class="token punctuation">,</span>
    array<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        city<span class="token operator">:</span> <span class="token string">'北京'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        city<span class="token operator">:</span> <span class="token string">'上海'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        city<span class="token operator">:</span> <span class="token string">'广州'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    showlist<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  computed <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">message2</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token string">'computed'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  watch <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">showlist</span><span class="token punctuation">(</span><span class="token parameter">newVal<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">showlist changed:</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span> newVal<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">changeShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>showlist <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>showlist<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>同时，CML 支持使用<a href="/docs/cml-vue.html">类 VUE 语法</a>，让你更快入手。</p> <h4 id="cmss"><a href="#cmss" class="header-anchor">#</a> CMSS</h4> <p>CMSS(Chameleon Style Sheets)用于描述 CML 页面结构的样式语言，其具有大部分 CSS 的特性，也做了一些扩充和修改。</p> <ul><li>1 支持 css 的预处语言<code>less</code>与 <code>stylus</code>。</li> <li>2 新增了尺寸单位 <code>cpx</code>。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。CMSS 在底层支持新的尺寸单位 cpx ，开发者可以免去换算的烦恼，只要交给 CML 底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。</li> <li>3 为了各端样式一致性，内置了一些一致性基础样式。</li> <li>4 CML 布局模型基于 CSS Flexbox，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。</li> <li>5 <code>.cml</code> 文件中支持样式多态，即可以针对不同的平台写不同的样式。</li> <li>6 如果只跨 Web 和小程序端，CMSS 将会更加灵活。
简单举例：</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'./global.css'</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@size</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span></span>

<span class="token selector">.header</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@size</span><span class="token punctuation">;</span></span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@size</span><span class="token punctuation">;</span></span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>更多参见 <a href="/docs/cmss.html">CMSS</a>。</p> <h4 id="js-逻辑交互"><a href="#js-逻辑交互" class="header-anchor">#</a> JS 逻辑交互</h4> <p>JS 语法用于处理页面的逻辑部分，cml 文件<code>&lt;script&gt;&lt;/script&gt;</code>标签中的<code>export default</code>导出的 VM 对象即采用 JS 语法。它负责业务逻辑、交互逻辑的处理与驱动视图更新，拥有完整的生命周期，watch，computed，数据双向绑定等优秀的特性，能够快速提高开发速度、降低维护成本。</p> <ul><li>data 为数据。</li> <li>props 为属性，父组件进行传递。</li> <li>computed 为计算属性， 是动态的数据，可以对数据进行逻辑处理后返回结果。</li> <li>watch 为侦听属性，监听数据的变化，触发相应操作。</li> <li>methods 为方法 ，处理业务逻辑与交互逻辑。</li> <li>beforeCreate、created 等生命周期，掌握生命周期的触发时机，做相应操作。
简单举例：</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">class</span> <span class="token class-name">Index</span> <span class="token punctuation">{</span>
  <span class="token comment">// data</span>
  data <span class="token operator">=</span>  <span class="token punctuation">{</span>
    message<span class="token operator">:</span> <span class="token string">'Hello'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 计算属性</span>
  computed <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">reversedMessage</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 观察数据变化</span>
  watch<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">message</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newV<span class="token punctuation">,</span> oldV</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 各种生命周期</span>
  <span class="token function-variable function">mounted</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 模板或者html编译完成,且渲染到dom中完成,在整个vue的生命周期中只执行一次</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><p>更多参见<a href="/docs/logic.html">逻辑层</a>。</p> <h4 id="json-配置"><a href="#json-配置" class="header-anchor">#</a> JSON 配置</h4> <p>JSON 配置部分用于描述应用、页面或组件的配置信息，对应于小程序的 json 配置文件。可以在其中为各端做不同的配置。举例如下，<code>base</code>对象为各端共用的配置对象,都引组件<code>demo-com</code>。<code>wx、alipay、baidu</code> 分别对应生成微信小程序、支付宝小程序和百度小程序的各自配置。更多参见<a href="/docs/config.html#组件配置">组件配置</a>。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script cml<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;json&quot;</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>
  <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">&quot;demo-com&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/components/demo-com/demo-com&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">&quot;wx&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dark&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#E2E2E2&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">&quot;alipay&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;defaultTitle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;pullRefresh&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token string">&quot;allowsBounceVertical&quot;</span><span class="token operator">:</span> <span class="token string">&quot;YES&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;titleBarColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#ffffff&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">&quot;baidu&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;navigationBarBackgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#ffffff&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;navigationBarTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;white&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#ffffff&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dark&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;enablePullDownRefresh&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token string">&quot;onReachBottomDistance&quot;</span><span class="token operator">:</span> <span class="token number">50</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><p> 通过以上对于 CML、CMSS、JS 交互逻辑以及 JSON 配置的学习，你已经具备了开发 CML 的页面和组件的能力, 可以参考<a href="/tutorial/use-gestures.html">卡片拖拽手势删除效果</a>实现你想要的页面效果。但要想快速开发还需要掌握 CML 提供的组件和 API。</p> <h2 id="开发能力"><a href="#开发能力" class="header-anchor">#</a> 开发能力</h2> <h3 id="组件"><a href="#组件" class="header-anchor">#</a> 组件</h3> <p>CML 提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成需要的功能。
就像 HTML 的 div, p 等标签一样，在 CML 里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要一个 switch 开关组件，你只需要这样写：</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>switch</span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{ switchValue }}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">c-bind:</span>change</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>switchChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>switch</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">class</span> <span class="token class-name">Switch</span> <span class="token punctuation">{</span>
  data <span class="token operator">=</span> <span class="token punctuation">{</span>
    switchValue<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">switchChange</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>switchValue <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Switch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">cml-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token punctuation">{</span>
  <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现，例如 <code>checked</code> 属性用于控制 <code>switch</code> 的开关状态:
组件的内部行为也会通过事件的形式让开发者可以感知，例如 <code>c-bind:change</code> 绑定 <code>change</code> 事件的处理函数为 <code>switchChange</code> 方法，在该方法中拿到改变的值，修改 <code>switchValue</code> 的值。
更多的组件的使用参见<a href="/components/base.html">组件</a>。</p> <h3 id="api"><a href="#api" class="header-anchor">#</a> API</h3> <p>CML 封装了丰富的基础 API 库 <code>chameleon-api</code> 供开发者使用，这些 api 屏蔽了各平台的底层接口差异，例如数据存储功能，我们只需要这样使用，而不需要关心各端数据存储接口的差异。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> cml <span class="token keyword">from</span> <span class="token string">'chameleon-api'</span><span class="token punctuation">;</span>
cml<span class="token punctuation">.</span><span class="token function">setStorage</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'chameleon'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>例如弹出 toast 方法，只需要这样使用：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> cml <span class="token keyword">from</span> <span class="token string">'chameleon-api'</span><span class="token punctuation">;</span>
cml<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  message<span class="token operator">:</span> <span class="token string">'HelloCML'</span><span class="token punctuation">,</span>
  duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>注意：接口均以 promise 形式进行返回，所以你可以结合异步流程控制如 async、await 进行操作。
更多 API 能力参见 <a href="/api/">API</a></p> <h3 id="路由配置"><a href="#路由配置" class="header-anchor">#</a> 路由配置</h3> <p>CML 项目是应用级的项目，应用内允许多个页面的存在，下面学习项目中多个页面之间的路由配置与跨应用之间的跳转。
CML 项目内置了一套各端统一的路由配置方式，项目根目录下的 <code>src/router.config.json</code> 是路由的配置文件,内容如下:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
  <span class="token string">&quot;mode&quot;</span><span class="token operator">:</span> <span class="token string">&quot;history&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;domain&quot;</span><span class="token operator">:</span> <span class="token string">&quot;https://www.chameleon.com&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;routes&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/cml/h5/index&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/pages/index/index&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;mock&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index.php&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>mode 为 Web 端路由模式，分为<code>hash</code>或<code>history</code>。</li> <li>domain 为 Web 端地址的域名。</li> <li>routes 为路由配置
<ul><li>path 为路由对应的 cml 文件的路径,以 src 目录下开始的绝对路径，以/开头。</li> <li>url 为 Web 端的访问路径</li> <li>mock 为该路由对应的<a href="/docs/build.html#数据-mock">mock 文件</a>(仅模拟模板下发需要)</li></ul></li> <li>小程序端，构建时会将<code>router.config.json</code>的内容，插入到 app.json 的 pages 字段，实现小程序端的路由。</li></ul> <p>路由跳转分为应用内跳转和应用间跳转，<code>chameleon-api</code> 都提供了相应的方法：</p> <ul><li>navigateTo 打开新页面</li> <li>redirectTo 页面重定向</li> <li>navigateBack 页面返回</li> <li>open 打开其他应用页面</li></ul> <p>例如应用内打开新页面：</p> <div class="language- extra-class"><pre class="language-text"><code>import cml from 'chameleon-api';
cml.navigateTo({
  path: '/pages/page2/page2'
})

</code></pre></div><p>更多参见<a href="/docs/config.html#路由配置">路由配置</a>。</p> <h3 id="数据管理"><a href="#数据管理" class="header-anchor">#</a> 数据管理</h3> <p>当项目中的组件和页面越来越多，越来越复杂后，他们之间会出现共同管理数据状态的情况，这时我们建议使用 CML 提供的全局数据管理 <code>chameleon-store</code> 进行管理，它位于项目根目录下的<code>src/store</code> 中，目录结构如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code>└── store
    ├── action-types.js   <span class="token comment"># 定义 actions 的类型</span>
    ├── actions.js        <span class="token comment"># 根级别的 actions</span>
    ├── getter-types.js   <span class="token comment"># 定义 getters 的类型</span>
    ├── getters.js        <span class="token comment"># 根级别的 getters</span>
    ├── index.js          <span class="token comment"># 我们组装模块并导出 store 的地方</span>
    ├── mutation-types.js <span class="token comment"># 定义 mutations 的类型</span>
    ├── mutations.js      <span class="token comment"># 根级别的 mutation</span>
    ├── state.js          <span class="token comment"># 组件初始状态数据</span>
    └── modules           <span class="token comment"># 子模块</span>
        ├── <span class="token punctuation">..</span>.
</code></pre></div><p>类似 Vuex 数据理念和语法规范，chameleon-store 主要有以下核心概念：</p> <ul><li><a href="/docs/store.html#state">state</a></li> <li><a href="/docs/store.html#getters">getters</a></li> <li><a href="/docs/store.html#mutation">mutation</a></li> <li><a href="/docs/store.html#action">action</a></li> <li><a href="/docs/store.html#module">子模块</a></li></ul> <p>通过 <code>chameleon-store</code> 创建的 <code>store</code> 实例,方法如下：<code>ChameleonStore.createStore(options: Object): Object</code>，更多参见<a href="/docs/store.html">数据管理</a>。</p> <p>可以通过<code>cml init project --demo todo</code> 初始化<code>todo</code> 示例 demo，学习其中对于数据管理的使用。</p> <h3 id="自由定制-api-和组件"><a href="#自由定制-api-和组件" class="header-anchor">#</a> 自由定制 API 和组件</h3> <p>目前学习到现在， 我们都是利用一套代码实现多端的开发，但是当你遇到特殊的情况时，一套代码无法满足多端的需求时，CML 提供的多态协议，可以让你自由的扩展 API 和组件。有如下几种情况：</p> <ul><li>第一 定制化的组件，比如要使用 ECharts 组件，这时就需要使用多态组件实现，例如<a href="/tutorial/poly-component.html">实现多态 ECharts</a>。</li> <li>第二 定制化的底层接口，可以参考<a href="/tutorial/poly-api.html">实现多态 API</a>。</li> <li>第三 业务需求导致的各端差异化实现，比如 Web 端和小程序要有不用的逻辑处理，可以利用<a href="/docs/poly.html#多态组件">多态组件</a>和<a href="/docs/poly.html#多态接口">多态接口</a>实现。</li></ul> <p>注：多态协议是 CML 业务层代码和各端底层组件和接口的分界点，是跨端底层差异化的解决方案，普通用户开发基本上使用不到多态协议，因为 CML 已经使用多态协议封装了丰富的组件和接口。</p> <h2 id="工程化能力"><a href="#工程化能力" class="header-anchor">#</a> 工程化能力</h2> <p>当我们执行<code>cml dev</code>进行开发时，就已经使用了 CML 的工程化能力，如果还想使用热更新与自动刷新、调试窗口、Mock 数据、代码的压缩、资源发布路径、打包资源分析、文件指纹等功能就需要进一步的学习。</p> <p>Mock 数据是本地开发必不可少的工作，CML 项目中在 <code>mock</code> 文件夹的文件中写 express 中间件的形式 Mock 数据,更多参见<a href="/docs/build.html#数据-mock">数据 Mock</a>，例如：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    method<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'post'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    path<span class="token operator">:</span> <span class="token string">'/api/getMessage'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">controller</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        total<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        message<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">'HelloCML'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><p>CML 的其他工程化配置统一收敛在项目根目录下的<code>chameleon.config.js</code>文件，在该文件中可以使用全局对象 CML 的 api 去操作配置对象。例如：</p> <p>配置当前项目支持的端</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>cml<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function">merge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  platforms<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'web'</span><span class="token punctuation">,</span> <span class="token string">'wx'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>配置是否进行文件压缩</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>cml<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function">merge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  web<span class="token operator">:</span> <span class="token punctuation">{</span>
    dev<span class="token operator">:</span> <span class="token punctuation">{</span>
      minimize<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>配置资源发布路径，分离线上和线下的资源路径。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>cml<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function">merge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  web<span class="token operator">:</span> <span class="token punctuation">{</span>
    build<span class="token operator">:</span> <span class="token punctuation">{</span>
      publicPath<span class="token operator">:</span> <span class="token string">'http://www.chameleon.com/static'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>更多配置参见<a href="/docs/config.html">工程配置</a></p> <h2 id="渐进式跨端"><a href="#渐进式跨端" class="header-anchor">#</a> 渐进式跨端</h2> <p>如果你既想一套代码运行多端，又不用大刀阔斧的重构项目，可以将多端重用组件用 CML 开发，直接在原有项目里面调用。参见<a href="/docs/io.html">导入与导出</a>。也有如下手把手实例进行参考</p> <ul><li><a href="/tutorial/export-cml-component.html">普通项目使用 CML 跨端组件</a></li> <li><a href="/tutorial/webpack-with-cml.html">webpack 集成 CML</a></li></ul> <h2 id="端渲染能力接入"><a href="#端渲染能力接入" class="header-anchor">#</a> 端渲染能力接入</h2> <p>如果你需要跨 Native 端渲染，则需要接入 CML SDK，目前支持的渲染引擎是 Weex，即将支持 React Native，使用时二者选其一作为项目的 Native 渲染引擎。CML SDK 包括对原生组件和本地 api 能力的扩展，对性能和稳定性的优化。使用方式可以参见 <a href="/tutorial/android-sdk.html">CML Android SDK</a> 与 <a href="/tutorial/ios-sdk.html">CML iOS SDK</a>。</p> <h2 id="智能规范校验"><a href="#智能规范校验" class="header-anchor">#</a> 智能规范校验</h2> <p>CML 提供了多种规范校验，对这些规范的学习可以提高开发效率，保证代码质量。
接口校验语法是使用多态协议扩展多态组件和多态接口时使用。可以通过<a href="/docs/config.html#多态校验控制">配置</a>进行开启或者关闭。
全局变量校验是保证跨端代码全局变量正确性的检查方法，可以通过<a href="/docs/config.html#全局变量校验">配置</a>进行开启或者关闭。
代码规范校验是对项目结构,文件规范，样式规范等进行校验，可以通过<a href="/docs/config.html#语法检查">配置</a>进行开启或者关闭。</p> <h2 id="更多示例"><a href="#更多示例" class="header-anchor">#</a> 更多示例</h2> <ul><li><p><a href="/tutorial/poly-api.html">API 扩展</a></p></li> <li><p><a href="/tutorial/poly-component.html">多态组件扩展</a></p></li> <li><p><a href="/tutorial/use-gestures.html">手势拖拽效果</a></p></li> <li><p><a href="/tutorial/build-config.html">工程化实例</a></p></li> <li><p><a href="/tutorial/export-cml-component.html">普通项目使用 CML 跨端组件</a></p></li> <li><p><a href="/tutorial/webpack-with-cml.html">webpack 集成 CML</a></p></li> <li><p><a href="/tutorial/web-wx-only-app.html">只跨 Web 和小程序的应用</a></p></li> <li><p><a href="/tutorial/android-sdk.html">CML Android SDK</a></p></li> <li><p><a href="/tutorial/ios-sdk.html">CML iOS SDK</a></p></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/tutorial/web-wx-only-app.html">
        只跨 Web 与小程序的应用
      </a>
      →
    </span></p></div> <footer class="footer" data-v-aa5c954a><div class="content" data-v-aa5c954a><div class="left" data-v-aa5c954a><a href="/" class="brand" data-v-aa5c954a><img src="data:image/png;base64,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" alt="logo" data-v-aa5c954a> <span data-v-aa5c954a>Chameleon</span></a> <div class="info" data-v-aa5c954a>Copyright © 2020 DiDi Chuxing Inc.</div></div> <div class="right" data-v-aa5c954a><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>资源</h4> <a href="/components/expand.html" data-v-aa5c954a>Chameleon UI</a><a href="https://github.com/beatles-chameleon/cml-demo" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon Demo
            </a><a href="https://github.com/chameleon-team/awesome-cml" target="_blank" rel="noopener" data-v-aa5c954a>
              Awesome Chameleon
            </a><a href="https://github.com/didi/chameleon/releases" target="_blank" rel="noopener" data-v-aa5c954a>
              更新记录
            </a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>社区</h4> <a href="https://github.com/didi/chameleon/issues" target="_blank" rel="noopener" data-v-aa5c954a>
              GitHub
            </a><a data-v-aa5c954a><span data-v-aa5c954a>微信交流群</span> <img src="/assets/img/qr_weixin.59cd000a.png" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>QQ 交流群</span> <img src="/assets/img/qr_qq.115678d7.jpg" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>顺风公鹿</span> <img src="/assets/img/qr_deer.e2ddb653.png" alt="image" data-v-aa5c954a></a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>关于</h4> <a href="https://github.com/didi/chameleon/wiki/Chameleon%E5%9B%A2%E9%98%9F" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon 团队
            </a><a href="https://github.com/didi/chameleon/wiki/%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC" target="_blank" rel="noopener" data-v-aa5c954a>
              加入我们
            </a><a href="mailto:CML@didichuxing.com" target="_blank" rel="noopener" data-v-aa5c954a>
              联系我们
            </a><a href="https://github.com/didi/chameleon/wiki/Contributors" target="_blank" rel="noopener" data-v-aa5c954a>
              贡献者
            </a></div></div></div></footer></main></div><div class="global-ui"><!----></div></div>
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
289 
    <script src="/assets/js/app.bcfec7ef.js" defer></script><script src="/assets/js/60.7feedc98.js" defer></script><script src="/assets/js/1.b97c77c7.js" defer></script><script src="/assets/js/58.ebf8ba39.js" defer></script><script src="/assets/js/2.d28a060e.js" defer></script>
J
doc: update  
JiM-W 已提交
290 291 
  </body>
</html>