1.3 WXSS樣式--'*.wxss'文件 · 微信

[TOC] ## 1.3 WXSS樣式-- '*.wxss'文件 `WXSS`（WeiXin Style Sheets）是一套用于小程序的樣式語言，用于描述WXML的組件樣式，也就是視覺上的效果。 WXSS與Web開發中的CSS類似。為了更適合小程序開發，WXSS對CSS做了一些補充以及修改。 - **項目公共樣式**：根目錄中的`app.wxss`文件為項目公共樣式文件，它會被注入到小程序的每個頁面。 - **頁面樣式**：與app.json注冊過的頁面同名且位置同級的WXSS文件。比如：在`app.json`文件中注冊了`pages/rpx/index`頁面，那`pages/rpx/index.wxss`為頁面`pages/rpx/index.wxml`的樣式文件。定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。其它樣式：其它樣式可以被項目公共樣式和頁面樣式引用，引用方法查看本章中的`WXSS引用`小節。在小程序開發中，開發者不需要像Web開發那樣去優化樣式文件的請求數量，只需要考慮代碼的組織即可。樣式文件最終會被編譯優化，具體的編譯原理我們留在后面章節再做介紹。 ### 1.3.1 尺寸單位在WXSS中，引入了`rpx`（responsive pixel）尺寸單位。引用新尺寸單位的目的是，適配不同寬度的屏幕，開發起來更簡單。小程序編譯后，rpx會做一次px換算。換算是以375個物理像素為基準，也就是在一個寬度為375物理像素的屏幕下，1rpx = 1px。舉個例子：iPhone6屏幕寬度為375px，共750個物理像素，那么1rpx = 375 / 750 px = 0.5px。 ### 1.3.2 WXSS引用在CSS中，開發者可以這樣引用另一個樣式文件：`@import url('./test_0.css')` 這種方法在請求上不會把test_0.css合并到index.css中，也就是請求index.css的時候，會多一個test_0.css的請求。在小程序中，我們依然可以實現樣式的引用，樣式引用是這樣寫：`@import './test_0.wxss'` 由于WXSS最終會被編譯打包到目標文件中，用戶只需要下載一次，在使用過程中不會因為樣式的引用而產生多余的文件請求。 ### 1.3.3 內聯樣式 WXSS內聯樣式與Web開發一致: ~~~   <view style="color: red; font-size: 48rpx"></view> ~~~ 小程序支持動態更新內聯樣式： ~~~    <view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view> ~~~ ### 1.3.4 選擇器目前支持的選擇器如表2-2所示。 :-: 表2-2 小程序WXSS支持的選擇器 | 類型 | 選擇器 | 樣例 | 樣例描述 | | --- | --- | --- | --- | | 類選擇器| .class| .intro | 選擇所有擁有 class="intro" 的組件| | id選擇器| | #id | #firstname| 選擇擁有 id="firstname" 的組件| | 元素選擇器| element| view checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件| | 偽元素選擇器| ::after | view::after | 在 view 組件后邊插入內容| | 偽元素選擇器| ::before | view::before | 在 view 組件前邊插入內容| WXSS優先級與CSS類似，權重越高越優先。在優先級相同的情況下，后設置的樣式優先級高于先設置的樣式。代碼清單2-25 WXSS 選擇器優先級權重 ~~~ view{ // 權重為 1 color: blue } .ele{ // 權重為 10 color: red } #ele{ // 權重為 100 color: pink } view#ele{ // 權重為 1 + 100 = 101，優先級最高，元素顏色為orange color: orange } view.ele{ // 權重為 1 + 10 = 11 color: green } ~~~ ### 1.3.5 官方樣式庫為了減輕開發者樣式開發的工作量，我們提供了`WeUI.wxss`基礎樣式庫。 WeUI是一套與微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含`button、cell、dialog、progress、toast、article、actionsheet、icon`等各式原生。具體使用文檔可參考：https://github.com/Tencent/weui-wxss