開(kāi)篇語(yǔ)
開(kāi)篇語(yǔ)已經(jīng)在熱身階段說(shuō)過(guò)了,所以就不重復(fù)了。有興趣的讀者移步
來(lái)寫(xiě)點(diǎn)微信小程序吧:D) ~~~(熱身階段)
以及前面借鑒小程序開(kāi)發(fā)官方文檔的簡(jiǎn)易教程寫(xiě)的總綱
來(lái)寫(xiě)點(diǎn)微信小程序吧:D) ~~~狂奔階段
還有分析小程序的目錄結(jié)構(gòu)與配置的內(nèi)容
來(lái)寫(xiě)點(diǎn)微信小程序吧:D) ~ ~ ~ 分析小程序目錄結(jié)構(gòu)與配置
以及分析小程序的邏輯層的內(nèi)容:
來(lái)寫(xiě)點(diǎn)微信小程序吧:D) ---- 分析小程序邏輯層內(nèi)容
來(lái)寫(xiě)點(diǎn)微信小程序吧:D) ---- 分析小程序視圖層內(nèi)容
來(lái)寫(xiě)點(diǎn)微信小程序吧:D) ---- 分析小程序視圖層內(nèi)容
好吧,我承認(rèn)這是上一節(jié)視圖層的剩余內(nèi)容,昨晚沒(méi)辦法了,實(shí)在很困,所以直接去睡了!今晚補(bǔ)上。
上一張學(xué)長(zhǎng)的圖片鎮(zhèn)樓,下面直接上開(kāi)發(fā)過(guò)程筆記。

正文
一、WXSS(WeiXin Style Sheets)是一套樣式語(yǔ)言,用于描述 WXML 的組件樣式。
WXSS 用來(lái)決定 WXML 的組件應(yīng)該怎么顯示。(意思很簡(jiǎn)單,就是告訴瀏覽器,這個(gè)地方的這個(gè)東西長(zhǎng)啥樣,比如字體多大?背景顏色是啥?是純粹的樣式文件。就好比是裝修的師傅,不管你的房子結(jié)構(gòu)布局如何,反正給你粉刷一遍,然后讓你的房子大變樣,但是沒(méi)有改變?nèi)魏文愕脑懈窬?
為了適應(yīng)廣大的前端開(kāi)發(fā)者, WXSS 具有 CSS 大部分特性。 同時(shí)為了更適合開(kāi)發(fā)微信小程序,對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。(我覺(jué)得WXSS就是CSS的兒子)
與 CSS 相比擴(kuò)展的特性有:
尺寸單位 樣式導(dǎo)入
1. 尺寸單位
rpx(responsive pixel): 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個(gè)物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
就是說(shuō),不管你的屏幕多大,都是750個(gè)rpx,這是一種絕對(duì)的大小,至于具體的每個(gè)rpx有多大,那就要根據(jù)你的手機(jī)具體尺寸來(lái)算,這樣一個(gè)好處就是,我可以直接的指定一個(gè)部件出現(xiàn)在哪個(gè)位置,而不用管你的手機(jī)是什么樣子,確保了最好的視覺(jué)體驗(yàn),至于1rpx=?px 那就要按照你的手機(jī)實(shí)際尺寸來(lái)算了。匯算標(biāo)準(zhǔn)如下:

2. 樣式導(dǎo)入
使用
@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表,@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑,用;表示語(yǔ)句結(jié)束。
示例代碼:
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
在wxss文件中定義了樣式,那么如何使得各自有各自的用處呢?導(dǎo)入之后又何處安放每一個(gè)樣式呢?下面就是選擇器登場(chǎng)了!




結(jié)束語(yǔ)
小程序算是假期的一個(gè)調(diào)劑吧,不然可能就真的天天看小說(shuō),然后逛逛B站了。剛剛跟某個(gè)XX說(shuō):“如果沒(méi)有你,我的效率會(huì)高很多;但是,如果沒(méi)有你,動(dòng)力又會(huì)下降很多。恩。綜合來(lái)說(shuō),應(yīng)該還是有比較好,所以。。。。阿西吧,還是要蟹蟹Somebody 的,至于是誰(shuí),默念就好。?!?。這兩天看計(jì)算機(jī)三級(jí),要哭了。為什么我看的書(shū)跟考試的題目不一樣?這他么還是我那個(gè)過(guò)了四級(jí)的同學(xué)給我的書(shū)。。算了,開(kāi)學(xué)再去想這些事情,明天開(kāi)始解讀Js代碼,以及寫(xiě)幾個(gè)Swift的程序,然后還要入一下機(jī)器學(xué)習(xí)的坑,還有Python打算做個(gè)小項(xiàng)目,事情賊雞兒多,但是怎么就這么充實(shí)呢?初八還有個(gè)同學(xué)聚會(huì)。。

另外安利幾位大神的作品(直接給大神簡(jiǎn)書(shū)的鏈接):
微信小程序—豆瓣電影APP
微信小程序之知乎日?qǐng)?bào)
微信小程序——一個(gè)簡(jiǎn)單的音樂(lè)播放器
微信小程序-從零開(kāi)始制作一個(gè)跑步微信小程序
個(gè)人宣言
知識(shí)傳遞力量,技術(shù)無(wú)國(guó)界,文化改變生活!