配置示例：

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