從零開始的微信小程序入門教程(二)，初識WXML與WXSS

壹 ❀ 引

時隔大半年，我終於開始寫小程序入門教程的第二篇了，其實我也在納悶，這么久的時間我到底干了什么，仔細一想，我學了JavaScript部分進階知識，學了ES6，系統性的去復習了angularjs，學了正則以及一些亂七八糟的東西（通過博客文章目錄可以看出來...），心里估摸着，這大半年時間里我確實浪費了不少時間，想到這里我心里難免會有羞愧的心理....自己自律性還是太差了...

比較意外，小程序教程第一篇居然有不錯的點擊量，還收到了催更的評論，其實看到這些評論，我心里是很愧疚的...所以這也堅定了我要繼續寫下去的信念。在第一篇教程結尾，我說下一篇圍繞小程序的標簽語言以及頁面樣式展開，畢竟這更符合前端開發者的學習習慣，廢話不多說，本文將圍繞WXML與WXSS展開，那么本文開始。

貳 ❀ 初識WXML

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

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

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

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

.bth{
    outline:none;
    border:none;
    background:#e4393c;
    color:#fff;
    text-align: center;
    cursor: pointer;
}

<div>
    <button class="btn">按鈕1</button>
    <div>
        <button class="btn">按鈕2</button>
    </div>
</div>

組件的概念也是如此，比如提示類彈窗在整個網站中的多個頁面都會使用，那我們為什么不把這個彈窗功能封裝成一個組件呢，之后不管哪個頁面需要此功能，只要添加這個組件就可以了。要實現這個組件我們都得先定義好組件模板（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就是不錯的方法。

肆 ❀ 總

忙忙碌碌，關於微信WXML與WXSS的介紹先說這里，較為遺憾的是，我確實沒辦法把小程序中的每個組件都說一遍，還得各位自行過一遍，大致知道哪個是做什么，在日后開發中，能立馬想到該使用哪個組件。

其實知道了這些，我們已經可以初步搭建靜態的小程序頁面了。有了頁面，自然會有數據交互，那么我們又該如何將數據渲染到小程序界面上呢？這個話題留到下篇文章介紹。那么到這里本文結束。

教程第三篇 從零開始的微信小程序入門教程(三)，有趣且好玩的數據綁定 已更新。