關于.acss文件

在視頻中已經說過了，小程序的設計思想和原生app的設計思想頗為相似，基本的應用單元為頁面。當然對于一個頁面來說每一個元素的放置位置在哪兒以及顯示成什么樣子這個是由樣式來決定的。我們知道在web開發中樣式是在css文件中規定的，叫做層疊樣式表 (Cascading Style Sheets)。其實在APP中樣式的約束也是使用css，在支付寶小程序中也是使用css不過文件的后綴是.acss而且對css3進行了擴充而已。

CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

那么在支付寶小程序中的.acss和微信小程序中的.wxcss沒有什么兩樣。上邊已經說了.acss其實包含了css3那么它還有一些新的特性是css3中不具備的，讓我們一一看看

rpx

第一次看到這個東西也能猜到他是干什么用的。在css中我們知道規定大小一般使用像素(px)這個單位。比如顯示生活中我們說房子128㎡那這兒的單位是平方米，在開發中需要更加精準的大小就是px像素。像素就非常精細了因為在我們顯示屏幕中像素是最小的顯示單元。這個道理如果不懂的話就找個LED屏幕仔細看，LED屏幕上一個一個的發光二極管可以想象為像素。

px為單位導致的問題

我們知道手機屏幕有大有小，就拿iPhone來說，iPhone 6 plus比iPhone 5要大。那么就說明plus的像素比5要多。對比：

iPhone 6 plus和iPhone5的尺寸對比

手機	寬度	高度
手機	寬度	高度
iPhone 6 plus	414px	736px
iPhone 5	320px	568px

加入有一個160px寬度的紅色矩形在這兩種手機中的位置如下：

那么rpx的特殊之處在哪兒呢？

rpx（responsive pixel）可以根據屏幕寬度進行自適應。如何自適應呢？看下邊的分析：

不管一個屏幕有多寬我們可以對屏幕平均分配吧。既然iPhone 6 plus寬度為414px，iPhone 5的寬度為320px。如果創建一個寬度為160px的矩形那么在iPhone 5 中占有一半的寬度，但是在iPhone 6 plus中不足一半，在手機顯示中不是很好看。那么我們不管屏幕多寬都給他分750份。那么在iPhone 6 plus中每一份就是414/750=0.552px 而對于iPhone 5的每一份就是320/750=0.42px。那現在我們規定大小和位置時不使用px而使用份數來表示如何呢？比如我們規定一個紅色的矩形在iPhone 6 plus中占有375份(375x0.552=207px)，在iPhone 5中也是325份(375x0.42=157.5px)。 
再來看看，都占有375份的情況下iPhone 6 plus中的寬度207px（約占有總寬度414px的50%），而iPhone 5中的寬度157.5px（約占有總寬度320的50%）。也就是在兩個不同尺寸的屏幕上當以份數來規定是占有的比例是差不多的。而這個份數就是rpx

看下圖：

樣式導入

在模塊化開發中我們有時候不得不在頁面中使用其他的第三方庫的樣式，而第三方庫的樣式是保存在第三方包中的，我們不可能全部復制到我們的.acss文件中，那最好的辦法就是導入了。在樣式表中導入其他外聯樣式表。

@import "./button.acss";
.md-button {
  padding:15px;
}
1
2
3
4

當然仍舊支持內聯樣式和class屬性制定樣式類，如

<view class="my-awesome-view" />
<view class="my-awesome-view" style="color:red;" />
1
2

選擇器

選擇器和css3的保持一致。一般有class=”test”類選擇器和id=”test”的id選擇器。當然在支付寶小程序的樣式中特殊的地方就是： 
※ .a- 或者 .am-為前綴的選擇器已經被系統占用所以不要使用； 
※ 不能使用屬性選擇器，例如,以下寫法不被支持：

//這種選擇器不被支持
input[name="title"]{
    color: test;
}
1
2
3
4

全局樣式與局部樣式

在項目結構講解時我們已經說過在項目根目錄下有一個app.acss文件這個樣式文件中定義的樣式在任何一個頁面中都可以直接使用。

頁面容器的樣式

我之前說過小程序開發的應用單元為頁面。其實我們在.axml中寫的頁面并不包含頁面容器，就相當于我們做一個頁面但是body標簽不用寫那如果我們要改變整個頁面的背景怎么辦呢?其實有一個固定的選擇器。例如：

可以通過 page 元素選擇器來設置頁面容器的樣式，比如頁面背景色:

page {
  background-color: red;
}
1
2
3

在你想改變頁面容器的頁面中定義該樣式也可以，全局定義也可以，例如我想將test這個頁面的頁面容器背景設置為藍色，就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式

下節是視圖層講解，如果有任何問題可以再下方給我留言或者發郵件到weiyongqiang@weiyongqiang.com我在收到郵件后會回復。