WXML與WXSS
相信通過前面的學習，大家對一個完整的小程序的文件結構有了一個大致的瞭解，對小程序的開發者工具也有了一定的認識，那這節我們來開始動手寫一下小程序的代碼。
編輯WXML文件
我們在開發者工具裏打開之前修改的模板小程序home文件夾下的home.wxml，裏面有如下代碼
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
這個第1行，是一句註釋，也就是一句說明，不會顯示在小程序的前端，第2行就是一個<text>組件。
接下來我們會廣泛使用到小程序的<view>組件。比如我們在上面的代碼下面加一下下面的代碼，大家再來看效果：
<view>
<view>
<view>WXML 模板</view>
<view>從事過網頁編程的人知道，網頁編程採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。</view>
</view>
</view>
大家可以結合上面的代碼，來了解一下組件的基本寫法
- <view>組件和<text>組件類似，他們都是成對出現的，比如<text></text>，<view></view>，兩個要一起寫，有前面的開始標籤，後面就要有一個閉合標籤，閉合標籤前面有一個“/”
- view組件是可以嵌套寫的，
- 爲了讓視覺上更好看，寫代碼的時候要有縮進（雖然不縮進也不會有影響）
我們可以把這個頁面寫的更加複雜一點。
<view>
<view>
<view>
<view>技術學習說明</view>
<view>技術和我們以往所接觸的一些知識有很大的不同，比如英文非常強調詞彙量，需要你多說多背；數學需要你記住公式，反覆練習；在教學的方式上也有很大的不同，以前都是有專門的老師手把手教你，而且還有同學交流。那要學好技術，應該依循什麼樣的學習方法和教學方法呢？
</view>
</view>
<view>
<view>
<view>自學而非手把手</view>
<view>技術的方向衆多，而且知識點也是非常龐雜，需要你具備一定的自學能力，所謂自學能力就是要求你遇到問題能夠勤于思考，擅於搜索，能夠不斷實踐探索。在實際工作中，也要求你能根據技術文檔可以迅速掌握前沿的技術，而同事不會有時間教你，如果沒有自學能力，是很難勝任很多工作的。
</view>
</view>
<view>
<view>查閱文檔而非死記知識點</view>
<view>在高中一學期一門課只有很薄的一本書，老師會反覆講解知識點，強化你的記憶，考試也是閉卷；而技術一個很小的分支，內容就有幾千頁甚至更多，強記知識點顯然不合適。學習技術要像查詞典一樣來查閱技術文檔，你只需要掌握基本的語法和用法，在編程的時候隨時查閱，就像你不需要背誦上萬的單詞也能知道它的意思用法一樣，所以技術文檔是學習技術最爲重要的參考資料。
</view>
</view>
<view>
<view>實戰而非不動手的看書</view>
<view>技術是最強調結果的技能，你看了再多書，如果不知道技術成品是怎麼寫出來的，都是枉然。很多朋友有收集癖，下載了很多電子資源，收藏了很多高讚的技術文章，但是卻沒有動手去消化去理解，把時間和精力都浪費了。不動手在開發者工具裏去寫代碼，不動手配置開發環境，缺乏實戰的經驗，都是阻礙你學好技術的壞習慣。
</view>
</view>
<view>
<view>搜索而非做伸手黨</view>
<view>在以前，我們遇到技術問題，我們可以問老師問同學，於是很多人把這種不良的習慣也帶到了技術的學習當中，遇到問題也總喜歡求助於別人。技術的方向衆多，環境複雜，問題也是很多，如果你總是依賴別人的解答，是很難學好技術的。一定要學會在網上通過搜索遇到的問題來找答案。
</view>
</view>
<view>
<view>團隊協作，而非單打獨鬥</view>
<view>一個產品涉及的技術非常多，需要很多人來一起配合才能開發好，所以學習技術的時候我們需要了解一些代碼規範、工作的流程、項目管理等，在技術方面也會有API接口，接口文檔這些，還要懂得如何和同職業的同事以及不同角色的人如設計師等一起配合，而不是自己一個人單打獨鬥。
</view>
</view>
<view>
<view>系統的指導而非茫然無序</view>
<view>學好技術最依賴你自學，但是如果沒有人指導你，你可能會像蒼蠅一樣陷入衆多資料中茫然無序，抓不住一個技術的重點，也不清楚哪些技術才值得你深入學習，最好是有經驗的人可以指點你應該看什麼，學什麼，什麼纔是重點，當然不是手把手教你。
</view>
</view>
</view>
</view>
</view>
WXSS選擇器
大家是不是已經發現我們寫的小程序頁面有點醜？那我們需要對這個小程序頁面進行美化。但是我們的代碼裏面<view>組件這麼多，要是不對每個組件進行區分，就很難對每個組件進行美化了。
id與class選擇器
這個時候我們就要先了解一下選擇器的概念。選擇器是用來幹什麼的呢？從名字裏我們就可以看出來，就是爲了選擇。比如學校有1000個人，我們要選擇出其中一個人，那我們可以給所有人一個學號，這個學號是唯一的，我們可以稱這個學號爲id，用於精準的選擇；還有的時候我們需要對一羣人進行分類選擇，比如整個班級或者所有男生，這個班級、性別，我們可以稱爲class，用於分類選擇。
在wxss技術文檔這裏有關於選擇器的描述。
技術文檔：WXSS技術文檔
給組件增加屬性
比如上面的view組件實在太多了，爲了區分它們，我們給他們加一些屬性，這樣我們就可以用選擇器選擇它們了。
<view id="wxmlinfo">
<view class="content">
<view class="title">WXML 模板</view>
<view class="desc">從事過網頁編程的人知道，網頁編程採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。
</view>
</view>
</view>
以及比較複雜的那一段代碼的view組件也加上屬性。給組件添加屬性在外觀上並不會有什麼效果哦~
<view id="studyweapp">
<view class="content">
<view class="header">
<view class="title">技術學習說明</view>
<view class="desc">技術和我們以往所接觸的一些知識有很大的不同，比如英文非常強調詞彙量，需要你多說多背；數學需要你記住公式，反覆練習；在教學的方式上也有很大的不同，以前都是有專門的老師手把手教你，而且還有同學交流。
那要學好技術，應該依循什麼樣的學習方法和教學方法呢？
</view>
</view>
<view class="lists">
<view class="item">
<view class="item-title">自學而非手把手</view>
<view class="item-desc">技術的方向衆多，而且知識點也是非常龐雜，需要你具備一定的自學能力，所謂自學能力就是要求你遇到問題能夠勤于思考，擅於搜索，能夠不斷實踐探索。在實際工作中，也要求你能根據技術文檔可以迅速掌握前沿的技術，而同事不會有時間教你，如果沒有自學能力，是很難勝任很多工作的。
</view>
</view>
<view class="item">
<view class="item-title">查閱文檔而非死記知識點</view>
<view class="item-desc">在高中一學期一門課只有很薄的一本書，老師會反覆講解知識點，強化你的記憶，考試也是閉卷；而技術一個很小的分支，內容就有幾千頁甚至更多，強記知識點顯然不合適。學習技術要像查詞典一樣來查閱技術文檔，你只需要掌握基本的語法和用法，在編程的時候隨時查閱，就像你不需要背誦上萬的單詞也能知道它的意思用法一樣，所以技術文檔是學習技術最爲重要的參考資料。
</view>
</view>
<view class="item">
<view class="item-title">實戰而非不動手的看書</view>
<view class="item-desc">技術是最強調結果的技能，你看了再多書，如果不知道技術成品是怎麼寫出來的，都是枉然。很多朋友有收集癖，下載了很多電子資源，收藏了很多高讚的技術文章，但是卻沒有動手去消化去理解，把時間和精力都浪費了。不動手在開發者工具裏去寫代碼，不動手配置開發環境，缺乏實戰的經驗，都是阻礙你學好技術的壞習慣。
</view>
</view>
<view class="item">
<view class="item-title">搜索而非做伸手黨</view>
<view class="item-desc">在以前，我們遇到技術問題，我們可以問老師問同學，於是很多人把這種不良的習慣也帶到了技術的學習當中，遇到問題也總喜歡求助於別人。技術的方向衆多，環境複雜，問題也是很多，如果你總是依賴別人的解答，是很難學好技術的。一定要學會在網上通過搜索遇到的問題來找答案。
</view>
</view>
<view class="item">
<view class="item-title">團隊協作，而非單打獨鬥</view>
<view class="item-desc">一個產品涉及的技術非常多，需要很多人來一起配合才能開發好，所以學習技術的時候我們需要了解一些代碼規範、工作的流程、項目管理等，在技術方面也會有API接口，接口文檔這些，還要懂得如何和同職業的同事以及不同角色的人如設計師等一起配合，而不是自己一個人單打獨鬥。</view>
</view>
<view class="item">
<view class="item-title">系統的指導而非茫然無序</view>
<view class="item-desc">學好技術最依賴你自學，但是如果沒有人指導你，你可能會像蒼蠅一樣陷入衆多資料中茫然無序，抓不住一個技術的重點，也不清楚哪些技術才值得你深入學習，最好是有經驗的人可以指點你應該看什麼，學什麼，什麼纔是重點，當然不是手把手教你。
</view>
</view>
</view>
</view>
</view>
大家在學習的過程中，要隨時在開發者工具的模擬器上查看效果，也要經常用微信掃碼預覽所生成的二維碼來查看效果，千萬不要只看教程怎麼說，而是自己要動手去實戰。
CSS參考手冊
給wxml文件的組件加了選擇器之後，我們就可以在wxss文件裏給指定的某個<view>組件以及某類<view>組件添加一些美化了，這裏我們需要編輯home.wxss文件。wxss美化的知識和css是一樣的，所以小程序的技術文檔裏面沒有，大家可以看一下w3shool的CSS參考手冊。CSS文件的作用就是來美化組件的。
技術文檔：CSS參考手冊
這裏大家只需要瞭解CSS的字體屬性、文本屬性、背景屬性、邊框屬性、盒模型
CSS涉及的知識點非常多，現在大家也只需要知道有這些概念即可，學技術千萬不要在沒有看到實際效果的情況下來死記概念。概念沒有記住一點關係都沒有，因爲大家可以隨時來查文檔。接下來我們也會有實際的例子讓大家看到效果，大家想深入學習的時候可以回頭再看這些文檔。
字體屬性與文本屬性
下面這些關於CSS的基礎知識點，大家可以結合我們是如何調整Word、PPT的樣式的來理解，比如我們是怎麼調整文本的大小、顏色、粗細等等的，添加樣式的時候要注意隨手實戰了解了效果再說。
比如class爲title的<view>組件裏面的文字是標題，我們需要對標題的字體進行加大、加粗以及居中處理，這時候我們就可以在home.wxss文件里加入以下代碼，然後大家看看有什麼效果。
.title{
font-size: 20px;
font-weight: 600;
text-align: center;
}
通過 .title這個選擇器，我們就選擇到了類class爲 title的<view>組件，然後就可以精準地對它進行美化，對它的美化代碼不會用在其他組件上了。
大家也要留意css的寫法，這裏font-size，font-weight，text-align外面稱之爲屬性，冒號:後面的我們稱之爲值，屬性:值這一整個我們叫做聲明，每個聲明我們用分號;隔開。大家不要記這些概念，知道是個什麼東西就行了。
class爲item-title的<view>組件裏面的文字是一個列表的標題，我們希望它和其他文字的樣式有所不同，不過這個標題要比title的字體小一些；比其他文字更粗，但是比title更細；顏色我們可以添加一個彩色字體，
.item-title{
font-size:18px;
font-weight:500;
color: #c60;
}
我們希望描述類的文字顏色淺一點，不要那麼黑，我們可以換一個淺一點的顏色，我們在home.wxss下面繼續加代碼。
.desc,.item-desc{
color: #333;
}
大家注意，我們這裏有兩個選擇器，一個是desc，一個是item-desc，當我們希望兩個不同的選擇器有相同的css代碼時，可以簡化一起寫，然後用逗號,隔開。
除了標題（class爲title和item-title的<view>組件）我們都給他們加了字體大小，我們希望所有的文字大小、行間距有一個統一的設定。
#wxmlinfo,#studyweapp{
font-size:16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
line-height: 1.6;
}
爲了大家方便查閱技術文檔，我們把這些常用的css技術文檔整理到以下表格，方便大家更深入的去學習。
| 字體屬性 | |
|---|---|
| font-family | 規定文本的字體系列。 |
| font-size | 規定文本的字體尺寸。 |
| font-weight | 規定字體的粗細。 |
| 文本屬性 | |
| color | 設置文本的顏色。 |
| line-height | 設置行高。 |
| text-align | 規定文本的水平對齊方式。 |
盒模型
大家有沒有發現段落之間的距離、文字之間的距離，以及與邊框之間的距離都比較擁擠？這個時候就需要用到盒子模型啦。盒子模型就像一個長方形的盒子，它有長度、高度、也有邊框，以及內邊距與外邊距。我們通過實戰來了解一下。
長度、高度、邊框我們比較好理解，那這個內邊距和外邊距是什麼意思呢？
內邊距就是這個長方形的邊框與長方形裏面的內容之間的距離，有上邊距，右邊距、下邊距、左邊距這個四個內邊距，分別爲padding-top，padding-right，padding-bottom，padding-left。注意是上、右、下、左，這樣一個順時針。
那外邊距就是這個長方形的邊框與長方形外面的內容之間的距離，同樣也有上邊距margin-top，右邊距margin-right，下邊距margin-bottom，左邊距margin-left這個四個邊距。同樣也是上、右、下、左這個順時針。
比如我們給id爲wxmlinfo和studyweapp的<view>組件加一個內部距，讓文字
#wxmlinfo,#studyweapp{
padding-top:20px;
padding-right:15px;
padding-bottom:20px;
padding-left:15px;
}
padding的簡寫 上面這四個padding是可以做一定的簡寫的，關於padding的簡寫，大家可以去閱讀以下技術文檔，多用就會了，CSS padding屬性 ，在這裏有四個padding簡寫的案例，比如上面的這四條聲明可以簡寫成padding:20px 15px。大家可以業餘深入瞭解一下。
class爲title的view組件是標題，我們希望它和下面的文字距離大一點，我們可以添加以下樣式:
.title,.item-title{
margin-bottom:0.9em;
}
爲了讓class爲item-title的<view>組件，也就是列表的標題更加突出，我們可以給它左邊加一個邊框，這裏咋又冒出了一個em的單位，em是相對於當前字體尺寸而言的單位，如果當前你的字體大小爲16px，那1em爲16px；如果當前你的字體大小爲18px，那1em爲18px。
.item-title{
border-left: 3px solid #c60;
padding-left: 15px;
}
這樣，小程序的一篇文章的樣式看起來就算馬馬虎虎可以接受啦~爲了便於大家查閱，我們也把盒子模型的三類屬性整合在了一起
| 內邊距屬性 | |
|---|---|
| padding | 在一個聲明中設置所有內邊距屬性。 |
| padding-top | 設置元素的上內邊距。 |
| padding-right | 設置元素的右內邊距。 |
| padding-bottom | 設置元素的下內邊距。 |
| padding-left | 設置元素的左內邊距。 |
| 外邊距屬性 | |
| margin | 在一個聲明中設置所有外邊距屬性。 |
| margin-top | 設置元素的上外邊距。 |
| margin-right | 設置元素的右外邊距 |
| margin-bottom | 設置元素的下外邊距。 |
| margin-left | 設置元素的左外邊距。 |
| 邊框屬性 | |
| border | 在一個聲明中設置所有的邊框屬性。比如border:1px solid #ccc; |
| border-top | 在一個聲明中設置所有的上邊框屬性。 |
| border-right | 在一個聲明中設置所有的右邊框屬性。 |
| border-bottom | 在一個聲明中設置所有的下邊框屬性。 |
| border-left | 在一個聲明中設置所有的左邊框屬性。 |
| border-width | 設置四條邊框的寬度。 |
| border-style | 設置四條邊框的樣式。 |
| border-color | 設置四條邊框的顏色。 |
| border-radius | 簡寫屬性，設置所有四個 border-*-radius 屬性。 |
| box-shadow | 向方框添加一個或多個陰影。 |
更多的設計樣式，大家可以根據上面的技術文檔，在開發者工具裏像做實驗一樣的來測試學習。