微信小程序開發：學習筆記[3]——WXSS樣式

微信小程序開發：學習筆記[3]——WXSS樣式

快速開始

介紹

　　WXSS（WeiXin Style Sheets）是一套用於小程序的樣式語言，用於描述WXML的組件樣式，也就是視覺上的效果。

　　WXSS與Web開發中的CSS相似。爲了更適合小程序開發，WXSS對CSS作了一些補充以及修改。

文件組成

　　

• 項目公共樣式：根目錄中的app.wxss爲項目公共樣式，它會被注入到小程序的每一個頁面。
• 頁面樣式：與app.json註冊過的頁面同名且位置同級的WXSS文件。好比註冊了pages/rpx/index頁面，那pages/rpx/index.wxss爲頁面pages/rpx/index.wxml的樣式。
• 其它樣式：其它樣式能夠被項目公共樣式和頁面樣式引用。

　　在小程序開發中，開發者不須要像Web開發那樣去優化樣式文件的請求數量，只須要考慮代碼的組織便可。樣式文件最終會被編譯優化，具體的編譯原理咱們留在後面章節再作介紹。

尺寸單位

　　在WXSS中，引入了rpx（responsive pixel）尺寸單位。引用新尺寸單位的目的是，適配不一樣寬度的屏幕，開發起來更簡單。

傳統的px單位在不一樣的分辨率屏幕下顯示效果差異很大：

採用rpx後不一樣分辨率下顯示效果相同：

　　

　　小程序編譯後，rpx會作一次px換算。換算是以375個物理像素爲基準，也就是在一個寬度爲375物理像素的屏幕下，1rpx = 1px。

　　舉個例子：iPhone6屏幕寬度爲375px，共750個物理像素，那麼1rpx = 375 / 750 px = 0.5px。

　　

引用WXSS文件

在CSS中，開發者能夠這樣引用另外一個樣式文件：@import url('./test_0.css')

這種方法在請求上不會把test_0.css合併到index.css中，也就是請求index.css的時候，會多一個test_0.css的請求。

在小程序中，咱們依然能夠實現樣式的引用，樣式引用是這樣寫：

@import './test_0.wxss'

因爲WXSS最終會被編譯打包到目標文件中，用戶只須要下載一次，在使用過程當中不會由於樣式的引用而產生多餘的文件請求。

內聯樣式 

　　

動態改變樣式

 

 

 

咱們定義了一個view元素，顏色是動態獲取的，即data裏面的eleColor，因此初始化爲紅色，咱們又定義了一個按鈕，單擊後會修改eleColor的值。

當咱們單擊按鈕後，view會由之前的紅色變成藍色，記住這裏的更新是由小程序框架動態實現的！

選擇器

WXSS的優先級與CSS優先級類似。權重越高越優先。在優先級相同的狀況下，後設置的樣式優先級高於先設置的樣式。

view{ // 權重爲 1
  color: blue
}

.ele{ // 權重爲 10
  olor: red
}

#ele{ // 權重爲 100
  color: pink
}

view#ele{ // 權重爲 1 + 100 = 101，優先級最高，元素顏色爲orange
  color: orange
}

view.ele{ // 權重爲 1 + 10 = 11
  color: green
}

官方樣式庫

咱們能夠到https://github.com/Tencent/weui-wxss查看微信小程序官方提供的一套樣式庫。