[微信小程序之小白教程系列] 微信小程序 -- 樣式（WXSS）

官方文檔地址 https://mp.weixin.qq.com/debu...

問題來了？既然如此，咱們爲什麼還要寫這篇文章？

答案只有一個，讓你更快的「易懂」，換換思路，接下來的文章會對官方文檔作一個段落類的解釋。

爲了適應廣大的前端開發者，WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。與 CSS 相比，WXSS 擴展的特性有：尺寸單位和樣式導入。

補充：關於擴展的特性咱們下面會說，既然文檔說了WXSS具備CSS 大部分特性，那麼有什麼不一樣那？

一、沒有body
是的，在小程序的每個page裏是沒有body屬性的，不過你能夠經過在wxss中對page的設置來影響整個頁面的樣式，好比下面的代碼

page {
    background:#F8F8F8
}

諸如此類，固然你也能夠設置page的xxx.json中的backgroundColor屬性來影響一個page頁面下拉時出現的空白區域的顏色，通常來講當你頁面有下拉刷新和上拉加載功能時，每每要設置backgroundColor屬性。

二、沒有父子關係（如今版本已經支持了，這條過。）
在使用css的時候，咱們常常讓樣式的層級關係和html接點的層級關係保持一致，好比你的html代碼中有下面代碼

<div class="box">
    <p class="content">
        <strong ></strong>
    </p>
</div>

咱們習慣於css的寫法以下

.box .content strong {}

這樣寫的好處是strong的樣式不會去影響其餘地方的strong。可是在小程序中並不支持這種父子的層級關係。你只能一個一個的設置，看下面的小程序代碼

<view class="box">
    <text class="box-txt"></text>
</view>

針對於上面的視圖，對應的wxss應該如何寫那？看下面代碼

// 正確的
.box {}
.box-txt {}

// 錯誤的
.box .box-txt {}

這樣說你明白了吧？！

三、尺寸的變化
在css中咱們有不少衡量尺寸的單位，好比px、em等等，固然這些在小程序中也依然可使用，可是小程序又爲本身增長了一個單位，那就是rpx。

小程序做爲移動端的應用須要適配不一樣規格的設備而且兼容愈來愈大的手機（話說我依然喜歡iphone5的尺寸，單手可控並且牀上看電影不會砸到頭）。

因此rpx最重要的特性就是能夠根據屏幕寬度進行自適應。它規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

算明白了麼？官方給了一個表格，很淺顯易懂，見下圖。

這個換算比較簡單，不在講解，若是你真不懂能夠留言。

四、樣式導入
小程序的wxss支持樣式的導入，這個功能至關有用，尤爲是咱們使用一些其餘庫的時候能夠直接導入第三方的wxss文件，何其樂哉。

用法也很簡單，看看下面代碼。

@import "common.wxss";
.middle-p {
  padding:15px;
}

五、內聯樣式
和css同樣，wxss支持class和style兩種樣式，可是在用法上仍是有區別的，一句話歸納：「若是你的樣式中存在動態內容，將其寫到style中，其餘的都放到class文件，

好比這段代碼

<view style="color:{{color}};" />

將過多的樣式寫到style中帶來的問題就是小程序在渲染視圖的時候還要伴隨着解析對應的樣式佈局等，必然對性能有一些影響。

六、選擇器
另外對於css中的選擇器，wxss基本都支持了，好比類、ID、組件等，看看下面官方給的圖

並且相似於last-child等css的高級屬性，在wxss你也能夠愉快的使用。

七、全局樣式與局部樣式
原則上一個在小程序中一個wxss負責一個wxml視圖文件，可是對於一個應用來講總會有一些公用的屬性，所以小程序爲應用自身提供了一個wxss，那就是app.wxss，固然你無需人工引入，它會自動的加載到每個視圖上，這點要記住。

一點總結

關於wxss到底對css支持了哪些，微信官方並無給出相應的文檔，更多細節咱們要慢慢挖掘，畢竟騰訊不是百度，會把文檔寫的那麼好。