5 页面&&组件迁移细节

5.1 template模板迁移

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

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

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

<div class="scroller-wrap">
    数据绑定
    <div>{{}}</div>
    条件渲染
    <div v-if="condition">v-if</div>
    <div v-else-if="condition1">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语法后：整体基本上不用变,只需要将标签改成cml的内置标签即可参考

注意需要声明<template lang="vue"></template>

<template  lang="vue">
<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></template>

5.1.2 vue项目标签 -> cml标签

没有列出来的标签比如head p main等等只能在多态组件中使用，不支持跨多端

对于 a标签的 href,如果想要达到跨多端的效果，需要通过绑定事件使用 chameleon-api去跳转。

5.1.3 chameleon对于语法的扩展支持

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

component is 动态组件的扩展 参考

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

5.1.4 迁移注意点

• cml支持的类vue语法 ,只有在文档中列出的语法才支持多端，其他没有列出的语法仅可以在web端使用，跨端没有支持，比如 v-htm class的对象语法 数组语法等
  根据以上教程，我们可以迁移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 vue项目API的迁移

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

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

router.push({ path: '/pages/navigateBack/index' })

跨多端的路由仅支持 传入path字段进行路由，不支持路由 name字段的路由

那么，使用cml语法后：

import cml from 'chameleon-api'
cml.redirectTo({
  path: '/pages/navigateBack/index',
})

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

事件对象参数

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

事件冒泡

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

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

vue语法(仅仅支持 .stop)

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

cml语法

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

总结

1 由于chameleon是跨多端框架，所以在web端特有的全局变量，比如 window document history location等在chameleon中是不支持的

2 对于vue的一些全局API比如Vue.extend Vue.set以及一些文档中没有列出的指令，比如v-html v-pre等都是不支持跨多端的

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

HelloWorld.cml

<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内容的迁移

5.3.1 页面布局的迁移

由于chameleon应用是 跨多端web native 小程序框架，如果需要跨native，必须使用 flexbox进行样式布局，其他场景可以参考只跨web和小程序的应用

关于样式的使用教程 参考

模板上的样式语法 参考

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;
}

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

​ Best wishes

​ Chameleon 团队