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