本文將圍繞WXML與WXSS展開，那么本文開始。

對于每一位前端開發者而言，熟練的編寫靜態頁面是入門的開始，在小程序中這一點也無法避免。在介紹微信小程序功能交互之前，我們先了解在小程序中如何實現頁面布局與頁面樣式，這里先來介紹WXML。

WXML全稱WeiXin Markup Language（微信標記語言），與HTML有些不同的是，這是微信框架提供的一套標簽語言。

我們在寫HTML頁面時，總是習慣使用div進行整體布局，使用span描述文本信息，使用img裝載圖片等等，但在WXML中會有一些差異。WXML提供的每個標簽都是一個組件，使用過vue，react或angular的同學對于組件概念一定不會陌生，鑒于剛入門的前端同學，這里做個簡單解釋。

我們在編程時總會考慮代碼復用性，比如一個頁面有好幾處的樣式完全相同，那么我們可以將這一塊樣式定義在一個class中，接下來只要把這個class加在你需要展示的地方就可以了。

組件的概念也是如此，比如提示類彈窗在整個網站中的多個頁面都會使用，那我們為什么不把這個彈窗功能封裝成一個組件呢，之后不管哪個頁面需要此功能，只要添加這個組件就可以了。要實現這個組件我們都得先定義好組件模板（HTML，決定組件結構），組件默認樣式（CSS，決定組件外觀），組件功能（JS，決定組件負責做哪些事）等。

而在小程序框架中，官方已經提前幫我們實現了大量的組件，比如基本視圖組件中的view相當于HTML中的div可用來布局；基本內容組件中的text相當于span，可以用來裝載多段行內文本，再如媒體組件中的image，它相當于img標簽用來承載圖片信息。

除此之外，每個小程序組件都默認提供了一些非常nice的屬性，這里以image組件為例。

假設我們希望圖片加載完成后做一件事情，比如獲取圖片的寬度，這里就可以利用image的bindload（圖片加載完成后觸發）屬性，打開我們的小程序開發工具，在index.wxml中添加一個image組件：

<view>
  <!-- 圖片直接拿了嗶哩嗶哩的，萬一以后打不開了，大家自己隨便找個圖 -->
  <image bindload='imgLoad' src='https://i0.hdslb.com/bfs/live/6c41e9f57094fae13728cd27e7d1c1379a3f1fcd.jpg@320w_330h_1c_100q.webp'></image></view>

對應的，在index.js添加如下代碼：

const app = getApp()

Page({  //圖片加載完成后執行的方法
  imgLoad(image) {    console.log(image.detail.width);
  }
})

保存，可以看到在編輯器console控制臺輸出了320，這是image組件默認的寬度樣式。

再例如圖片懶加載在頁面優化中也是需要考慮的一點，而image提供了lazy-load屬性用于解決圖片懶加載問題。

小程序官方提供的組件數量較多，很遺憾沒辦法一一介紹，但官方已經做了明細的組件分類，我們要做的就是拿到一個頁面清楚知道需要用到哪些組件，一個組件需要用到哪些屬性，就像搭積木一樣，用這些組件來組成小程序的頁面，還記得最初學HTML時標簽使用的陌生感嗎？它并沒有難度，只是需要多加練習而已。

關于WXSS

可以放心的是WXSS并沒有對于樣式高度拓展，之前CSS樣式怎么玩，現在在小程序還是一樣的玩。這點官方文檔有點坑，比如官方說選擇器目前只支持如下幾種：

項目	例子	含義
#id	#parent	選擇id='parent'的組件
.class	.child	選擇所有class='child'的組件
element	view	選擇所有view組件
element,element	view,text	選擇所有view組件和text組件
::after	text::after	在text組件后面插入內容
::before	text::before	在text組件前面插入內容

但事實證明子代選擇器，后代選擇器以及偽類選擇器大部分都支持，比如下面的例子：

<view class="box">
	<text>一往情深深幾許，</text>
	<text>深山夕照深秋雨。</text>
	<input placeholder="輸入作者名字" /></view>

.box>text:first-child {  color: #e4393c;
}input:active {  border: 1px solid #ddd;
}

但也有不支持的部分，比如在手機上大家是沒辦法使用:hover偽類，畢竟手機上沒有鼠標懸浮。

關于WXSS，小程序也做了亮點拓展，我們先說新增的尺寸單位rpx，官方描述如下：

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

并提供了如下幾個手機型號的轉換例子：

設備型號	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

這里我提前查了下這三款手機的邏輯像素比：

• iPhone5：320px x 568px

• iPhone6 : 375px x 667px

• iPhone6 plus : 414px x 736px

我們從UI設計師手上拿的圖一般都是px單位的標注，如果在小程序上直接用px做單位會因為各類手機屏幕占寬比不同，導致一樣的設計在不同設備上表現差異的問題，所以以往我們通常用rem或者vw來解決這個問題，而rpx只是小程序提供的另一解決方案。

假設UI以iphone6機型為標準做的設計稿，設計稿上有一個盒子寬高各位200px，我們嘗試切換設備型號，效果如下：

可以看到在iphone5的情況下，盒子右邊留白還挺多，切到iphoneX時，留白明顯減少。

現在我們試試改成rpx，怎么計算呢？上面例子已經給出，1px=rpx*(750/設備屏幕寬度)，因為我們假設的原型圖是以iphone6為標準，所以這里就是1px=rpx*(750/375)，所以才有1px=2rpx這個結論。

大家可以試試，在iphone6的情況下將200px改為400rpx，修改后可以看到盒子大小并不會改變。OK，現在我們再來修改設備型號：

哎？經過修改，我們發現不管怎么切換設備型號，盒子所占寬度的比例，一直都是接近屏幕寬一半左右，這就是rpx的作用。

官方推薦開發微信小程序時設計師用 iPhone6 作為視覺稿的標準，畢竟2倍好計算，萬一設計師沒用iphone6，大家也可以套上面的公式知道應該設置多少，那么關于rpx就說到這里。

WXSS第二個拓展就是關于樣式導入，以前我們寫HTML都是通過link來引入樣式，但大家發現沒，小程序中WXML與WXSS都是放在一個文件下就會自動引入樣式，跟沒就沒看到引入樣式的標簽，那我要引入別處的樣式咋整，所以小程序提供了@import導入外聯樣式的方法，寫過less的同學看到這個一定就特別熟悉了，我們來看個例子：

我們現在index.wxml中添加一個標簽：

<!-- index.wxml --><text class='box'>1</text>

并在index.wxss添加如下樣式：

/* index.wxss */.box{  width: 400rpx;  height: 400rpx;  display: block;  background-color: antiquewhite;
}

現在，我們在全局環境新建一個common.wsxx樣式表

/* common.wxss */.box{  text-align: center;
}

在index.wxss表頭添加如下代碼@import "../../common.wxss";，添加完成后保存：

@import "../../common.wxss";.box{  width: 400rpx;  height: 400rpx;  display: block;  background-color: antiquewhite;
}

界面刷新，我們發現common里面定義的文本居中樣式就對index頁面生效了，說明外聯樣式引入成功。

注意，小程序根目錄的app.wxss是指全局樣式，只要在里面寫的樣式，會對所有頁面生效，就相當于小程序默認為每個頁面引入了這個樣式表。所以當有一些樣式可復用，而我們又想手動控制是否引入時，利用@import就是不錯的方法。