全局配置和頁面配置

1. 前言

在開發uni-app 項目過程中，有許多配置項需要我們自己去操作配置，我們最常操作的就是項目的全局配置和頁面配置，包括項目的標題欄、底部 Tab 欄、窗口背景色等。

主要通過操作項目根目錄下面的 pages.json 文件，來進行項目的全局配置和頁面配置。

接下來我們來學習怎樣進行項目的配置。

2. 常用配置項屬性

下面的這些屬性都是用來進行項目配置的。一些常用的配置項，項目創建完成后，會自動幫我們生成，我們需要去了解每個配置項的含義，以及配置項對應的設置條件有哪些限制。

比如導航欄標題顏色樣式 navigationBarTextStyle 這一個配置項，僅支持black/white 這兩個顏色的設置，很多人會設置成十六進制顏色，比如 #0000FF，這樣系統就會識別不了。

3. 配置項應用

接下來我們通過實例來了解一下各個配置項的應用。

3.1 全局配置

全局配置作用于整個項目，也就是對項目中所有的頁面都起作用，在項目根目錄下面的 pages.json 文件中，找到globalStyle配置項，在這個配置項中進行項目的全局配置。

實例：

"globalStyle": {
  "navigationBarTextStyle": "black", //導航欄標題顏色
  "navigationBarTitleText": "慕課網", //導航欄標題文字
  "navigationBarBackgroundColor": "#F8F8F8", //導航欄背景顏色
  "backgroundColor": "#F8F8F8", //下拉窗口背景顏色
  "backgroundTextStyle":light, //下拉 loading 的樣式
  "enablePullDownRefresh":true, //開啟下拉刷新
  "onReachBottomDistance":60,//頁面上拉觸發距頁面底部距離為60
  "usingComponents":{
    "collapse-tree-item":"/components/collapse-tree-item"
  },//引用小程序組件
  "pageOrientation": "auto"//支持屏幕旋轉
},

3.1.1 enablePullDownRefresh 下拉刷新

想要實現頁面下拉刷新的效果，需要先在配置文件中將 enablePullDownRefresh 設置為 true，再在.vue頁面文件中配合 onPullDownRefresh 函數進行頁面下拉效果的實現。

這里很多人會忘記在配置文件中設置 enablePullDownRefresh 配置項，導致下拉效果失靈。
實例：

//pages.json 文件
"globalStyle": {
"enablePullDownRefresh":true
}

//頁面.vue文件
onPullDownRefresh() {
  console.log('refresh');
  //用stopPullDownRefresh結束下拉
  uni.stopPullDownRefresh();
}

3.1.2 pageOrientation 屏幕旋轉設置

這個屬性可以設置為 auto、portrait、landscape。分別代表啟用屏幕旋轉、固定為豎屏顯示、固定為橫屏顯示。默認值為 portrait 固定為豎屏顯示。

這個屬性，通常可以使用 js 作為輔助，用 js 讀取頁面的顯示區域尺寸，來進行屏幕方向的監聽，每次屏幕旋轉時都會調用這個方法。需要注意的是，在模擬器上面不會觸發這個方法，需要使用真機調試才能觸發。
實例：

Page({
  onResize(res) {
    res.size.windowWidth // 新的顯示區域寬度
    res.size.windowHeight // 新的顯示區域高度
  }
})

3.2 頁面配置

頁面配置只作用于單個頁面，與全局配置沖突的地方，頁面配置會覆蓋掉全局配置。在項目根目錄下面的 pages.json 文件中，找到 pages 配置項里面的 style 來進行頁面配置。

3.2.1 配置項屬性

實例：

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁", //設置頁面標題文字
        "disableScroll": true, //設置為true則頁面整體不能上下滾動
        "enablePullDownRefresh":true, //開啟下拉刷新
        "navigationBarShadow": {  
          "colorType": "green"
        },//導航欄陰影
      }
    },
    ...
  ]
}

3.2.2 navigationBarShadow 導航欄陰影

導航欄陰影設置項不是所有的顏色都支持，需要注意哦。

4. 小結

uni-app 項目的配置主要就是這些內容，比較簡單，但是很多細節需要我們去注意和掌握。如果掌握不熟練，會在實際開發的過程中埋下很多坑。
本小節主要介紹了 uni-app 項目的全局配置和頁面配置，重點如下：

• 了解幾個常用配置項屬性的作用；
• 了解全局配置和頁面配置的應用。