小程序组件接入

chameleon允许在多态组件中引入原生微信小程序组件，对于已经熟悉小程序组件开发的朋友将非常easy，之前封装的微信小程序组件可以直接使用，微信小程序相关的ui库可以直接使用，微信小程序自带的组件也可以直接使用。

为什么要接入微信小程序组件

多态组件存在的差异不过来自于各端需求不同，又或是各端实现方式的不同。微信小程序组件的接入跟第二个问题完美契合，在原有的小程序开发过程中或许已经产出了常用组件，又或是使用着某个微信小程序的组件库，当使用chameleon进行开发时，避免了二次开发原有组件的成本。

怎么引入微信小程序组件

第一类是微信小程序支持的组件，比如view text等，详细请查看微信小程序组件列表，如果这样的组件已经满足开发需求，那么就可以直接使用了：

  1. <!-- list.wx.cml -->
  2. <template>
  3.   <view>
  4.     <text v-for="l in list">{{l}}</text>
  5.   </view>
  6. </template>

第二类是原有的组件，首先你需要将组件复制到chameleon项目中，然后只需要在chameleon组件中声明式引入该组件即可使用。还是以list组件为例，假设原有封装好的微信小程序的组件custom-list，目录结构如下：

  1. ├── components                      // 组件文件夹
  2. |   ├── custom-list
  3. |   |   ├── custom-list.wxml
  4. |   |   ├── custom-list.wxss
  5. |   |   ├── custom-list.js
  6. |   |   └── custom-list.json

那么，在list.wx.cml中可以直接引用：

  1. <!-- list.wx.cml -->
  2. <template>
  3.   <custom-list list="{{list}}"></custom-list>
  4. </template>
  5. ...
  6. <script cml-type="json">
  7. {
  8.   "base": {
  9.     "usingComponents": {
  10.       "custom-list": "/components/custom-list/custom-list"
  11.     }
  12.   }
  13. }
需要注意的是组件路径需要写到.wxml层级，但是不带后缀。

第三类是微信小程序的组件库，这里以iVew Webapp为例，首先需要将其代码下载下来放到chameleon项目中，假设目录结构如下：

  1. ├── components                      // 组件文件夹
  2. |   ├── iview
  3. |   |   ├── action-sheet
  4. |   |   |   ├── index.js
  5. |   |   |   ├── index.json
  6. |   |   |   ├── index.wxml
  7. |   |   |   └── index.wxss
  8. |   |   ├── alert
  9. |   |   ├── avatar
  10. |   |   └── ...

这里我们需要使用action-sheet组件只需要如下即可：

  1. <!-- component.wx.cml -->
  2. <template>
  3.   <action-sheet></action-sheet>
  4. </template>
  5. ...
  6. <script cml-type="json">
  7. {
  8.   "base": {
  9.     "usingComponents": {
  10.       "action-sheet": "/components/iview/action-sheet/index"
  11.     }
  12.   }
  13. }
需要注意的是组件路径需要写到.wxml层级，但是不带后缀。

示例

详细示例戳这里多态组件扩展