2.1　微信小程序代碼構(gòu)成

微信小程序與前端比較類似，主要文件類型為WXML、WXSS、WXS，分別對(duì)應(yīng)了前端的HTML、CSS、JS，所以有前端基礎(chǔ)的讀者，能更好地理解并掌握小程序的代碼結(jié)構(gòu)。值得一提的是，雖然兩種技術(shù)非常相似，但是它們還是有明顯區(qū)別的，在接下來(lái)的內(nèi)容中，我們會(huì)基于與前端的區(qū)別來(lái)進(jìn)行講解。

2.1.1　WXML

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。與傳統(tǒng)的HTML相比，WXML的標(biāo)簽更少一些，HTML中分為<div>、<p>、<span>、<h1>等，種類繁多，而常用的是<view>、<text>、<image>等。小程序通過(guò)封裝使得選擇變少，基本上視圖容器用<view>、文本用<text>就可以滿足大多數(shù)需求。

雖然標(biāo)簽變少了，但是小程序給標(biāo)簽封裝了很多實(shí)用的功能。以<text>舉例，它的selectable屬性可以控制文本是否可以選擇，space控制是否可以連續(xù)顯示空格，decode控制是否將文本解碼。所以，對(duì)于常用的自帶屬性，我們需要牢牢記住，否則重復(fù)造輪子將無(wú)法提高開發(fā)效率。

最后說(shuō)說(shuō)WXML的一些語(yǔ)法。熟悉Angular、Vue等前端框架的讀者可能會(huì)知道數(shù)據(jù)綁定、列表渲染、條件渲染，使用這些功能可以輕易實(shí)現(xiàn)在標(biāo)簽頁(yè)中使用for、if等語(yǔ)句。WXML也提供了類似的功能，具體的使用方式我們會(huì)在后面的章節(jié)中進(jìn)行講解。

2.1.2　WXSS

WXSS（WeiXin Style Sheets）是一套樣式語(yǔ)言，用于描述WXML的組件樣式。比起WXML和HTML，WXSS與CSS的區(qū)別不是很大，基本上CSS能用的WXSS都可以用。

為了更適應(yīng)小程序，WXSS有兩個(gè)比較明顯的改動(dòng)——尺寸單位與樣式導(dǎo)入。

尺寸單位上推出了一種叫rpx（responsive pixel）的單位。相比px，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，效果見表2.1。

可以看到在iPhone 6上，1px正好等于2rpx，所以官方也建議設(shè)計(jì)師使用iPhone 6的尺寸作為設(shè)計(jì)稿視覺標(biāo)準(zhǔn)。

樣式導(dǎo)入使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用“;”表示語(yǔ)句結(jié)束。示例代碼如下：

2.1.3　WXS

WXS（WeiXin Script）是小程序的一套腳本語(yǔ)言，跟JavaScript比較相似，但也有自己獨(dú)特的特性。WXS的運(yùn)行環(huán)境和其他JavaScript代碼是隔離的，WXS中不能調(diào)用其他JavaScript文件中定義的函數(shù)，也不能調(diào)用小程序提供的API。根據(jù)官方公布的內(nèi)容，在iOS設(shè)備上小程序內(nèi)的WXS會(huì)比JavaScript代碼快2～20倍。在Android設(shè)備上，二者的運(yùn)行效率無(wú)差異，這種差異是由運(yùn)行環(huán)境造成的。

雖然官方說(shuō)WXS與JavaScript是不同的語(yǔ)言，有自己的語(yǔ)法，但是整體使用下來(lái)會(huì)發(fā)現(xiàn)很多內(nèi)容還是十分相似的，比如數(shù)據(jù)類型基本相同，聲明變量還是var，if、for的寫法也沒有區(qū)別，slice、replace等用法也都一樣。所以，擁有JavaScript基礎(chǔ)還是對(duì)學(xué)習(xí)小程序有很大幫助的。

WXML、WXSS、WXS與前端HTML、CSS、JS的區(qū)別，讀者大概了解了，可以看出小程序與前端的技術(shù)重合度相對(duì)來(lái)說(shuō)比較高，畢竟小程序的實(shí)現(xiàn)也是建立在封裝之上的。所以，沒有前端基礎(chǔ)的讀者最好把前端的知識(shí)補(bǔ)一補(bǔ)，這樣知其然更知其所以然。