全局配置和頁面配置

1. 前言

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

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

接下來我們來學(xué)習(xí)怎樣進行項目的配置。

2. 常用配置項屬性

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

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

3. 配置項應(yīng)用

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

3.1 全局配置

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

實例：

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

3.1.1 enablePullDownRefresh 下拉刷新

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

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

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

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

3.1.2 pageOrientation 屏幕旋轉(zhuǎn)設(shè)置

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

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

Page({
  onResize(res) {
    res.size.windowWidth // 新的顯示區(qū)域?qū)挾?/span>
    res.size.windowHeight // 新的顯示區(qū)域高度
  }
})

3.2 頁面配置

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

3.2.1 配置項屬性

實例：

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

3.2.2 navigationBarShadow 導(dǎo)航欄陰影

導(dǎo)航欄陰影設(shè)置項不是所有的顏色都支持，需要注意哦。

4. 小結(jié)

uni-app 項目的配置主要就是這些內(nèi)容，比較簡單，但是很多細節(jié)需要我們?nèi)プ⒁夂驼莆铡Ｈ绻莆詹皇炀?，會在實際開發(fā)的過程中埋下很多坑。
本小節(jié)主要介紹了 uni-app 項目的全局配置和頁面配置，重點如下：

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