我们用5分钟写了一个跨多端项目

淡淡的烟草味﹌ 2022-10-01 08:42 100阅读 0赞

`cml`(Chameleon 变色龙） 作为真正让一套代码运行多端的框架，提供标准的MVVM模式，统一开发各类终端。

同时，拥有各端独立的 `运行时框架(runtime)`、`数据管理(store)`、`组件库(ui)`、`接口(api)`。

此外，`cml`在跨端`能力加强`、`能力统一`、`表现一致`等方面做了许多工作。

今天，为了让大家的项目优雅升级，快速接入，给你带来一份丰盛的**cml迁移指南**~

--------------------

送上5分钟视频教程

--------------------

源码地址：[github.com/jalonjs/cml…][github.com_jalonjs_cml]

## 目录结构 ##

和微信小程序一样，`cml` 包含一个描述整体程序的 `app` 和多个描述各自页面的 `page`。

#### 小程序目录结构 ####

.
    ├── components // 包含各个组件
    ├── pages // 包含各个页面
    ├── app.js // 包含各个组件
    ├── app.js  // 应用启动入口
    ├── app.json // 全局配置
    ├── app.wxss // 全局样式
    └── project.config.json // 项目配置文件
    
    复制代码

#### cml目录结构 ####

.
    ├── dist // 各个端构建结果
    │   ├── alipay 
    │   ├── baidu 
    │   ├── wx 
    │   ├── web  
    │   ├── weex 
    │   └── config.json // 跨端配置map映射表
    ├── node_modules // 第三方库
    ├── mock // 模拟 接口数据 和 模板数据
    ├── src  // 源代码开发目录
    │   ├── app // 应用启动入口
    │   ├── assets // 静态资源
    │   ├── components // 包含组件
    │   ├── pages  // 包含页面
    │   ├── store //数据管理
    │   └── router.config.json // 路由配置文件
    ├── chameleon.config.js // 项目配置文件
    └── package.json // npm包配置文件
    
    复制代码

## 如何修改配置 ##

在小程序项目里面，分为：

#### [小程序 —— 项目配置][Link 1] ####

可以在项目根目录使用 `project.config.json` 文件对项目进行配置。

**配置示例：**

{
      "miniprogramRoot": "./src",
      "debugOptions": {}
    }
    复制代码

#### [小程序 —— 全局配置][Link 2] ####

小程序根目录下的 `app.json` 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

**配置示例：**

{
      "pages": ["pages/index/index", "pages/logs/index"],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      }
    }
    复制代码

#### [小程序 —— 页面配置][Link 3] ####

每一个小程序页面也可以使用 `.json` 文件来对本页面的窗口表现进行配置。

页面的配置只能设置 `app.json` 中部分 `window` 配置项的内容，页面中配置项会覆盖 `app.json` 的 `window` 中相同的配置项。

**配置示例：**

{
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }
    复制代码

同样，在 `cml`项目里面，分为：

#### [cml —— 项目配置][cml _] ####

`chameleon.config.js` 为项目的配置文件，你可以定制化构建，比如是否带hash，是否压缩等等。

**配置示例：**

// 设置静态资源的线上路径
    const publicPath = '//www.static.chameleon.com/static';
    // 设置api请求前缀
    const apiPrefix = 'https://api.chameleon.com';
    // 合并配置
    cml.config.merge({
      wx: {
        build: {apiPrefix}
      },
      alipay: {
        build: {apiPrefix}
      },
      baidu: {
        build: {apiPrefix}
      },
      web: {
        dev: {
          hot: true,
          console: true
        },
        build: {
          publicPath: `${publicPath}/web`,
          apiPrefix
        }
      },
      weex: {
        build: {
          publicPath: `${publicPath}/weex`,
          apiPrefix
        }
      }
    })
    
    复制代码

#### cml —— 全局配置 ####

`cml` 项目 `app` 目录下的 `app.cml` 文件的 `<script cml-type="json" />` 用来对 `cml`应用 进行全局配置，具有 跨端配置 和 差异化 的能力

**配置示例：**

#### [cml —— 页面/组件配置][cml _ 1] ####

通过 `usingComponents` 配置 `组件路径` 注册引用的组件。

**配置示例：**

### 如何使用路由能力 ###

#### 小程序配置路由 ####

