支付寶小程序框架 App

簡介

App代表頂層應(yīng)用，管理所有頁面和全局?jǐn)?shù)據(jù)，以及提供生命周期方法。它也是一個(gè)構(gòu)造方法，生成App實(shí)例。一個(gè)小程序就是一個(gè)App實(shí)例。

每個(gè)小程序的頂層一般包含三個(gè)文件。

• app.js：應(yīng)用邏輯
• app.acss：應(yīng)用樣式（可選）
• app.json：應(yīng)用配置

下面是一個(gè)簡單的app.json。

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

上面配置指定小程序包含兩個(gè)頁面，以及應(yīng)用窗口的默認(rèn)標(biāo)題是 Demo。

App提供四個(gè)事件，可以設(shè)置鉤子方法。

• onLaunch：小程序啟動(dòng)
• onShow：小程序切換到前臺
• onHide：小程序切換到后臺
• onError: 小程序出錯(cuò)

一個(gè)簡單的app.js代碼如下。

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

App()

App() 接受一個(gè) object 作為參數(shù)，用來配置小程序的生命周期等。

參數(shù)說明：

前臺、后臺定義： 用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開支付寶時(shí)，小程序并不會(huì)直接銷毀，而是進(jìn)入了后臺，當(dāng)再次進(jìn)入支付寶或再次打開小程序時(shí)，又會(huì)從后臺進(jìn)入前臺。

只有當(dāng)小程序進(jìn)入后臺一定時(shí)間，或占用系統(tǒng)資源過高，才會(huì)被真正銷毀。

onLaunch/onShow 方法的參數(shù)

注意該參數(shù)從啟動(dòng)參數(shù)的 query 字段解析而來。例如 url 如下。

alipays://platformapi/startapp?appId=1999&query=number%3D1

其中的query參數(shù)解析如下。

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

那么，當(dāng)用戶第一次啟動(dòng)小程序可以從 onLaunch 方法中獲取這個(gè)參數(shù)，或者小程序在后臺時(shí)被重新用 schema 打開也可以從 onShow 方法中獲取這個(gè)參數(shù)。

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

getApp()

我們提供了全局的getApp()函數(shù)，可以獲取到小程序?qū)嵗?，一般用在各個(gè)子頁面之中獲取頂層應(yīng)用。

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

注意：

• App()必須在 app.js 里調(diào)用，且不能調(diào)用多次。
• 不要在定義于 App() 內(nèi)定義的函數(shù)中調(diào)用 getApp()，使用 this 就可以拿到 app 實(shí)例。
• 不要在 onLaunch 里調(diào)用[getCurrentPages()](https://myapp.alipay.com/developer/framework/page#getCurrentPages()，這個(gè)時(shí)候 page 還沒有生成。
• 通過 getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。

全局的數(shù)據(jù)可以在 App() 中設(shè)置，各個(gè)子頁面通過全局函數(shù) getApp() 可以獲取全局的應(yīng)用實(shí)例。下面是一個(gè)例子。

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

// a.js


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


// 生成 app 實(shí)例
var app = getApp()


// 拿到全局?jǐn)?shù)據(jù)，并改變它
app.globalData++

// b.js


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


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

上面代碼中，a.js和b.js都聲明了變量localValue，它們不會(huì)互相影響，因?yàn)楦鱾€(gè)腳本聲明的變量和函數(shù)只在該文件中有效。

app.json

app.json用于全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

以下是一個(gè)包含了部分配置選項(xiàng)的簡單配置app.json。

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

app.json配置項(xiàng)如下。

（1）pages

pages屬性是一個(gè)數(shù)組，每一項(xiàng)都是字符串，用來指定小程序的頁面。每一項(xiàng)代表對應(yīng)頁面的路徑信息，數(shù)組的第一項(xiàng)代表小程序的首頁。小程序中新增/減少頁面，都需要對 pages數(shù)組進(jìn)行修改。

頁面路徑不需要寫 js 后綴，框架會(huì)自動(dòng)去加載同名的.json、.js、.axml、.acss文件。

舉例來說，如果開發(fā)目錄為：

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

（2）window

window屬性用于設(shè)置小程序通用的的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

子屬性包括 titleBarColor defaultTitle pullRefresh allowsBounceVertical。

下面是一個(gè)例子。

{
  "window":{
    "defaultTitle": "支付寶接口功能演示"
  }
}

（3）tabBar

如果你的小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部欄可以切換頁面），那么可以通過tabBar配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對應(yīng)頁面。

注意，通過頁面跳轉(zhuǎn)（my.navigateTo）或者頁面重定向（my.redirectTo）所到達(dá)的頁面，即使它是定義在 tabBar 配置中的頁面，也不會(huì)顯示底部的 tab 欄。另外，tabBar 的第一個(gè)頁面必須是首頁。

tabBar 配置

每個(gè) item 配置

icon 推薦大小為 60*60px 大小，系統(tǒng)會(huì)對任意傳入的圖片非等比拉伸/縮放。

例如

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