熟悉一門(mén)開(kāi)發(fā)語(yǔ)言或是一種框架，除了了解它的基本語(yǔ)法、基本控件、基本屬性之外，最好的方式莫過(guò)于追根溯源，與同類型的、自己熟悉的語(yǔ)言比較并了解它的異同，這樣才能更好的去理解并記憶。

　　下面我們先探究下它們之間的區(qū)別。

　　小程序與傳統(tǒng)HTML5的區(qū)別

　　小程序剛開(kāi)放公測(cè)，互聯(lián)網(wǎng)圈內(nèi)開(kāi)始了各種解讀和猜測(cè)。其中有觀點(diǎn)認(rèn)為小程序和HTML5有著緊密關(guān)聯(lián)，甚至小程序就是基于HTML5開(kāi)發(fā)。

　　經(jīng)過(guò)仔細(xì)研究文檔和代碼開(kāi)發(fā)，從視圖層的角度來(lái)說(shuō)，小程序與傳統(tǒng)HTML5還是有明顯的區(qū)別，主要區(qū)別在于：

開(kāi)發(fā)工具不同。

開(kāi)發(fā)工具+瀏覽器Device Mode預(yù)覽的模式

區(qū)別于H5的，小程序的開(kāi)發(fā)基于自己的開(kāi)發(fā)者工具，可以實(shí)現(xiàn)同步本地文件+開(kāi)發(fā)調(diào)試+編譯+預(yù)覽+上傳+發(fā)布等一整套流程。

開(kāi)發(fā)語(yǔ)言不同。

　　小程序自己開(kāi)發(fā)了一套WXML標(biāo)簽語(yǔ)言和WXSS樣式語(yǔ)言，并非直接使用標(biāo)準(zhǔn)的HTML5+CSS3。

組件封裝不同。

　　小程序獨(dú)立出來(lái)了很多原生APP的組件，在HTML5需要模擬才能實(shí)現(xiàn)的功能，小程序里可以直接調(diào)用組件。

小程序開(kāi)發(fā)者工具

　　微信小程序的開(kāi)發(fā)工具，基于MINA框架(現(xiàn)已取消該名稱)，現(xiàn)在官方公布的工具名為微信web開(kāi)發(fā)者工具。小程序開(kāi)發(fā)工具是一種基于Native System系統(tǒng)層的框架，由于并非運(yùn)行在瀏覽器中，所以JavaScript在web中的一些諸如Document、Window等方法無(wú)法使用。

從執(zhí)行的速度方面，普通HTML5和小程序有哪些不同呢，用一張圖表簡(jiǎn)單表示下：

　　傳統(tǒng)HTML5在加載的時(shí)候受限于網(wǎng)絡(luò)環(huán)境，需要順序加載HTML、CSS、JS，然后返回?cái)?shù)據(jù)，最后渲染頁(yè)面顯示在瀏覽器中。用戶經(jīng)常需要等待很長(zhǎng)時(shí)間，體驗(yàn)會(huì)受到影響。

Appservice Thread
     相比之下，小程序的兩個(gè)線程：和會(huì)同時(shí)進(jìn)行、并行加載，甚至Appservice Thread會(huì)更早執(zhí)行，當(dāng)視圖線程加載完，通知Appservice，Appservice 會(huì)把準(zhǔn)備好的數(shù)據(jù)用setData的方法返回給視圖線程。

　　小程序的這種優(yōu)化策略，可以減少用戶的等待時(shí)間、加快小程序的響應(yīng)速度。

　　WXML

1、標(biāo)簽

　　WXML在語(yǔ)法上更接近XML語(yǔ)言，遵循SGML規(guī)范，區(qū)別于HTML語(yǔ)言隨意的標(biāo)簽閉合方式，WXML語(yǔ)言必須包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，以image標(biāo)簽為例，以下2種寫(xiě)法都支持：

　　

　　or

　　

　　這里需要注意的是：

　　所有組件與屬性都是小寫(xiě)，以連字符-連接。

2、文件引入

　　WXML提供兩種文件引入方式，import和include。

　　區(qū)別在于：

　　import可以引入定義好的template模板，模板是有作用域的;

　　include就是拷貝一個(gè)公用的代碼片段到目標(biāo)文件中，適合做公共頁(yè)面片的拆分。

　　文件引入在小程序做模塊化拆分的過(guò)程中非常重要。

　　WXSS

1、尺寸單位

　　WXSS支持的單位有px、rem和rpx，其中rem和rpx可以針對(duì)屏幕容器進(jìn)行適配，px則為固定尺寸。

