配置示例：

app.json 配置項(xiàng)列表的 pages 字段用于指定小程序由哪些頁面組成，每一項(xiàng)都對應(yīng)一個(gè)頁面的 路徑+文件名 信息。

數(shù)組的第一項(xiàng)代表小程序的初始頁面（首頁）。新增/減少頁面，需要對 pages 數(shù)組進(jìn)行修改。

如果項(xiàng)目有 pages/index/index.wxml、pages/logs/logs.wxml 兩個(gè)頁面，則需要在 app.json 中寫

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

src/router.config.json 是路由的配置文件，cml 內(nèi)置了一套各端統(tǒng)一的路由管理方式。相應(yīng)有 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 文件進(jìn)行處理。

打開新頁面：調(diào)用 API wx.navigateTo

頁面重定向：調(diào)用 API wx.redirectTo

頁面返回：調(diào)用 API wx.navigateBack

打開另一個(gè)小程序：調(diào)用 API wx.navigateToMiniProgram

返回到上一個(gè)小程序：調(diào)用 API wx.navigateBackMiniProgram

依據(jù)統(tǒng)一資源索引URI，自適應(yīng)打開不同環(huán)境同一路由PATH：

打開新頁面：調(diào)用 chameleon-api cml.navigateTo

頁面重定向：調(diào)用 chameleon-api cml.redirectTo

頁面返回：調(diào)用 chameleon-api cml.navigateBack

打開另一個(gè)跨端應(yīng)用：調(diào)用 chameleon-api cml.open

返回到上一個(gè)跨端應(yīng)用：調(diào)用 chameleon-api cml.close

在小程序項(xiàng)目里面，App() 函數(shù)用來注冊一個(gè)小程序。接受一個(gè) Object 參數(shù)，其指定小程序的生命周期回調(diào)等。

示例代碼

App({
  onLaunch(options) {
    // Do something initial when launch.
  },
  globalData: "I am global data"
})

示例代碼

細(xì)心的你會發(fā)現(xiàn)，

小程序中app.json app.js app.wxss和 src/app/app.cml的對應(yīng)關(guān)系如下

在小程序項(xiàng)目里面，Page(Object) 函數(shù)用來注冊一個(gè)頁面。接受一個(gè) Object 類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。

示例代碼：

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

示例代碼

在小程序項(xiàng)目里面，
Component(Object) 構(gòu)造器可用于定義組件，調(diào)用 Component 構(gòu)造器時(shí)可以指定組件的屬性、數(shù)據(jù)、方法等。

示例代碼

Component({
  properties: {
    myProperty: { // 屬性名
      type: String, // 類型（必填）
      value: "" // 屬性初始值（可選）
    },
    myProperty2: String // 簡化的定義方式
  },
  data: {
    text: ""
  }, // 私有數(shù)據(jù)，可用于模板渲染

  // 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在methods段中定義的方法名
  attached() { }, 
  ready() { },
  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
        text: "wx"
      })
    }
  }
})

示例代碼

統(tǒng)一各端應(yīng)用生命周期的定義，是跨端框架的重要組成，也是遷移的必經(jīng)之路。

可以在 App(Object)、Page(Object)、Component(Object) 傳入Object參數(shù)，其指定小程序的生命周期回調(diào)等

代碼示例

// 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屬性，屬性值可以在組件使用時(shí)指定
    innerText: {
      type: String,
      value: "default value",
    }
  },
  data: {
    // 這里是一些組件內(nèi)部數(shù)據(jù)
    someData: {}
  },
  methods: {
    // 這里是一個(gè)自定義方法
    customMethod() {}
  }
})

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