微信小程序教程入門篇 （2）：給hello world一點顏色瞧瞧-最後有彩蛋-極其詳細

此次接着上一次的寫，上一篇文章說的是 從0寫一個hello world。若是你還沒看，那你趕忙去看看《微信小程序教程入門篇-(1)：10分鐘從0開始寫一個hello-world-極其詳細》，固然了，若是你是個大牛，當我沒說。

本篇文章會設計到少許的html知識和大量的css知識，若是你不擅長html不要緊，可是必定要懂css，否則看着就要蒙圈了。因此本文適合有必定css基礎的人，若是你實在不會css，也能夠先看完這篇文章，而且按照我說的一行一行代碼寫完，也是能夠出來和我同樣的效果的。而後在去一行一行的研究css代碼的意思。必定要研究css的知識，理解每一句的意思，若是隻是照葫蘆畫瓢，那不是一個開發工程師應該有的態度。咱們要弄明白一切。若是是對小程序開發流程有興趣的人固然也能夠看看，只有好處沒有壞處。

熊熊依然開門見山，開整。。。。
先來看看咱們上次hello world的界面

圖1：

乾巴巴的hello world實在是太難看了，看着不爽，我須要把hello world幾個字變成大紅色。
怎麼弄，我教你啊：
一、小程序樣式的修改先講兩種方法：第一種是利用class屬性，第二種是利用id屬性。
先說說利用class屬性(熊熊喜歡class，因此先說它)。先把index.wxml裏面原來的代碼改爲以下：

<text class="red">hello world</text>

那個「class」就是屬性名字，不可更改，必須是「class」,「class=」等號後邊，雙引號裏面是class的值，也叫樣式名，這個隨便起，不過建議你們根據你想讓它變成的樣式來起名，好比你想讓他變成紅色，能夠起名red，你想讓他加粗，起名能夠是bold等。這個是個很好的開發習慣，別隨意。class屬性是寫在標籤內部的，什麼是標籤？標籤，在本例中就是text，標籤都是由<>包起來的。屬性就寫在<>裏面。詳細的請看：http://doc.pietian.com/?id=113
好了，index.wxml頁面的代碼就改完了，然並卵，顯示仍是黑色，沒有變紅色啊

圖2：

這個，固然的啦！咱們上面只是定義了class的值也就是樣式名，尚未給這個值指定要改變的內容呢。那接下來就開始給這個值定義樣式的具體內容，樣式的內容在index.wxss編寫。打開index.wxss，在頁面下寫下以下代碼：

.red{

color:red;

}

解釋下這段代碼，咱們在index.wxml編寫了class的值爲red，在index.wxss中編寫了red的樣式內容，小程序規定，若是是class，那麼在index.wxss中編寫樣式的內容時，樣式名（class的值）前面就必須帶有「.」,不要問爲何，這是小程序的龜腚，龜腚，龜腚！！！因此這裏須要寫「.red」,小程序還龜腚，全部的具體樣式的代碼必須寫在「{}」裏面，每一行樣式寫完之後必須用「;」結尾。這些都是龜腚！記住就行！「color:red」的意思「顏色:紅色」，能明白麼，不明白的下面評論留言吧！！若是你以爲只是變紅色不過癮，還想要字體變大，變粗，居中等其餘的更加多的一些配置項，那你能夠看看這裏：http://www.w3school.com.cn/cs...，這裏是css的一些配置項，講的很詳細（小程序仍是支持95%的css屬性的）。
如今再看看是否是已經有了顏色，艾瑪呀，這麼簡單的知識竟然寫了這麼多字。。。。也是操心操碎了呢！！

圖3：

接着說說id屬性，先看看index.wxml改完之後的源碼：

<text id="red">hello world</text>

看到沒，就只把class改爲id就好了，id屬性的值仍是能夠隨便取的，可是請不要這樣作，取名字也要基於邏輯，這是個好習慣。好了，跟class同樣，只改wxml頁面是沒有用的，咱們也要修改index.wxss頁面。上面說了，再修改index.wxss頁面時，若是時class指定的樣式名，前面用「.」，那若是是id指定的樣式名呢，就確定不能用「.」了，微信小程序龜腚，咱們要用「#」。嗯哼，就是醬紫了，其餘的規則的同樣，直接看代碼吧：

#red{

color:red;

}

圖4：

仍是紅色，有木有啊！！！
其實除了class和id之外還有一個也能夠編輯標籤的樣式，那就是利用標籤自己，本案例的標籤是text，咱們能夠不指定class和id也能夠修改hello world爲紅色，怎麼作呢？看下面嘍
去掉class和id，迴歸最原始的內容，

index.wxml代碼以下：

<text>hello world</text>

index.wxss的代碼以下：

text{

color:red;

}

若是修改text的樣式，在index.wxss頁面中只寫標籤名字就行，不要加任何的前綴。「.」「#」通通的不要，不要的！！！這樣寫的話，頁面中全部的該標籤的樣式都會改變。啥也不說了，看圖：

圖5：

圖6：

這是三個經常使用的樣式設置的方法，那麼你如今是否是產生了一個大的疑問，若是我三個都設置了，那麼標籤會按照哪一個顯示呢，好的，那就讓咱們看看：index.wxml代碼以下：

<text class="green" id="red"><hello world/text>

