6 页面&&组件迁移细节

6.1 template模板迁移

这里以cml语法为例：cml基础语法

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

假设，原有小程序代码，如下：

<view class="scroller-wrap">
    数据绑定
    <view>{{}}</view>
    条件渲染
    <view wx:if="{{condition1}}">wx:if</view>
    <view wx:elif="{{condition2}}">wx:elif</view>
    <view wx:else>wx:else</view>
    循环
    <view wx:for="{{array}}" wx:for-index="index" wx:for-item="item"></view>
    事件绑定
    <view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
</view>

那么，使用 cml语法后：

<view>
    数据绑定
    <view>{{}}</view>
    条件渲染
    <view c-if="{{condition1}}">c-if</view>
    <view c-else-if="{{condition2}}">c-else-if</view>
    <view c-else>c-else</view>
    循环
    <view c-for="{{array}}" c-for-index="index" c-for-item="item"></view>
    事件绑定
    <view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
    chameleon语法扩展了事件绑定，支持直接在函数中传参
    <view id="tapTest" bindtap="tapName('weChat',1,2,item)">Click me!</view>
</view>

6.1.2 小程序内置组件 -> cml内置组件

注意： 小程序和cml的内置组件传参是不一样的

具体cml内置组件使用方式参考

6.1.3 小程序原生组件的迁移

对于原生组件，需要在多态组件中调用，并且，需要找到其他端类似的组件。

具体使用 参考-多态组件

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

如果想要用微信小程序的第三方组件库，参考:手把手教你系列-实现多态 echarts

假设，原有小程序代码，如下：

<picker-view  value="{{value}}" bindchange="bindChange">
    <picker-view-column>
        <view wx:for="{{list}}" ><text>{{item}}</text></view>
    </picker-view-column>
</picker-view>

那么，使用cml语法后：

<origin-picker-view  value="{{value}}" bindchange="bindChange">
    <origin-picker-view-column>
        <view c-for="{{list}}" ><text>{{item}}</text></view>
    </origin-picker-view-column>
</origin-picker-view>

6.1.4 模板上需要替换的语法汇总

6.1.5 chameleon对于语法的扩展支持

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

component is 动态组件的扩展 参考

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

总结

1 对于小程序的语法，比如wx:if wx:for等要替换成cml对应的语法 c-if c-for

2 对于小程序的事件绑定，要转化成cml的c-bind c-catch的形式，cml扩展了支持事件传参

6.2 JS内容迁移

6.2.1 数据的迁移 参考

其中需要注意点 小程序中的 properties 对应于 cml中的 props

小程序

 properties: {
    innerText: {
      type: String,
      value: 'default value',
    }
  },

cml项目

props = {
  innerText: {
    type: String,
    default: 'default value',
  }
}

6.2.2 微信小程序API的迁移

假设，原有小程序代码，如下：

wx.redirectTo({
  url: 'test?id=1'
})

那么，使用cml语法后：

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

小程序的API文档

chameleon-api的文档

这里对于API小程序的API和chameleon的API的文档中对应细则做个简单的表格，如下

以上 chameleon-api提供的接口都是支持跨多端的，对于一些没有提供的跨多端的接口，而你的项目中又是必须用到的情况下，可以通过接口多态来实现 参考

6.2.3 小程序事件的迁移

注意，自定义组件的事件的触发机制，映射如下：

事件对象参数

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

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

6.2.4 模块化的迁移

小程序的模块化-参考

cml的模块化

假如 模块文件 m1.js

module.exports = {
  info:"I am chameleon"
}

xxx.cml 引用了 m1.js

import cml from 'chameleon-api' //node_modules中的模块
console.log('cml',cml)
const m1 = require('path/to/m1.js')
console.log('m1',m1.info) // I am chameleon

总结

1 小程序JS层用到的全局变量wx要通过chameleon-api去替换成对应的,如果没有对应的API，需要通过多态接口去实现

2 小程序中的properties data对应于cml项目 props ,data

3 小程序中的除了生命周期之外的事件都对应在 cml项目中的methods

4 chameleon提供了chameleon-store参考,可以用来存储一些全局的变量

5 小程序触发视图更新的setData不能再使用，chameleon自带了一套响应式的数据视图绑定

6 模块化中引用的模块要保证多端的适用性，参考 chameleon-api

6.3 style内容的迁移

6.3.1 页面布局的迁移

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

关于样式的使用教程 参考

模板上的样式语法 参考,基本和微信小程序是相同的；

6.3.2 样式单位的迁移

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

假设，原有小程序代码，如下：

.demo-com {
  display: flex;
  flex-direction: column;
  align-items: center;
  height:400rpx;
  justify-content: center;
}
.title {
  align-self: center;
  color: #61c7fc;
  font-size: 72rpx;
  margin-top: 160rpx;
  margin-bottom: 20rpx;
}
.logo {
  width: 150rpx;
  height: 150rpx;
  margin-top: 100rpx;
}

那么，使用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-top: 160cpx;
  margin-bottom: 20cpx;
}
.logo {
  width: 150cpx;
  height: 150cpx;
  margin-top: 100cpx;
}

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

​ Best wishes

​ Chameleon 团队