全局配置和頁(yè)面配置

1. 前言

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

主要通過(guò)操作項(xiàng)目根目錄下面的 pages.json 文件，來(lái)進(jìn)行項(xiàng)目的全局配置和頁(yè)面配置。

接下來(lái)我們來(lái)學(xué)習(xí)怎樣進(jìn)行項(xiàng)目的配置。

2. 常用配置項(xiàng)屬性

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

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

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

接下來(lái)我們通過(guò)實(shí)例來(lái)了解一下各個(gè)配置項(xiàng)的應(yīng)用。

3.1 全局配置

全局配置作用于整個(gè)項(xiàng)目，也就是對(duì)項(xiàng)目中所有的頁(yè)面都起作用，在項(xiàng)目根目錄下面的 pages.json 文件中，找到globalStyle配置項(xiàng)，在這個(gè)配置項(xiàng)中進(jìn)行項(xiàng)目的全局配置。

實(shí)例：

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

3.1.1 enablePullDownRefresh 下拉刷新

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

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

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

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

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

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

這個(gè)屬性，通?？梢允褂?js 作為輔助，用 js 讀取頁(yè)面的顯示區(qū)域尺寸，來(lái)進(jìn)行屏幕方向的監(jiān)聽(tīng)，每次屏幕旋轉(zhuǎn)時(shí)都會(huì)調(diào)用這個(gè)方法。需要注意的是，在模擬器上面不會(huì)觸發(fā)這個(gè)方法，需要使用真機(jī)調(diào)試才能觸發(fā)。
實(shí)例：

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

3.2 頁(yè)面配置

頁(yè)面配置只作用于單個(gè)頁(yè)面，與全局配置沖突的地方，頁(yè)面配置會(huì)覆蓋掉全局配置。在項(xiàng)目根目錄下面的 pages.json 文件中，找到 pages 配置項(xiàng)里面的 style 來(lái)進(jìn)行頁(yè)面配置。

3.2.1 配置項(xiàng)屬性

實(shí)例：

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

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

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

4. 小結(jié)

uni-app 項(xiàng)目的配置主要就是這些內(nèi)容，比較簡(jiǎn)單，但是很多細(xì)節(jié)需要我們?nèi)プ⒁夂驼莆?。如果掌握不熟練，?huì)在實(shí)際開(kāi)發(fā)的過(guò)程中埋下很多坑。
本小節(jié)主要介紹了 uni-app 項(xiàng)目的全局配置和頁(yè)面配置，重點(diǎn)如下：

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