[app.json][] 配置项列表的 `pages` 字段用于指定小程序由哪些页面组成，每一项都对应一个页面的 `路径+文件名` 信息。

**数组的第一项代表小程序的初始页面（首页）。新增/减少页面，需要对 `pages` 数组进行修改。**

如果项目有 `pages/index/index.wxml`、`pages/logs/logs.wxml` 两个页面，则需要在 `app.json` 中写

{
      "pages": ["pages/index/index", "pages/logs/logs"]
    }
    复制代码

#### cml配置路由 ####

[src/router.config.json][src_router.config.json] 是路由的配置文件，`cml` 内置了一套各端统一的路由管理方式。相应有 `cml` 路由配置映射如下：

{
      "mode": "history",
      "domain": "https://www.chameleon.com",
      "routes":[
        {
          "url": "/cml/h5/index",
          "path": "/pages/index/index",
          "mock": "index.php"
        },
        {
          "url": "/cml/h5/logs",
          "path": "pages/logs/logs",
          "mock": "logs.php"
        }
      ]
    }
    复制代码

文件名不需要写文件后缀，`cml`框架会自动去寻找对于位置的 `.cml` 文件进行处理。

#### 小程序使用路由 ####

*  打开新页面：调用 API [wx.navigateTo][]
 *  页面重定向：调用 API [wx.redirectTo][]
 *  页面返回：调用 API [wx.navigateBack][]
 *  打开另一个小程序：调用 API [wx.navigateToMiniProgram][]
 *  返回到上一个小程序：调用 API [wx.navigateBackMiniProgram][]

#### cml使用路由 ####

依据统一资源索引URI，自适应打开不同环境同一路由PATH：

*  打开新页面：调用 chameleon-api [cml.navigateTo][]
 *  页面重定向：调用 chameleon-api [cml.redirectTo][]
 *  页面返回：调用 chameleon-api [cml.navigateBack][]
 *  打开另一个跨端应用：调用 chameleon-api [cml.open][]
 *  返回到上一个跨端应用：调用 chameleon-api [cml.close][]

## 如何注册 ##

### 如何注册程序 ###

#### 小程序注册程序 ####

在小程序项目里面，`App()` 函数用来注册一个小程序。接受一个 `Object` 参数，其指定小程序的生命周期回调等。

**示例代码**

App({
      onLaunch(options) {
        // Do something initial when launch.
      },
      globalData: 'I am global data'
    })
    复制代码

#### cml注册程序 ####

**示例代码**

细心的你会发现，

小程序中`app.json app.js app.wxss`和 `src/app/app.cml`的对应关系如下

<table> 
 <thead> 
  <tr> 
   <th>小程序 app.js</th> 
   <th>cml项目 src/app/app.cml</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>app.js</td> 
   <td><code>&lt;script&gt;&lt;/script&gt;</code></td> 
  </tr> 
  <tr> 
   <td>app.wxss</td> 
   <td><code>&lt;style&gt;&lt;/style&gt;</code></td> 
  </tr> 
  <tr> 
   <td>app.json</td> 
   <td><code>&lt;script cml-type="json"&gt;&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

### 如何注册页面 ###

#### 小程序注册页面 ####

在小程序项目里面，`Page(Object)` 函数用来注册一个页面。接受一个 `Object` 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

**示例代码：**

// index.js
    Page({
      data: {
        text: 'This is page data.'
      },
      changeText: function(e) {
        // sent data change to view
        this.setData({
          text: 'CML'
        })
      }
    })
    复制代码

#### cml注册页面 ####

**示例代码**

### 如何注册组件 ###

#### 小程序注册组件 ####

在小程序项目里面， `Component(Object)` 构造器可用于定义组件，调用 `Component` 构造器时可以指定组件的属性、数据、方法等。

**示例代码**

Component({
      properties: {
        myProperty: { // 属性名
          type: String, // 类型（必填）
          value: '' // 属性初始值（可选）
        },
        myProperty2: String // 简化的定义方式
      },
      data: {
        text: ''
      }, // 私有数据，可用于模板渲染
    
      // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
      attached() { }, 
      ready() { },
      methods: {
        onMyButtonTap() {
          this.setData({
            // 更新属性和数据的方法与更新页面数据的方法类似
            text: 'wx'
          })
        }
      }
    })
    复制代码

#### cml注册组件 ####

**示例代码**

## 如何声明生命周期 ##

