上一節(jié)，我們學會了如何創(chuàng)建一個支付寶小程序。這一節(jié)，我們學習支付寶小程序配置App。

三、 支付寶小程序——框架（一）

1. 打開支付寶小程序開發(fā)工具，查看項目框架結構

demo項目結構

其實本身的項目結構最精簡的還不現(xiàn)在這個結構，一個小程序必要的文件有app.json,app.js，這兩個文件必須存在且放在項目的根目錄中，當然我們創(chuàng)建一個小程序，我們肯定需要有頁面page，如index文件夾中的文件就是一個page頁面，一個頁面的必要文件也只有axml和js文件。

2. app.js 小程序應用邏輯（必須有且存在項目根目錄下）

App({
  onLaunch(options) {},  // 小程序啟動
  onShow(options) {},   // 小程序切換到前臺
  onHide() {},          // 小程序切換到后臺
  onError(msg) {       // 小程序出錯
    console.log(msg)
  }
})

App 代表頂層應用，管理所有頁面和全局數(shù)據(jù)，以及提供生命周期方法。它也是一個構造方法，生成 App 實例。一個小程序就是一個 App 實例。
小程序的四個鉤子事件：
onLaunch: 監(jiān)聽小程序初始化，當小程序初始化完成時觸發(fā)，全局只觸發(fā)一次
onShow: 監(jiān)聽小程序顯示，當小程序啟動，或從后臺進入前臺顯示時觸發(fā)
onHide: 監(jiān)聽小程序隱藏，當小程序從前臺進入后臺時觸發(fā)
onError: 監(jiān)聽小程序錯誤，當小程序發(fā)生 js 錯誤時觸發(fā)

3. app.json 小程序應用配置

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "defaultTitle": "我的第一個支付寶小程序"
  },
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首頁"
      },
      {
        "pagePath": "pages/index/index",
        "name": "日志"
      }
    ]
  }
}

pages:數(shù)組結構，必填，設置小程序頁面路由
window:對象結構，選填，設置小程序默認頁面的窗口表現(xiàn)
tabBar:對象結構，選填，設置小程序底部tab的表現(xiàn)

運行上述配置文件，出現(xiàn)如下效果。
具體參數(shù)的設置可查看小程序開發(fā)文檔：支付寶小程序開發(fā)文檔

效果圖

至此，我們已經(jīng)學學習了小程序的應用邏輯和應用配置。下一節(jié)，我們將做個小案例

上一節(jié)：二、 開啟我的第一個支付寶小程序

下一節(jié)：四、支付寶小程序——框架（二）

原文作者：Anting全棧開發(fā)
技術博客：http://www.itdecent.cn/u/259b7db6cc20
90后，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的全棧開發(fā)一枚。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，對于博客上面有不會的問題，可以加入qq技術交流群聊：649040560。