使用全局配置文件app.json

app.json 配置文件

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，

它決定了頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。

在 app.json 配置文件中，最主要的配置節(jié)點是：

• pages 數(shù)組：配置小程序的頁面路徑
• window 對象：用于設(shè)置小程序的狀態(tài)欄、導航條、標題、窗口背景色
• tabBar 對象：配置小程序的tab欄效果
  注：全局配置詳細文檔

一.pages數(shù)組的用法

app.json 中的 pages 數(shù)組，用來配置小程序的頁面路徑

• pages 用于指定小程序由哪些頁面組成，每一項都對應(yīng)一個頁面的 路徑+文件名 信息。
• 文件名不需要寫文件后綴，框架會自動去尋找對應(yīng)位置的 .json、 .js、 .wxml 和 .wxss 四個文件進行處理。
  
  image.png

自動創(chuàng)建新頁面

1. 需要新建頁面目錄 -> 新建頁面文件 -> 修改pages數(shù)組
2. 打開 app.json -> pages 數(shù)組節(jié)點 -> 新增頁面路徑并保存 -> 自動創(chuàng)建路徑對應(yīng)的頁面

設(shè)置默認首頁

• 打開 app.json -> pages 數(shù)組節(jié)點
• 按需調(diào)整數(shù)組中路徑的順序，即可修改默認首頁
  注意：
  ① 數(shù)組的第一項代表小程序的初始頁面（首頁）。
  ② 小程序中新增/減少頁面，都需要對 pages 數(shù)組進行修改。

二。window對象

小程序窗口的組成部分

image.png

window節(jié)點常用的配置項

image.png

1.設(shè)置導航欄標題文字內(nèi)容

• app.json --> window --> navigationBarTitleText
• 將屬性值修改即可

2.設(shè)置導航欄背景色

• app.json --> window --> navigationBarBackgroundColor
• 將屬性值修改為指定的顏色就可以

3.設(shè)置導航欄標題顏色

• app.json --> window --> navigationBarTextStyle
• 將屬性值修改為指定的顏色就可以black/white

4.全局開啟下拉刷新功能

通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數(shù)據(jù)的行為

• app.json --> window --> 把 enablePullDownRefresh 的值設(shè)置為 true

5.設(shè)置下拉刷新窗口的背景色

當全局開啟下拉刷新功能之后，默認的窗口背景為白色

• app.json -> window -> backgroundColor
  當全局開啟下拉刷新功能之后，默認的窗口背景為白色；如果自定義下拉刷新窗口背景色，設(shè)置步驟為 :
  app.json -> window -> 為 backgroundColor 指定16進制顏色值 #eee

6.設(shè)置下拉loading的樣式

當全局開啟下拉刷新功能之后，默認窗口的loading樣式為白色

• app.json --> window --> backgroundTextStyle
  當全局開啟下拉刷新功能之后，默認窗口的loading樣式為白色，如果要更改loading樣式的效果，設(shè)置步驟為

7.設(shè)置上拉觸底的距離

手指在屏幕上的上拉滑動操作，從而加載更多數(shù)據(jù)的行為

• app.json --> window --> onReachBottomDistance
  注意： 默認距離為 50px，如果沒有特殊需求，建議使用默認值即可

三 .tabBar - 配置Tab欄

tabBar 是移動端應(yīng)用常見的頁面效果，用于實現(xiàn)多頁面的快速切換；小程序中通常將其分為底部 tabBar 和頂部 tabBar

注意：tabBar 中，只能配置最少2個、最多5個 tab 頁簽，當渲染頂部 tabBar 的時候，不顯示 icon，只顯示文本
注： tabbar 詳細文檔

image.png

tabBar的組成部分

• backgroundColor：導航條背景色
• selectedIconPath：選中時的圖片路徑
• borderStyle：tabBar上邊框的顏色
• iconPath：未選中時的圖片路徑
• selectedColor：tab 上的文字選中時的顏色
• color：tab 上的文字默認（未選中）顏色
  
  image.png

tabBar節(jié)點的配置項

1. tabBar 節(jié)點的配置項

2.list 節(jié)點的配置項

注意：

• 都不支持網(wǎng)絡(luò)圖片
• 當 position 為 top 時，不顯示 icon。

使用頁面配置文件page.json

頁面級別和全局級別配置的關(guān)系

小程序中，app.json 中的 window節(jié)點，可以全局配置小程序中每個頁面的窗口表現(xiàn)；
如果某些小程序頁面，想要擁有特殊的窗口表現(xiàn)，此時，“頁面級別的.json配置文件”就可以實現(xiàn)這種需求；
總結(jié)：頁面級別配置優(yōu)先于全局配置生效。

頁面配置文件中可選的配置項列表

image.png

頁面配置文件中可選的配置項列表

image.png

小程序的生命周期

生命周期（Life Cycle）是指一個對象從 創(chuàng)建 -> 運行 -> 銷毀 的整個階段，強調(diào)的是一個時間段。

生命周期的兩種類型

小程序的生命周期

• 小程序的啟動，表示生命周期的開始
• 小程序的關(guān)閉，表示生命周期的結(jié)束
• 中間小程序運行的過程，就是小程序的生命周期

在小程序中，包含兩種類型的生命周期：

• 應(yīng)用生命周期：特指小程序從啟動 -> 運行 -> 銷毀的過程；

• 頁面生命周期：特指小程序中，每個頁面的加載 -> 渲染 -> 銷毀的過程；
  其中，頁面的生命周期范圍較小，應(yīng)用程序的生命周期范圍較大，如圖所示:

  
  
  image.png

什么是生命周期函數(shù)

小程序框架提供的內(nèi)置函數(shù)，會伴隨著生命周期，自動按次序執(zhí)行
允許程序員在特定的生命周期時間點上，執(zhí)行某些特定的操作。例如，頁面剛加載的時候，在生命周期函數(shù)中自動發(fā)起數(shù)據(jù)請求，獲取當前頁面的數(shù)據(jù)；
注意：生命周期強調(diào)的是時間段，生命周期函數(shù)強調(diào)的是時間點。

應(yīng)用生命周期函數(shù)

• app.js 是小程序執(zhí)行的入口文件，在 app.js 中必須調(diào)用 App() 函數(shù)，且只能調(diào)用一次。其中，App() 函數(shù)是用來注冊并執(zhí)行小程序的。
• App(Object) 函數(shù)接收一個 Object 參數(shù)，可以通過這個 Object 參數(shù)，指定小程序的生命周期函數(shù)。
  app.js代碼:

App({
   /**
   * 當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
   */
  onLaunch: function () {
    // console.log('小程序啟動了')
  },
 /**
   * 當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow
   */
  onShow: function (options) {
    // console.log('小程序顯示出來了')
  },

  /**
   * 當小程序從前臺進入后臺，會觸發(fā) onHide
   */
  onHide: function () {
    // console.log('小程序被隱藏到后臺了')
  },

  /**
   * 當小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時，會觸發(fā) onError 并帶上錯誤信息
   */
  onError: function (msg) {
    
  }
})

image.png

頁面生命周期函數(shù)

• 每個小程序頁面，必須擁有自己的 .js 文件，且必須調(diào)用 Page() 函數(shù)，否則報錯。其中 Page() 函數(shù)用來注冊小程序頁面。
• Page(Object) 函數(shù)接收一個 Object 參數(shù)，可以通過這個 Object 參數(shù)，指定頁面的生命周期函數(shù)。
  頁面生命周期.js:

//index.js
//獲取應(yīng)用實例
const app = getApp()

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () { },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () { },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () { },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () { }
})

image.png