统一各端应用生命周期的定义，是跨端框架的重要组成，也是迁移的必经之路。

#### 小程序声明生命周期 ####

可以在 `App(Object)`、`Page(Object)`、`Component(Object)` 传入`Object`参数，其指定小程序的生命周期回调等

**代码示例**

// index.js
    Page({
      onLoad(options) {
        // Do some initialize when page load.
      },
      onReady() {
        // Do something when page ready.
      },
      onShow() {
        // Do something when page show.
      },
      onHide() {
        // Do something when page hide.
      },
      onUnload() {
        // Do something when page close.
      },
      onShareAppMessage() {
        // return custom share data when user share.
      }
    })
    复制代码

#### cml声明生命周期 ####

在`.cml` 文件 `<script />` 代码块返回的对象实例，其指定生命周期回调

**示例代码**

### App 生命周期 映射 ###

小程序 `app.js`中的生命周期 -> cml `src/app/app.cml`

<table> 
 <thead> 
  <tr> 
   <th>小程序</th> 
   <th>chameleon</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>beforeCreate</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>mounted</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>destroyed</td> 
  </tr> 
 </tbody> 
</table>

### Page 生命周期 映射 ###

小程序 `Page()`中的生命周期 -> cml `src/pages/mypage/mypage.cml`

<table> 
 <thead> 
  <tr> 
   <th>小程序</th> 
   <th>chameleon</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLoad</td> 
   <td>beforeCreate</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>mounted</td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>destroyed</td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td><a href="https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Flogic%2Flifecycle.html%23%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%A4%9A%E6%80%81" rel="nofollow">生命周期多态</a></td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td><a href="https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Flogic%2Flifecycle.html%23%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%A4%9A%E6%80%81" rel="nofollow">生命周期多态</a></td> 
  </tr> 
  <tr> 
   <td>onShareAppMessage</td> 
   <td><a href="https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Flogic%2Flifecycle.html%23%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%A4%9A%E6%80%81" rel="nofollow">生命周期多态</a></td> 
  </tr> 
 </tbody> 
</table>

### Component 生命周期 映射 ###

小程序 `Component()`中的生命周期 -> cml `src/components/mycomponent/mycomponent.cml`

<table> 
 <thead> 
  <tr> 
   <th>小程序</th> 
   <th>chameleon</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>created</td> 
   <td>created</td> 
  </tr> 
  <tr> 
   <td>attached</td> 
   <td>beforeMount</td> 
  </tr> 
  <tr> 
   <td>ready</td> 
   <td>mounted</td> 
  </tr> 
  <tr> 
   <td>detached</td> 
   <td>destroyed</td> 
  </tr> 
 </tbody> 
</table>

### 生命周期总结 ###

每个 `cml` 实例(`App`、`Page`、`Component`)在被创建时都要经过一系列的初始化过程 ————

例如，需要设置数据监听、编译模板、将实例挂载到 `CML节点` 并在数据变化时更新 `CML节点` 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给开发者在不同阶段添加自己的代码的机会。

`cml` 为`App`、`页面Page`、`组件Component` 提供了一系列生命周期事件，保障应用有序执行。

另外，如果你想使用某个端特定的生命周期，你可以从业务出发使用 [生命周期多态][Link 4]。

## 数据如何响应到视图 ##

如今，双向数据绑定&单向数据流 已深入开发者日常，MVMM开发模式算是框架标配。

[数据绑定][Link 5]、[条件渲染][Link 6]、[列表渲染][Link 7] 是如何书写的呢？

**示例代码**

#### 小程序使用数据响应 ####

<view class="scroller-wrap">
        
      <view>{
        {message}}</view>
      
      <view wx:if="{ {view == 'WEBVIEW'}}">WEBVIEW</view>
      <view wx:elif="{ {view == 'APP'}}">APP</view>
      <view wx:else="{ {view == 'MINA'}}">MINA</view>
        
      <view wx:for="{ {array}}" wx:for-index="index" wx:for-item="item">{
        {item}}</view>
    </view>
    复制代码

// page.js
    Page({
      data: {
        message: 'Hello MINA!',
        view: 'MINA',
        array: [1, 2, 3, 4, 5]
      },
      onLoad() {
        this.setData({
          message: 'wx'
        })
      }
    })
    复制代码

#### cml使用数据响应 ####

