【微信小程序】全局樣式與局部樣式(app.wxss)/全局配置（app.json）/小程序窗口組成/頁面配置（index.json）

1.全局樣式

定義在app.wxss中的樣式稱為全局樣式，作用於每個頁面

2.局部樣式

在頁面的.wxss文件中的樣式成為局部樣式，只作用於當前頁面

*注意（誰權重大聽誰的）

1. 當局部樣式和全局樣式沖突時，根據就近原則，局部樣式會覆全局樣式

2. 只有當局部央視的權重大於或等於全局樣式時，才會覆蓋全局的樣式

全局配置

小程序根目錄下的app.json文件時小程序的全局配置文件。常用配置如下：

1. pages：記錄當前小程序所有頁面的存放路徑
2. window：全局設置小程序窗口的外觀
3. tabBar：設置小程序底部的tabBar效果
4. style：是否啟用做新版的組件樣式

1.小程序Window窗口組成部分

2.了解window節點常用的配置項

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

概念:下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數據的行為

設置步驟: app.json -> window ->把 enablePullDownRefresh的值設置為true

注意:在app.json中啟用下拉刷新功能，會作用於每個小程序頁面!

4.設置下拉背景色

backgroundColor

5.設置下拉刷新時loading的樣式

當全局開啟下拉刷新功能之后，默認窗口的loading 樣式為白色，如果要更改loading 樣式的效果，設置步驟為 app.json -> window ->為backgroundTextStyle指定dark值。效果如下:

6.設置上拉觸底的舉例

概念:上拉觸底是移動端的專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數據的行為。設置步驟: app.json -> window ->為onReachBottomDistance設置新的數值

注意:默認距離為50px，如果沒有特殊需求，建議使用默認值即可。

距離底部50像素時自動加載數據

tabBar

1.什么是tabBar

tabBar是移動端應用常見的頁面效果，用於實現多頁面的快速切換。

小程序中通常將其分為:

1. 頂部tabBar
2. 底部tabBar

注意：

	tabBar中只能配置==最少2個==、==最多5個==tab頁簽

	當渲染==頂部 tabBar==時，==不顯示icon==，只顯示文本

2.tabBar的6個組成部分

3.tabBar節點的配置項

4.每個tab項的配置選項

tabBar的頁面必須放pages配置的最前面

"pages":[
    "pages/list/list",
    "pages/index/index"
  ],
"tabBar": {
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "color": "#000000",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "./images/index.png",
      "selectedIconPath": "./images/index-action.png"
    },{
      "pagePath": "pages/list/list",
      "text": "菜單",
      "iconPath": "./images/menu.png",
      "selectedIconPath": "./images/menu-action.png"

    }]
  },

頁面配置

1.頁面配置文件的作用

小程序中，每個頁面都有自己的.json配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置。

2.頁面配置文件和全局配置文件的關系

如果某些小程序頁面想要擁有特殊的窗口表現，此時，“頁面級別的.json配置文件”就可以實現這種需求。

注意*：當頁面配置與全局配置沖突時，根據就近原則，最終效果以頁面配置為主

3.頁面配置中常用的配置項