2.4.4 頁面樣式文件（WXSS）

WXSS（WeiXin Style Sheets）是基于CSS拓展的樣式語言，用于描述WXML的組件樣式，決定WXML的組件該怎么顯示，它具有CSS的大部分特性，在CSS基礎上WXSS拓展了尺寸單位、樣式導入特性，對CSS選擇器屬性上做了部分兼容，目前官方文檔沒有給出WXSS具體具備CSS哪些特性，在開發過程中不能想當然地使用CSS屬性，一定要使用iOS和Android真機進行調試，本小節主要講述WXSS和CSS的不同點，后續布局章節會講解CSS盒子模型布局相關屬性，其余CSS屬性大家可以參考W3C規范，在WXSS中我們甚至能使用一些兼容性寫法，不過在開發過程中我們一定要開啟開發者工具中“開啟上傳代碼時樣式文件自動補全”功能，這樣小程序會自動補全其余一些樣式的兼容性寫法，保證在不同終端達到統一視覺效果。

1．尺寸單位

CSS中原有尺寸單位在不同尺寸屏幕中不能完美實現元素按比例縮放，WXSS在此基礎上拓展了兩種尺寸單位：rpx（responsive pixel）和rem（root em），這兩種尺寸單位都是相對單位，最終會被換算成px，使用rpx和rem布局頁面能讓頁面界面在不同尺寸屏幕中按比例縮放。

（1）rpx

在渲染過程中rpx會按比例轉化為px, WXSS規定屏幕寬度為750rpx，如在iPhone6中，屏幕寬度為375px，即750rpx=375px，那么在iPhone6中1rpx=0.5px。

（2）rem

同rpx一樣，WXSS規定屏幕寬度為20rem，同樣在iPhone6中，屏幕寬度為375px，即20rem=375px，所以在iPhone6中1rem=18.75px。

以常規設備為例，這些尺寸換算如表2-1所示。

在設計界面時，如果要實現尺寸自適應，設計師可以用iPhone6作為視覺標準。由于rpx和rem最終要被換算為px，在某些情況下可能會存在除不盡的情況，會導致界面中產生毛刺，這種情況大家要多留意、多測試以盡量避免這種情況。

2．選擇器

CSS選擇器用于選擇需要添加樣式的元素，WXSS實現了CSS的部分選擇器，使用規則和CSS一樣，熟悉CSS的同學會很快上手，參見表2-2。

WXSS和CSS代碼結構一樣，一段樣式前面是選擇器，后面是以大括號括起來的樣式組合，每個樣式以分號結束，如下所示：

    選擇器 { 樣式1; 樣式2; }

選擇器使用規則和CSS也是一致的，如下所示：

    /＊ 選擇所有class含有myClass的組件，并設置邊框 ＊/
    .myClass { border : solid 1px #000; }
    /＊ 選擇所有view組件且class含有myClass的組件，并設置邊框 ＊/
    view.myClass { border : solid 1px #000; }
    /＊ 選擇所有view組件中子節點class含有myClass的組件，并設置邊框 ＊/
    view .myClass { border : solid 1px #000; }
    /＊
      選所有class含有myContent組件中所有checkbox組件和radiobox組件，并設置它們的邊框
      ＊/
    .myContent checkbox，
    .myContent radiobox { boder : solid 1px #000; }
    /＊ 選擇所有view組件且class含有myClass的組件，在其后面插入新內容，內容為new content＊/
    view.myClass::after { content : 'new content' }

3．內聯樣式

同HTML一樣，樣式除了寫在WXSS文件中，也可以通過設置style、class屬性控制樣式，一般靜態樣式可以統一寫到class中，style樣式會在運行時解析，如非特別需要，盡量避免將靜態樣式寫入style，以免影響渲染速度，例如：

    <! --  通過style動態設置樣式  -->
    <view style="border:solid 1px #000; background-color:{{color}}"></view>
    <! --  通過class選擇器設置樣式  -->
    <view class="myClassName1 myClassName"></view>

4．樣式導入

通常在項目中為了便于管理會將WXSS按職責拆分為多個文件，這時便需要@import語句在當前WXSS文件中導入其他WXSS文件，@import后寫入需要導入WXSS文件的相對路徑，用“; ”表示語句結束，例如：

    .common-view { border : solid 1px #000; }
    @import "common.wxss";
    .page-container { padding : 10px; }

至此，小程序框架頁面相關的4個文件已介紹完成，大家對每個文件的功能、內容應該都有了一定了解，在本章最后一節中，我們將探討小程序的模塊化。