我設置了hello world的class的值爲green，id的值爲red。

index.wxss的代碼以下：

text{

color:blue;

}

.green{

color:green;

}

#red{

color:red

}

若是按照標籤自己設置的樣式顯示，那麼hello world就應該是藍色，若是按照class設置的樣式顯示，那麼hello world就應該是綠色，若是按照id設置的樣式顯示那麼hello world就應該是紅色。啥也不說了，實踐是檢驗真理的惟一標準，看結果：

圖7：

仍是紅色的，說明按照id設置的樣式顯示的。也就是說三個都存在的時候，id設置的樣式優先級最高。若是我把id去掉，也就是說index.wxml的代碼變成了以下：

<text class="green">hello world</text>

index.wxss代碼不變，咱們再來看看顯示什麼顏色：

圖8：

顯示的是綠色的，也就是說沒有id的狀況下，會按照class設置的樣式顯示。這也就得出了一個結論：
標籤樣式的優先級是 id(#) > class(.) > 標籤
這個跟css的優先級是同樣的。可是，微信小程序是沒有嵌入樣式的（什麼是嵌入樣式？不懂就算了，微信小程序也用不着，html纔有的）。
固然了，微信小程序還支持其餘三種選擇方法，本文是入門篇暫時先略過，剩下的等我出高級篇再說嘍。不過大家也能夠先看看：http://doc.pietian.com/?id=173，有興趣的本身鑽研下！！
二、好了，講了這麼多基礎知識，如今說點理論的。小程序的每一個頁面的結構佈局和樣式（好比字體顏色，下劃線，字體大小，圖片大小等）分別由該頁面所屬的子文件夾的.wxml和.wxss控制。並且每一個頁面只能訪問本身的wxml和wxss文件，不能跨頁面訪問。若是小程序內的頁面須要用一些公共的樣式，那麼這些公共的樣式代碼能夠在app.wxss中編寫。
好比，咱們把剛剛在index.wxss中的寫的代碼，所有拷貝到app.wxss中，把index.wxss清空，而後index.html不變

如圖9:

頁面顯示 hello world仍是綠色，也就是說index.wxml自動加載了app.wxss的樣式。微信小程序運行的時候，會首先獲取當前頁面下的.wxss頁面內容，再獲取app.wxss頁面的內容，並且當前頁面下的.wxss的樣式的優先級比app.wxss的高。見：http://doc.pietian.com/?id=173最下面部分。

圖10：

好比，index.wxss定義了text標籤的顏色爲red，app.wxss定義了標籤的顏色爲藍色，那麼頁面會首先使用index.wxss中的顏色設置。

index.wxss代碼：

text{

color:red;

}

app.wxss代碼：

text{

color:blue;

}

最終顯示：

圖11：

顯然優先級要變成：
標籤樣式的優先級是：單獨頁面的id(#)樣式 >單獨頁面的class(.) 樣式>單獨頁面的標籤樣式 > app.wxss中的標籤樣式
好吧，看到這，不知道大家蒙不蒙，若是蒙就別看了，上面的知識足夠用了，若是不蒙的話繼續。
那單獨頁面的標籤樣式，和app.wxss中的class樣式，哪一個的優先級高呢？尼瑪，怎麼會有這麼多問題，無論了先解決了，作實驗啦！
好比index.wxml中的代碼爲：

<text class="green">hello world<text>

index.wxss的樣式爲：

text{

color:red;

}

若是app.wxss不定義樣式，那麼很明顯，hello world的顏色會是紅色。可是咱們就是有困難要上，沒有困難創造困難也要上，這說明什麼呢？說明熊熊我很做死，無論啦，接下來製造困難啦！
若是app.wxss中的代碼是這樣的：

.green{

color:green;

}

那麼會怎麼顯示呢，不賣關子，
上圖12：

顯示是綠色的，這說明app.wxss中的class的樣式比index.wxss的標籤樣式的優先級要高。好了，同理，那麼app.wxss中的id的樣式比index.wxss中的class樣式的優先級要高。那麼咱們最終再豐富下咱們的結論嘍！
標籤樣式的優先級是：單獨頁面的id(#)樣式 >app.wxss中的id(#)樣式 >單獨頁面的class(.)樣式>app.wxss中的class(.)樣式 >單獨頁面的標籤樣式 > app.wxss中的標籤樣式

好啦，今天給hello world很多顏色了，先讓它歇歇，下次教程，饒了hello wolrd 帶你們高仿一個手機版的html頁面，就這樣了啦！！！最後給你們個彩蛋：
*.wxml文件中能夠編寫任何自定義的標籤，並且均可以編譯，不會有任何問題，也不知道這是微信開發工具bug仍是微信刻意爲之，我發現之後以爲還挺驚喜的，不過我已經把這個狀況反饋給微信官方了。不過畢竟也不會影響程序運行，就拿來玩玩也挺好，給大家看圖：

我我的開發了一個小程序搜索公衆號叫「搜小程」，發文字或者語音就能搜索你須要的小程序，我也會在公衆號第一時間發佈個人教程，你們關注下，而後給我提提建議。下面是二維碼：

嚴正聲明：
聯繫原文做者可登錄www.pietian.com與做者交流。
原文連接：http://www.pietian.com/articl...
未經做者贊成，謝絕及禁止任何形式轉載，做者保留全部法律權限。