快捷導(dǎo)航

微信小程序的WXSS和全局、頁(yè)面配置詳細(xì)講解

更新時(shí)間：2022年08月02日 12:03:56 作者：前端小劉不怕牛牛

WXSS(WeiXin?Style?Sheets)是一套樣式語(yǔ)言,用于描述?WXML?的組件樣式,下面這篇文章主要給大家介紹了關(guān)于微信小程序WXSS和全局、頁(yè)面配置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一，WXSS

首先我們先介紹一下wxss，wxss是微信小程序獨(dú)有的模板樣式，它類似于web開(kāi)發(fā)中的CSS，具備CSS大部分的功能，同時(shí)，它還拓展出了幾個(gè)內(nèi)容功能，接下來(lái)牛牛介紹一下新增的rpx尺寸單位以及樣式導(dǎo)入@import。

1.1 rpx尺寸單位

rpx尺寸單位是微信獨(dú)有的，主要用來(lái)解決屏適配問(wèn)題。怎么回事呢？我們知道，手機(jī)款式很多，手機(jī)屏幕的大小也并不一致，我們想要讓小程序根據(jù)屏幕寬度自動(dòng)完成屏適配，于是有了rpx，rpx將屏幕寬度等分為750份，我們?cè)陂_(kāi)發(fā)的時(shí)候使用rpx尺寸單位，到使用的時(shí)候就會(huì)將其換算成像素單位，實(shí)現(xiàn)屏適配。

tip:

微信建議開(kāi)發(fā)者，開(kāi)發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。

1.2 樣式導(dǎo)入@import

在CSS中，我們用<link>標(biāo)簽導(dǎo)入外聯(lián)樣式表，在微信小程序中，單個(gè)頁(yè)面的wxss文件渲染頁(yè)面并不用我們操心，不過(guò)有時(shí)候我們需要格外導(dǎo)入外聯(lián)樣式，而在WXSS中，我們使用@import實(shí)現(xiàn)。

語(yǔ)法：@import "相對(duì)路徑"

1.3 全局樣式

微信小程序的全局樣式是寫(xiě)在根目錄的app.wxss文件中的，全局樣式就意味著里面的樣式將在每一個(gè)頁(yè)面均生效。

需要注意的是，當(dāng)全局樣式與頁(yè)面的局部樣式發(fā)生沖突時(shí)，但局部選擇器權(quán)重大于或等于全局樣式選擇器權(quán)重的時(shí)候，會(huì)采取就近原則，用局部樣式的定義渲染。

補(bǔ)充：wxss的擴(kuò)展-樣式導(dǎo)入

在某些情況下，可能會(huì)將樣式分在多個(gè) wxss 文件中，方便對(duì)樣式的管理（實(shí)際項(xiàng)目中，一般不會(huì)將一個(gè)頁(yè)面的所有樣式都寫(xiě)到一個(gè) page.wxss 文件中，而是在該頁(yè)面文件夾下新建一個(gè) style 文件夾，其中新建一些 wxss 文件，方便管理樣式），這個(gè)時(shí)候，就需要使用樣式導(dǎo)入（將 style 文件夾下的 wxss 文件導(dǎo)入到 page.wxss 中），從而讓單獨(dú)的 wxss 生效。

在一個(gè) wxss 中導(dǎo)入另一個(gè) wxss 文件：

（1）使用 @import 進(jìn)行導(dǎo)入

（2）@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑（或者絕對(duì)路徑也可以），用；表示語(yǔ)句結(jié)束。

/*page.wxss為文件中導(dǎo)入其他 wxss 樣式*/
@import './style/box.wxss';
@import './style/container.wxss';

也可以在 app.wxss 中導(dǎo)入一些 wxss 樣式文件，比如在實(shí)際項(xiàng)目開(kāi)發(fā)中可能會(huì)用到很多按鈕，為了使這些按鈕樣式得到統(tǒng)一，就可以在 app.wxss 中導(dǎo)入一個(gè)專門(mén)為按鈕寫(xiě)的樣式。上面這種情況在開(kāi)發(fā)中一般會(huì)在根目錄下新建一個(gè) style 文件夾，然后再在該文件夾下新建一個(gè) btn.wxss 樣式文件：.btn{width:100px；height:60px；display:inline-block};。然后到 app.wxss 文件中對(duì)該文件進(jìn)行導(dǎo)入：@import './style/btn.wxss';。完成上述步驟之后，在項(xiàng)目開(kāi)發(fā)中，只需要對(duì)按鈕組件加上一個(gè) .btn類名即可。

二，全局配置

全局配置我們?cè)谥暗奈恼乱灿凶鲞^(guò)一定的了解，根目錄下的app.json文件就是專門(mén)放全局配置的地方。

app.json文件中主要有六部分。

pages，用來(lái)存放頁(yè)面的路徑，第一個(gè)放的就是小程序的首頁(yè)。

  "pages": [
    "pages/index/index",
    "pages/list/list"
  ],

window，頁(yè)面的窗口外觀，如：

  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第一個(gè)小程序"
  },

tabBar，頁(yè)面的底部欄，微信小程序中這部分經(jīng)常作為跳轉(zhuǎn)頁(yè)面的工具。

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)"
      },
      {
        "pagePath": "pages/list/list",
        "text": "目錄"
      }
    ],
    "color": "#fff",
    "selectedColor": "#999",
    "backgroundColor": "#111"
  },

還有一個(gè)常見(jiàn)的就是style，用來(lái)設(shè)置是否啟用新版組件樣式，如果需要，需要讓style的值為v2,如果不采用，直接把style那一行刪掉即可。

下面這張圖方便理解

2.1 屬性

屬性名中以navigationBar開(kāi)頭的，就是我們的導(dǎo)航欄部分，也就是寫(xiě)在我們app.json的window下。

以background開(kāi)頭的，表示對(duì)背景區(qū)域進(jìn)行設(shè)置，背景區(qū)域在微信小程序默認(rèn)為不可見(jiàn)，只有當(dāng)我們下拉顯示時(shí)才會(huì)出現(xiàn)，一般在開(kāi)發(fā)中還有伴隨加載事件和圖片。

上面各屬性其實(shí)我們通過(guò)說(shuō)明列可以明白個(gè)大概，博主就不一一解釋。

需要注意的是，最后一欄的onReachBottomDistance屬性，指的是頁(yè)面上拉觸發(fā)據(jù)頁(yè)面底部距離，也就是你玩手機(jī)往下滑的時(shí)候，屏幕底部離頁(yè)面底部多遠(yuǎn)觸發(fā)，一般與刷新新內(nèi)容配合，如內(nèi)容不夠需要拉取更多內(nèi)容。

三，頁(yè)面配置

app.json中的部分配置也可以在頁(yè)面的json文件中配置，不過(guò)需要注意的是，當(dāng)全局配置和頁(yè)面配置沖突時(shí)，也是會(huì)遵循就近原則，沖突屬性的值以頁(yè)面配置為準(zhǔn)。

而且，在頁(yè)面配置中，我們不需要再次指定為window字段的屬性。

直接，如下所示：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}