關于(yú).acss文件

在(zài)視頻中已經說(shuō)過了(le／liǎo)，小程序的(de)設計思想和(hé / huò)原生app的(de)設計思想頗爲(wéi / wèi)相似，基本的(de)應用單元爲(wéi / wèi)頁面。當然對于(yú)一個(gè)頁面來(lái)說(shuō)每一個(gè)元素的(de)放置位置在(zài)哪兒以(yǐ)及顯示成什麽樣子(zǐ)這(zhè)個(gè)是(shì)由樣式來(lái)決定的(de)。我們知道(dào)在(zài)web開發中樣式是(shì)在(zài)css文件中規定的(de)，叫做層疊樣式表 (Cascading Style Sheets)。其實在(zài)APP中樣式的(de)約束也(yě)是(shì)使用css，在(zài)支付寶小程序中也(yě)是(shì)使用css不(bù)過文件的(de)後綴是(shì).acss而(ér)且對css3進行了(le／liǎo)擴充而(ér)已。

CSS3是(shì)CSS技術的(de)升級版本，CSS3語言開發是(shì)朝着模塊化發展的(de)。以(yǐ)前的(de)規範作爲(wéi / wèi)一個(gè)模塊實在(zài)是(shì)太龐大(dà)而(ér)且比較複雜，所以(yǐ)，把它分解爲(wéi / wèi)一些小的(de)模塊，更多新的(de)模塊也(yě)被加入進來(lái)。這(zhè)些模塊包括： 盒子(zǐ)模型、列表模塊、超鏈接方式 、語言模塊 、背景和(hé / huò)邊框 、文字特效 、多欄布局等。

那麽在(zài)支付寶小程序中的(de).acss和(hé / huò)微信小程序中的(de).wxcss沒有什麽兩樣。上(shàng)邊已經說(shuō)了(le／liǎo).acss其實包含了(le／liǎo)css3那麽它還有一些新的(de)特性是(shì)css3中不(bù)具備的(de)，讓我們一一看看

rpx

第一次看到(dào)這(zhè)個(gè)東西也(yě)能猜到(dào)他(tā)是(shì)幹什麽用的(de)。在(zài)css中我們知道(dào)規定大(dà)小一般使用像素(px)這(zhè)個(gè)單位。比如顯示生活中我們說(shuō)房子(zǐ)128㎡那這(zhè)兒的(de)單位是(shì)平方米，在(zài)開發中需要(yào / yāo)更加精準的(de)大(dà)小就(jiù)是(shì)px像素。像素就(jiù)非常精細了(le／liǎo)因爲(wéi / wèi)在(zài)我們顯示屏幕中像素是(shì)最小的(de)顯示單元。這(zhè)個(gè)道(dào)理如果不(bù)懂的(de)話就(jiù)找個(gè)LED屏幕仔細看，LED屏幕上(shàng)一個(gè)一個(gè)的(de)發光二極管可以(yǐ)想象爲(wéi / wèi)像素。

px爲(wéi / wèi)單位導緻的(de)問題

我們知道(dào)手機屏幕有大(dà)有小，就(jiù)拿iPhone來(lái)說(shuō)，iPhone 6 plus比iPhone 5要(yào / yāo)大(dà)。那麽就(jiù)說(shuō)明plus的(de)像素比5要(yào / yāo)多。對比：

iPhone 6 plus和(hé / huò)iPhone5的(de)尺寸對比

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

加入有一個(gè)160px寬度的(de)紅色矩形在(zài)這(zhè)兩種手機中的(de)位置如下：

那麽rpx的(de)特殊之(zhī)處在(zài)哪兒呢？

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

