5 页面&&组件迁移细节

5.1 template模板迁移

这里以cml的vue 语法为例：cml类vue基础语法

5.1.1 数据绑定、条件渲染、循环、事件绑定的迁移

假设，原有vue项目代码，如下：

<div class="scroller-wrap">
    数据绑定
    <div>{{}}</div>
    条件渲染
    <div v-if="condition1">v-if</div>
    <div v-else-if="condition2">v-else-if</div>
    <div v-else>v-else</div>
    循环
    <div v-for="(item ,index) in array"></div>
    事件绑定
    <div id="tapTest" @click="handleClick">Click me!</div>
</div>

那么，使用 cml的类vue语法后：整体基本上不用变,只需要将标签改成chameleon的内置标签即可参考

<view class="scroller-wrap">
    数据绑定
    <view>{{}}</view>
    条件渲染
    <view v-if="condition">v-if</view>
    <view v-else-if="condition1">v-else-if</view>
    <view v-else>v-else</view>
    循环
    <view v-for="(item ,index) in array"></view>
    事件绑定
    <view id="tapTest" @click="handleClick">Click me!</view>
</view>

5.1.2 chameleon对于语法的扩展支持

指令的扩展 c-show、c-model、c-show 参考

component is 动态组件的扩展 参考

事件绑定支持内联事件传参数 参考

5.1.3 weex的内置组件迁移

以下表格列出weex的内置组件迁移到cml项目中的对应情况，不能在视图层用 weex端特有的组件，需要通过以下标签进行替换

除非是通过多态组件调用的下层组件才可以使用。

chameleon提供的内置组件

chameleon提供的扩展组件

对于weex内置的组件，chameleon提供了大部分与之对应的可以跨端的组件，对应如下，具体使用方式请参考

chameleon不支持的weex内置组件

根据以上教程，我们可以迁移HelloWorld.vue和comp.vue中的模板内容了

HelloWorld.cml

<template lang='vue'>
  <view>
    <text>this is helloworld</text>
    <comp @parentClick="handleParentClick"></comp>
  </view>
</template>

comp.cml

<template lang='vue'>
  <view>
    <input type="text" v-model="todo" ></input>
    <div v-for="(item,index) in todos">
      {{item}}
    </div>
    <div @click="addTodo">addTodo</div>
    <view @click="handleClick"><text>触发父组件事件</text></view>
  </view>
</template>

5.2 JS内容迁移

5.2.1 生命周期迁移 ：和vue保持一致

5.2.2 数据的迁移 参考

5.2.3 weex项目API的迁移

API迁移包括 http请求 路由跳转 本地存储等参考：chameleon-api的文档

5.2.4 weex内置模块的迁移

不能在逻辑层用 weex端特有的内置模块，需要通过以下chameleon-api提供的进行替换

除非是通过多态组件调用的下层组件才可以直接使用。

5.2.5 事件的触发机制，映射如下：

事件对象参数

chameleon对web native wx各个端的事件对象进行了统一代理 参考；

对于灰度区组件(多态组件) 各个端的事件对象还是对应端的事件对象，chameleon框架不会对灰度区origin-开头的标签和第三方组件 标签上绑定的事件进行事件代理

cml支持的类vue语法 ,只有在文档中列出的语法才支持多端，其他没有列出的语法仅可以在web端使用，跨端没有支持，比如 v-htm class的对象语法 数组语法等

不支持的事件

longpress appear disappear 事件暂不支持；

事件冒泡

chameleon生成的weex项目默认都是开启了支持事件冒泡的机制

同时扩展了阻止事件冒泡的语法；

vue语法(仅仅支持 .stop)

<view @click.stop="handleClick"></view>

cml语法

<view c-catch:click="handleClick"></view>

总结

1 由于chameleon是跨多端的框架，所以在weex端特有的环境变量，比如weex.config等在chameleon中是不支持的

2 对于weex的内置模块，比如animation等，在chameleon-api中基本上都有对应，参考上文weex内置模块的迁移

根据以上教程，我们可以迁移HelloWorld.vue和comp.vue中的js内容了

HelloWorld.cml

<template lang='vue'>
  <view>
    <text>this is helloworld</text>
    <comp @parentClick="handleParentClick"></comp>
  </view>
</template>
<script>
import lodash from 'lodash'
class HelloWorld   {
  methods = {
    handleParentClick(...args){
      console.log('parentClick',...args)
    }
  }
}
export default new HelloWorld();
</script>

comp.cml

<script>
class Comp {
  data = {
    todo:'todo1',
    todos:[]
  }
  methods = {
    addTodo(){
      this.todos.push(this.todo)
    },
    handleClick(){
      this.$cmlEmit('parentClick',{
        value:1
      })
    }
  }
}
export default new Comp();
</script>

5.3 style内容的迁移

weex样式官方文档

5.3.1 页面布局的迁移

使用 flexbox进行样式布局

关于样式的使用教程 参考

模板上的样式语法 参考

vue样式语法规范参考

5.3.2 样式单位的迁移

如果样式想要适配多端，需要将单位改成cpx;

根据以上教程，我们可以迁移HelloWorld.vue和comp.vue中的js内容了

HelloWorld.cml

.demo-com {
  display: flex;
  flex-direction: column;
  align-items: center;
  height:400cpx;
  justify-content: center;
}
.title {
  align-self: center;
  color: #61c7fc;
  font-size: 72cpx;
  margin-bottom: 20cpx;
}

以上，简单的介绍了weex项目迁移到chameleon的步骤，如果还有任何疑问，欢迎随时在chameleon官方微信和官方QQ群里进行反馈，我们将随时解答你的困惑，再次感谢你对chameleon的支持~

​ Best wishes

​ Chameleon 团队