　　其中1rpx=0.5px，在WXSS和WXML中定義的rpx單位最終會(huì)轉(zhuǎn)換為在手機(jī)端可以識(shí)別的rem單位。

　　建議：開(kāi)發(fā)微信小程序時(shí)設(shè)計(jì)師可以用%20iPhone6%20作為視覺(jué)稿的標(biāo)準(zhǔn)。

　　所以工程師拿到750的設(shè)計(jì)稿，在PS中量取的容器大小，可以直接定義為rpx，不需要進(jìn)行2倍尺寸的換算。

　　.view{

　　font-size:26rpx;

　　width:400rpx;

　　height:400rpx;

　　}

　　備注：rpx的單位不光在樣式中會(huì)自適應(yīng)，寫(xiě)在WXML的style里也會(huì)根據(jù)屏幕自適應(yīng)。

2、樣式引入

　　看到很多文章說(shuō)小程序不支持樣式的@import，其實(shí)是不能import%20css文件而已。而官方公布的第一個(gè)正式開(kāi)發(fā)者工具就已經(jīng)支持了。

　　import%20"../../wxss/common.wxss";

3、內(nèi)聯(lián)樣式

　　框架組件上支持使用%20style、class%20屬性來(lái)控制組件的樣式。

　　style：style%20接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫(xiě)進(jìn)%20style%20中，以免影響渲染速度。

　　class：靜態(tài)的樣式統(tǒng)一寫(xiě)到%20class%20中。用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

4、選擇器

　　小程序支持的選擇器在官方公布的文檔中包括.class、#id、%20element、element,element、::after(注意是雙冒號(hào))、::before這6種選擇器。

　　經(jīng)過(guò)測(cè)試，小程序?qū)τ?first-child、:last-child、.class-a%20.class-b{}，甚至更多層級(jí)的嵌套都是支持的。

　　不過(guò)官方并不推薦級(jí)聯(lián)的這種寫(xiě)法，因?yàn)榭紤]到后面切Native的擴(kuò)展可能，會(huì)沒(méi)辦法支持級(jí)聯(lián)選擇。

　　所以保險(xiǎn)起見(jiàn)，不建議.class-a%20.class-b{}這種級(jí)聯(lián)的寫(xiě)法，以免后期工具過(guò)濾導(dǎo)致頁(yè)面錯(cuò)亂。

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有%20class="intro"%20的組件
#id	#firstname	選擇擁有%20id="firstname"%20的組件
element	view	選擇所有%20view%20組件
element,%20element	view,%20checkbox	選擇所有文檔的%20view%20組件和所有的%20checkbox%20組件
::after	view::after	在%20view%20組件后邊插入內(nèi)容
::before	view::before	在%20view%20組件前邊插入內(nèi)容

　　組件我們簡(jiǎn)單通過(guò)一個(gè)表格來(lái)對(duì)比下HTML5和小程序的組件標(biāo)簽的區(qū)別;

　  下面一一來(lái)分析下：

1、view

　　div和view都是盒模型，默認(rèn)display:block。

　　盒模型在布局過(guò)程中，一般推薦display:flex的寫(xiě)法，配合justify-content:center;align-items:center;的定義實(shí)現(xiàn)盒模型在橫向和縱向的居中。

2、text

　　除了text文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無(wú)法長(zhǎng)按選中。。

3、 icon

　　icon可以直接用微信組件默認(rèn)的圖標(biāo)，默認(rèn)是iconfont格式的，從WeUI那邊沿襲過(guò)來(lái)的一種做法。

　　自定義的icon推薦svg sprite格式或者iconfont。

　　目前來(lái)看，市面上還沒(méi)有很好的自動(dòng)合并單個(gè)svg為svg sprite的工具，需要手動(dòng)拼圖。

　　其實(shí)我自己還是推薦使用iconfont格式的，因?yàn)閍libaba~~~ 戳我

4、input

　　input 的類型，有效值：text, number, idcard, digit 。

　　小程序把checkbox和radio都單獨(dú)做成了組件，默認(rèn)的input只支持輸入文本。

　　上傳文件在小程序里需要調(diào)用chooseImage事件完成;

　　小程序CSS里的 :focus 不生效，需要修改placehoder的樣式，通過(guò)placeholder-class=”class”來(lái)定義。

　　.login .input-group input::-webkit-input-placeholder {

　　color: #c0c0c0;

　　}

　　.login .input-group input:focus::-webkit-input-placeholder {

　　color: transparent;

　　}

　　或者

　　

5、picker

　　picker默認(rèn)支持普通、日期和時(shí)間三種選擇器。

　　picker通過(guò)bindchange事件來(lái)調(diào)取range中自定義的數(shù)據(jù)，并展示到頁(yè)面中，調(diào)用的是系統(tǒng)原生的select。