<template>
    
    <view class="scroller-wrap">
        
      <view>{
        {message}}</view>
      
      <view c-if="{ {view == 'WEBVIEW'}}">WEBVIEW</view>
      <view c-else-if="{ {view == 'APP'}}">APP</view>
      <view c-else="{ {view == 'MINA'}}">MINA</view>
        
      <view c-for="{ {array}}" c-for-index="index" c-for-item="item">{
        {item}}</view>
    </view>
    </template>
    <script> class Index { data = { message: 'Hello MINA!', view: 'MINA', array: [1, 2, 3, 4, 5] } beforeCreate () { this.message = 'cml' } }; export default new Index(); </script>
    复制代码

### 数据响应总结 ###

`cml`运行时框架 提供了跨端响应式数据绑定系统(Data binding)，当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

只需要将 `view<-->model` 交互部分逻辑，作简单迁移，便可使它成为跨多端的数据响应系统。

## 事件交互 ##

`cml` 支持一些基础的[事件][Link 8]，保障各端效果(`类型`、`绑定`、`事件对象`)一致运行。

**示例代码**

#### 小程序使用事件 ####

<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
    复制代码

// page.js
    Page({
      tapName(event) {
        console.log(event)
      }
    })
    复制代码

#### cml使用事件 ####

<template>
      <view id="tapTest" data-hi="WeChat" c-bind:tap="tapName">
        <text>Click me!</text>
      </view>
    </template>
    <script> class Index { methods = { tapName(e) { // 打印事件对象 console.log('事件对象:', e); } } } export default new Index(); </script>
    复制代码

### 事件使用总结 ###

同时，还支持自定义事件，用于父子组件之间的通信。

另外，如果你想要使用某个端特定的事件，`cml` 并不会限制你的自由发挥，你可以从业务出发使用 [组件多态][Link 9] 或者 [接口多态][Link 10] 差异化实现功能。

## 布局和外观 ##

各端描述 `布局和外观` 的[层叠样式表(CSS)][CSS]实现存在差异，包括不限于 `布局`、`盒模型`、`定位`、`文本`。

所以， `cml` 框架内置[跨端一致性基础样式][Link 11]能力。

并且，定义了用于描述页面的样式规范[CMSS(Chameleon Style Sheet)][CMSS_Chameleon Style Sheet]。

### 如何导入外部样式 ###

使用 `@import` 语句可以导入外联样式表，`@import` 后跟需要导入的外联样式表的相对路径，用 `;` 表示语句结束。

#### 小程序导入外部样式 ####

**示例代码：**

/** common.wxss **/
    .small-p {
      padding:5px;
    }
    复制代码

/** app.wxss **/
    @import "common.wxss";
    .middle-p {
      padding:15px;
    }
    复制代码

#### cml导入外部样式 ####

[详细文档][Link 12]

**示例代码：**

/** common.css **/
    .small-p {
      padding: 5px;
    }
    复制代码

<style> @import './common.css'; .middle-p { padding:15 cpx; } </style>
    复制代码

### 样式使用总结 ###

同时，为了统一多端尺寸单位，呈现效果一致，同时页面响应式布局，`cml` 项目统一采用 [cpx][] 作为尺寸单位，规定以屏幕750px（占满屏幕）视觉稿作为标准。

而且，各端样式表拥有的能力 [不尽相同][Link 13]，是项目迁移的主要阵地之一。

另外，如果你想要使用某个端特定的样式能力，`cml` 并不会限制你的自由发挥，你可以从业务出发使用 [样式多态][Link 14]

**注意：由于chameleon应用是 跨多端`web native 小程序`框架，如果需要跨`native`，必须使用 [flexbox][] 进行样式布局！！！**

## 组件 ##

`cml` 项目一切皆组件。组件(Component)是视图的基本组成单元。

框架为开发者提供了一系列[基础组件][Link 15]，开发者可以通过组合这些[基础组件][Link 15]进行快速开发。

如：

<template>
      <view>
        <view>view 基础组件</view>
        <text>text 基础组件</text>
      </view>
    </template>
    复制代码

同时，`cml` 支持简洁的组件化编程。

### 自定义组件 ###

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用。自定义组件在使用时与基础组件非常相似。

#### 如何创建自定义组件 ####

##### 小程序创建自定义组件 #####

**代码示例：**

Component({
      properties: {
        // 这里定义了innerText属性，属性值可以在组件使用时指定
        innerText: {
          type: String,
          value: 'default value',
        }
      },
      data: {
        // 这里是一些组件内部数据
        someData: {}
      },
      methods: {
        // 这里是一个自定义方法
        customMethod() {}
      }
    })
    复制代码

##### cml创建自定义组件 #####

**示例代码**

#### 如何使用自定义组件 ####

使用已注册的自定义组件前，首先要进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径。

##### 小程序使用自定义组件 #####

**代码示例：**

在 `page.json` 中进行引用声明

{
      "usingComponents": {
        "component-tag-name": "path/to/the/custom/component"
      }
    }
    复制代码

在 `page.wxml` 中使用

<view>
      
      <component-tag-name inner-text="Some text"></component-tag-name>
    </view>
    复制代码

##### cml使用自定义组件 #####

**代码示例：**

在 `page.cml`中`<script cml-type='json' />`进行引用声明

在 `page.cml`中`<template />`使用

<template>
    <view>
      
      <component-tag-name inner-text="Some text"></component-tag-name>
    </view>
    </template>
    复制代码

#### 如何实现父子组件事件通信 ####

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的[事件][Link 8]，引用组件的页面可以监听这些事件。

##### 小程序组件通信 #####

**代码示例：**

<view>
      <my-component bindcustomevent="onMyEvent"></my-component>
    </view>
    复制代码

// 页面 page.js
    Page({
      methods: {
        onMyEvent(e) {
          console.log(e.detail) // 自定义组件触发事件时提供的detail对象
        }
      }
    })
    复制代码

<view>
      <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
    </view>
    复制代码

// 组件 my-component.js
    Component({
      methods: {
        onTap() {
          this.triggerEvent('customevent', {}) // 触发 自定义组件事件
        }
      }
    })
    复制代码

##### cml组件通信 #####

**代码示例：**

<template>
      <view>
        <my-component c-bind:customevent="onMyEvent"></my-component>
      </view>
    </template>
    <script> class Index { methods = { // 这里是一个自定义方法 onMyEvent(e) { console.log(e.detail) // 自定义组件触发事件时提供的detail对象 } } }; export default new Index(); </script>
    <script cml-type="json"> { "base": { "usingComponents": { "my-component": "path/to/the/custom/component" } } } </script>
    复制代码

<template>
      <view>
        <button c-bind:tap="onTap">点击这个按钮将触发“myevent”事件</button>
      </view>
    </template>
    <script> class MyComponent { methods = { // 这里是一个自定义方法 onTap() { this.$cmlEmit('customevent', {}) // 触发 自定义组件事件 } } }; export default new MyComponent(); </script>
    <script cml-type="json"> {} </script>
    复制代码

### 组件使用总结 ###

和小程序一样，`cml框架` 提供了大量[内置组件][Link 16]和[扩展组件][Link 17]，抹平多端差异，便于开发者通过组合这些组件，创建出强大的应用程序。

扩展组件需要额外引入。如：

在执行 `cml build` 构建打包时，`cml 框架` 会按需打包引用的内置组件和扩展组件，为代码瘦身。

[内置组件][Link 16]和[扩展组件][Link 17] 都是支持跨多端的，对于一些没有提供的某个端的组件，可以通过[组件多态][Link 9]来实现。

如果希望使用小程序端的原生组件，那么可以在原生标签前加上 `origin-*`，`cml`框架会渲染原生组件[参考][Link 18]

**注意：`origin-*` 只能在[灰度区文件][Link 19]中使用！！**

如在 `map.wx.cml` 文件中使用原生地图组件 `<map/>`：

<template>
      <origin-map id="map" longitude="113.324520" latitude="23.099994" controls="{ {controls}}" bindcontroltap="controltap" style="width: 100%; height: 300px;" ></origin-map>
    </template>
    复制代码

## 如何调用平台接口能力 ##

在小程序里面，可以通过微信原生 `API`，调起如获取用户信息，本地存储，支付功能等。

**示例代码**

try {
      wx.setStorageSync('name', 'Hanks')
    } catch (e) {
      console.error(e)
    }
    复制代码

同样，在 cml 项目里面可以这样调用：

**示例代码**

import cml from 'chameleon-api'
    cml.setStorage('name', 'Hanks').then((res)=>{
      console.log(res)
    },function(e){
      console.error(e)
    })
    复制代码

### 接口使用总结 ###

`cml` 框架提供了丰富的多态接口，可以调起各端提供的原生能力，如系统信息、元素节点信息、动画效果、本地存储、网络请求、地理位置等。请参考 [API][] 文档。

`chameleon-api`提供的接口都是支持跨多端的，对于一些没有提供的某个端的原生接口，可以通过[接口多态][Link 20]来调用。

## 迁移实例 ##

下面给出`各端(vue、weex、小程序)迁移cml指南` 以及 `cml 导出组件到各端指南`的具体迁移文档：

*  [如何迁移一个Vue项目到chameleon][Vue_chameleon]
 *  [如何迁移一个Weex项目到chameleon][Weex_chameleon]
 *  [如何迁移一个微信小程序到chameleon][chameleon]
 *  [普通项目使用chameleon跨端dialog组件][chameleon_dialog]

转载于:https://juejin.im/post/5ca2de0f51882543d65287a7

[github.com_jalonjs_cml]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fjalonjs%2Fcml-first-demo
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fdevtools%2Fprojectconfig.html
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fconfig.html%23%25E5%2585%25A8%25E5%25B1%2580%25E9%2585%258D%25E7%25BD%25AE
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fconfig.html%23%25E9%25A1%25B5%25E9%259D%25A2%25E9%2585%258D%25E7%25BD%25AE
[cml _]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Fconfig.html
[cml _ 1]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Fjson.html
[app.json]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fconfig.html
[src_router.config.json]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Frouter.html
[wx.navigateTo]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fwx.navigateTo.html
[wx.redirectTo]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fwx.redirectTo.html
[wx.navigateBack]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fwx.navigateBack.html
[wx.navigateToMiniProgram]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fwx.navigateToMiniProgram.html
[wx.navigateBackMiniProgram]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fwx.navigateBackMiniProgram.html
[cml.navigateTo]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fapi%2Fnavigate.html
[cml.redirectTo]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fapi%2Fnavigate.html%23redirectto
[cml.navigateBack]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fapi%2Fnavigate.html%23navigateback
[cml.open]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fapi%2Fopen.html
[cml.close]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fapi%2Fopen.html%23close
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Flogic%2Flifecycle.html%23%25E7%2594%259F%25E5%2591%25BD%25E5%2591%25A8%25E6%259C%259F%25E5%25A4%259A%25E6%2580%2581
[Link 5]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fdatabind.html
[Link 6]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fcondition.html
[Link 7]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fiterator.html
[Link 8]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fevent.html
[Link 9]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Fpolymorphism%2Fcomponent.html
[Link 10]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Fpolymorphism%2Fapi.html
[CSS]: https://link.juejin.im?target=https%3A%2F%2Fwww.w3.org%2FStyle%2FCSS%2F
[Link 11]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fcmss%2Fbase_style.html
[CMSS_Chameleon Style Sheet]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fcmss.html
[Link 12]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fapi%2Fruntime%2F%40import.html
[cpx]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fcmss%2Funit.html
[Link 13]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fexample%2Fweb_wx.html
[Link 14]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fcmss%2Fcss_diff.html
[flexbox]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fcmss%2Flayout.html
[Link 15]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fview%2Fbase_component.html
[Link 16]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fcomponent%2Fbase%2Fbase.html
[Link 17]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fcomponent%2Fexpand%2Fexpand.html
[Link 18]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Flinter%2Fcml-template.html%23%2508%25E5%25BC%2595%25E7%2594%25A8%25E5%25B9%25B3%25E5%258F%25B0%25E5%258E%259F%25E7%2594%259F%25E7%25BB%2584%25E4%25BB%25B6
[Link 19]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Fpolymorphism%2Fcomponent.html%23webweexwxalipaybaiducml
[API]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fapi%2Fapi.html
[Link 20]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fframework%2Fpolymorphism%2Fapi.html%3Fh%3D%25E5%25A4%259A%25E6%2580%2581%25E6%258E%25A5%25E5%258F%25A3
[Vue_chameleon]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fexample%2Fweb_to_chameleon.html
[Weex_chameleon]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fexample%2Fweex_to_chameleon.html
[chameleon]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fexample%2Fwx_to_chameleon.html
[chameleon_dialog]: https://link.juejin.im?target=https%3A%2F%2Fcmljs.org%2Fdoc%2Fexample%2Fwebpack_output.html