cml迁移指南(CML Migrate Guide)

配置示例：

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

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

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

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

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

依据统一资源索引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"
})

示例代码

细心的你会发现，

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

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

示例代码：

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

示例代码

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

示例代码

Component({
  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填）
      value: "" // 属性初始值（可选）
    },
    myProperty2: String // 简化的定义方式
  },
  data: {
    text: ""
  }, // 私有数据，可用于模板渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() { }, 
  ready() { },
  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        text: "wx"
      })
    }
  }
})

示例代码

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

可以在 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 文件 App 生命周期 映射

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

    
  {{message}}
  
  WEBVIEW
  APP
  MINA
    
  {{item}}

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

Click me!

// page.js
Page({
  tapName(event) {
    console.log(event)
  }
})

/** common.wxss **/
.small-p {
  padding:5px;
}

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

/** common.css **/
.small-p {
  padding: 5px;
}

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

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}