　　這里小程序廢棄了select組件，考慮到的是這個(gè)組件的交互不適合移動(dòng)場(chǎng)景，最終用picker代替了。

6、 navigator

　　navigator支持相對(duì)路徑和絕對(duì)路徑的跳轉(zhuǎn)，默認(rèn)是打開(kāi)新頁(yè)面，當(dāng)前頁(yè)面打開(kāi)需要加redirect;

　　navigator僅支持5級(jí)頁(yè)面的跳轉(zhuǎn);

　　navigator不可跳轉(zhuǎn)到小程序外的鏈接地址;

7、image

　　小程序的image與HTML5的img最大的區(qū)別在于：小程序的image是按照background-image來(lái)實(shí)現(xiàn)的。

　　默認(rèn)image的高寬是320*240。必須通過(guò)樣式定義去覆蓋這個(gè)默認(rèn)高寬，auto在這里不生效。(開(kāi)發(fā)者說(shuō)這樣設(shè)置的原因是：如果設(shè)置 auto ，頁(yè)面布局會(huì)因?yàn)閳D片加載的過(guò)程有一個(gè)閃的現(xiàn)象(例如高度從 0 到 height )，所以要求一定要設(shè)置一個(gè)寬度和高度。)

　　最新的api支持獲取圖片的高寬。不過(guò)這里返回的高寬是px單位，不支持屏幕自適應(yīng);

　　圖片包括三種縮放模式scaleToFill、aspectFit、aspectFill和9種裁剪模式，三種縮放模式的實(shí)現(xiàn)原理對(duì)應(yīng)如下：

　　scaleToFill{

　　background-size:100% 100%;//不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素

　　}

　　aspectFit{

　　background-size:contain;//保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)。也就是說(shuō)，可以完整地將圖片顯示出來(lái)。

　　}

　　aspectFill{

　　background-size:cover;//保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)。也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。

　　}

8、button

　　額外補(bǔ)充下button的實(shí)現(xiàn)方式，button的邊框是用::after方式實(shí)現(xiàn)的，用戶如果在button上定義邊框會(huì)出現(xiàn)兩條線，需用::after的方式去覆蓋默認(rèn)值。

　　button::after {

　　content:" ";

　　width:200%;

　　height:200%;

　　border:1px solid rgba(0, 0, 0, 0.2);

　　}

　　小程序不支持button:active這種樣式的寫(xiě)法，button的點(diǎn)擊態(tài)通過(guò).button-hover{}的樣式覆蓋，也可修改hover-class為自定義的樣式名。

9、css3動(dòng)畫(huà)

OM小程序?qū)崙?zhàn)

　　上圖為OM小程序的開(kāi)發(fā)界面。下面我們從布局、智能裁圖和loading動(dòng)畫(huà)幾個(gè)方面簡(jiǎn)單說(shuō)下OM小程序具體的UI開(kāi)發(fā)經(jīng)驗(yàn)。

1、flex布局

　　以上圖om的文章列表為例，文章的形態(tài)包括純文字的和圖文混合的。圖文混合的文字不管是1行還是2行都需要相對(duì)于圖片縱向居中。用flex的布局，就可以實(shí)現(xiàn)這3種狀態(tài)不修改CSS文件，只按需隱藏DOM結(jié)構(gòu)就搞定。

　　.media {

　　display: flex;

　　justify-content:center;//設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式。

　　align-items:center;//定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對(duì)齊方式。

　　}

　　.media .content {

　　flex: 1;

　　}

　　在做傳統(tǒng)H5的時(shí)候，為了兼容各種低端設(shè)備的機(jī)型，通常不太敢輕易嘗試flex，但在小程序里就可以大膽的使用了。

2、智能裁圖

　　正是由于小程序把圖片處理成背景圖片，OM的素材管理頁(yè)面圖片的實(shí)現(xiàn)方式在這里遇到了一個(gè)挑戰(zhàn)。

　　簡(jiǎn)單列舉下om各種不同尺寸圖片在平臺(tái)上的展示方案。

　　1、高<50px：

　　2、50px<高<400px：

　　(1)寬<175px，原圖居中顯示;

　　(2)寬>175px，定寬等比顯示;

　　3、高>400px：

　　(1)寬<175px，原圖居中顯示、超出400px高度隱藏;

　　(2)寬>175px，定寬等比顯示、超出400px高度隱藏;

　　這種方案，用css和img實(shí)現(xiàn)起來(lái)，只需要設(shè)置外層盒子最大高寬，圖片自適應(yīng)縮放即可。