不(bù)管一個(gè)屏幕有多寬我們可以(yǐ)對屏幕平均分配吧。既然iPhone 6 plus寬度爲(wéi / wèi)414px，iPhone 5的(de)寬度爲(wéi / wèi)320px。如果創建一個(gè)寬度爲(wéi / wèi)160px的(de)矩形那麽在(zài)iPhone 5 中占有一半的(de)寬度，但是(shì)在(zài)iPhone 6 plus中不(bù)足一半，在(zài)手機顯示中不(bù)是(shì)很好看。那麽我們不(bù)管屏幕多寬都給他(tā)分750份。那麽在(zài)iPhone 6 plus中每一份就(jiù)是(shì)414/750=0.552px 而(ér)對于(yú)iPhone 5的(de)每一份就(jiù)是(shì)320/750=0.42px。那現在(zài)我們規定大(dà)小和(hé / huò)位置時(shí)不(bù)使用px而(ér)使用份數來(lái)表示如何呢？比如我們規定一個(gè)紅色的(de)矩形在(zài)iPhone 6 plus中占有375份(375x0.552=207px)，在(zài)iPhone 5中也(yě)是(shì)325份(375x0.42=157.5px)。 
再來(lái)看看，都占有375份的(de)情況下iPhone 6 plus中的(de)寬度207px（約占有總寬度414px的(de)50%），而(ér)iPhone 5中的(de)寬度157.5px（約占有總寬度320的(de)50%）。也(yě)就(jiù)是(shì)在(zài)兩個(gè)不(bù)同尺寸的(de)屏幕上(shàng)當以(yǐ)份數來(lái)規定是(shì)占有的(de)比例是(shì)差不(bù)多的(de)。而(ér)這(zhè)個(gè)份數就(jiù)是(shì)rpx

看下圖：

樣式導入

在(zài)模塊化開發中我們有時(shí)候不(bù)得不(bù)在(zài)頁面中使用其他(tā)的(de)第三方庫的(de)樣式，而(ér)第三方庫的(de)樣式是(shì)保存在(zài)第三方包中的(de)，我們不(bù)可能全部複制到(dào)我們的(de).acss文件中，那最好的(de)辦法就(jiù)是(shì)導入了(le／liǎo)。在(zài)樣式表中導入其他(tā)外聯樣式表。

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

當然仍舊支持内聯樣式和(hé / huò)class屬性制定樣式類，如

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

選擇器

選擇器和(hé / huò)css3的(de)保持一緻。一般有class=”test”類選擇器和(hé / huò)id=”test”的(de)id選擇器。當然在(zài)支付寶小程序的(de)樣式中特殊的(de)地(dì / de)方就(jiù)是(shì)： 
※ .a- 或者 .am-爲(wéi / wèi)前綴的(de)選擇器已經被系統占用所以(yǐ)不(bù)要(yào / yāo)使用； 
※ 不(bù)能使用屬性選擇器，例如,以(yǐ)下寫法不(bù)被支持：

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

全局樣式與局部樣式

在(zài)項目結構講解時(shí)我們已經說(shuō)過在(zài)項目根目錄下有一個(gè)app.acss文件這(zhè)個(gè)樣式文件中定義的(de)樣式在(zài)任何一個(gè)頁面中都可以(yǐ)直接使用。

頁面容器的(de)樣式

我之(zhī)前說(shuō)過小程序開發的(de)應用單元爲(wéi / wèi)頁面。其實我們在(zài).axml中寫的(de)頁面并不(bù)包含頁面容器，就(jiù)相當于(yú)我們做一個(gè)頁面但是(shì)body标簽不(bù)用寫那如果我們要(yào / yāo)改變整個(gè)頁面的(de)背景怎麽辦呢?其實有一個(gè)固定的(de)選擇器。例如：

可以(yǐ)通過 page 元素選擇器來(lái)設置頁面容器的(de)樣式，比如頁面背景色:

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

在(zài)你想改變頁面容器的(de)頁面中定義該樣式也(yě)可以(yǐ)，全局定義也(yě)可以(yǐ)，例如我想将test這(zhè)個(gè)頁面的(de)頁面容器背景設置爲(wéi / wèi)藍色，就(jiù)可以(yǐ)再pages目錄下的(de)test目錄下找到(dào)test.acss在(zài)其中定義page的(de)樣式

下節是(shì)視圖層講解，如果有任何問題可以(yǐ)再下方給我留言或者發郵件到(dào)weiyongqiang@weiyongqiang.com我在(zài)收到(dào)郵件後會回複。