Mobile Platform as a Service：應用

App 代表頂層應用，管理所有頁面和全域資料，並提供生命週期方法。它也是一個構造方法，產生 App 執行個體。一個小程式就是一個 App 執行個體。

簡介

每個小程式的頂層一般包含三個檔案：

• app.acss：應用樣式（可選）

• app.js：應用邏輯

• app.json：應用配置

下面是一個簡單的 app.json：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "defaultTitle": "Demo"
  }
}

在上述配置中，指定了小程式包含兩個頁面，以及應用視窗的預設標題是 Demo。

App 提供四個事件，可以設定鉤子方法：

• onLaunch：小程式啟動

• onShow：小程式切換到前台

• onHide：小程式切換到後台

• onError：小程式出錯

一個簡單的 app.js 代碼如下：

App({
  onLaunch(options) {
    // 小程式初始化
  },
  onShow(options) {
    // 小程式顯示
  },
  onHide() {
    // 小程式隱藏
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: {
    foo: true,
  }
})

App()

App() 接受一個 object 作為參數，用來配置小程式的生命週期等。

參數說明：

前台、後台定義： 使用者點擊左上方關閉，或者按了裝置 Home 鍵離開 mPaaS 用戶端時，小程式並不會直接銷毀，而是進入了後台，當再次進入 mPaaS 用戶端或再次開啟小程式時，又會從後台進入前台。

只有當小程式進入後台一定時間後，或佔用系統資源過高時，才會被真正銷毀。

onLaunch/onShow 方法的參數

• Native 啟動傳參方法為：

• URL 啟動傳參方法為：query 從啟動參數的 query 欄位解析而來, path 從啟動參數 page 欄位解析而來。 例如在如下 URL 中：

  alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2Fz

  • 其中的 query 參數解析如下：

    number%3D1 === encodeURIComponent('number=1')

  • 其中的 path 參數解析如下：

    x%2Fy%2Fz === encodeURIComponent('x/y/z')

那麼，當使用者第一次啟動小程式可以從 onLaunch 方法中擷取這個參數，或者小程式在後台時被重新用 schema 開啟也可以從 onShow 方法中擷取這個參數。

App({
  onLaunch(options) {
    // 第一次開啟
    // options.query == {number:1}
  },
  onShow(options) {
    // 從後台被 scheme 重新開啟
    // options.query == {number:1}
  },
})

getApp()

我們提供了全域的 getApp() 函數，可以擷取小程式執行個體，一般用在各個子頁面之中擷取頂層應用。

var app = getApp()
console.log(app.globalData) // 擷取 globalData

注意：

• App() 必須在 app.js 裡調用，且不能調用多次。

• 不要在定義於 App() 內定義的函數中調用 getApp()，使用 this 就可以拿到 app 執行個體。

• 不要在 onLaunch 裡調用 getCurrentPages()，這個時候 page 還沒有產生。

• 通過 getApp() 擷取執行個體之後，不要私自調用生命週期函數。

全域的資料可以在 App() 中設定，各個子頁面通過全域函數 getApp() 可以擷取全域的應用執行個體。例如：

// app.js
App({
  globalData: 1
})

// a.js

// localValue 只在 a.js 有效
var localValue = 'a'

// 產生 app 執行個體
var app = getApp()

// 拿到全域資料，並改變它
app.globalData++

// b.js

// localValue 只在 b.js 有效
var localValue = 'b'

// 如果 a.js 先運行，globalData 會返回 2
console.log(getApp().globalData)

在上面代碼中，a.js 和 b.js 都聲明了變數 localValue，它們不會互相影響，因為各個指令碼聲明的變數和函數只在該檔案中有效。

app.json

app.json 用於全域配置，決定分頁檔的路徑、視窗表現、設定網路逾時時間、設定多 tab 等。

以下是一個包含了部分配置選項的簡單配置 app.json。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "defaultTitle": "Demo"
  }
}

app.json 配置項如下。

pages

pages屬性是一個數組，每一項都是字串，用來指定小程式的頁面。每一項代表對應頁面的路徑資訊，數組的第一項代表小程式的首頁。小程式中新增/減少頁面，都需要對 pages數組進行修改。

頁面路徑不需要寫 js 尾碼，架構會自動去載入同名的.json、.js、.axml、.acss檔案。

舉例來說，如果開發目錄為：

pages/
pages/index/index.axml
pages/index/index.js
pages/index/index.acss
pages/logs/logs.axml
pages/logs/logs.js
app.js
app.json
app.acss

app.json就要寫成下面的樣子。

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

注意：page 忽略時預設為首頁

window

window屬性用於設定小程式通用的狀態列、導航條、標題、視窗背景色。

子屬性包括 titleBarColor、 defaultTitle、 pullRefresh、 allowsBounceVertical。

樣本如下：

{
  "window":{
    "defaultTitle": "支付寶介面功能示範"
  }
}

tabBar

如果你的小程式是一個多 tab 應用（用戶端視窗的底部欄可以切換頁面），那麼可以通過tabBar配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

tabBar 配置

每個 item 配置

icon 推薦大小為 60*60px ，系統會對任意傳入的圖片非等比展開或縮放。

例如

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日誌"
      }
    ]
  }
}

啟動參數

從 native 代碼中開啟小程式時可以帶上 page 和 query 參數，page 用來指定開啟特定頁面的路徑，query 用來帶入參數。

• iOS 範例程式碼

  NSDictionary *param = @{@"page":@"pages/card/index", @"query":@"own=1&sign=1&code=2452473"};
  MPNebulaAdapterInterface startTinyAppWithId:@"1234567891234568" params:param];

• Android 範例程式碼

  Bundle param = new Bundle();
  param.putString("page", "pages/card/index");
  param.putString("query", "own=1&sign=1&code=2452473");
  MPNebula.startApp("1234567891234568",param);