1. 開發語言不同。
   小程式自己開發了一套WXML標籤語言和WXSS樣式語言，並非直接使用標準的HTML5+css3。
2. 元件封裝不同。
   小程式獨立出來了很多原生APP的元件，在HTML5需要模擬才能實現的功能，小程式裡可以直接呼叫元件。

小程式開發者工具

微信小程式的開發工具，基於MINA框架（現已取消該名稱），現在官方公佈的工具名為微信web開發者工具。小程式開發工具是一種基於Native System系統層的框架，由於並非執行在瀏覽器中，所以在web中的一些諸如Document、Window等方法無法使用。
從執行的速度方面，普通HTML5和小程式有哪些不同呢，用一張圖表簡單表示下：

• 傳統HTML5在載入的時候受限於網路環境，需要順序載入
  HTML、CSS、JS，然後返回資料，最後渲染頁面顯示在瀏覽器中。使用者經常需要等待很長時間，體驗會受到影響。
• 相比之下，小程式的兩個執行緒：Appservice Thread和View Thread會同時進行、並行載入，甚至Appservice Thread會更早執行，當檢視執行緒載入完，通知Appservice，Appservice 會把準備好的資料用setData的方法返回給檢視執行緒。

小程式的這種優化策略，可以減少使用者的等待時間、加快小程式的響應速度。

WXML

1、標籤
WXML在語法上更接近XML語言，遵循SGML規範，區別於HTML語言隨意的標籤閉合方式，WXML語言必須包括開始標籤和結束標籤，以image標籤為例，以下2種寫法都支援：

<image src="" />

or

<image src="" ></image>

這裡需要注意的是：

所有元件與屬性都是小寫，以連字元-連線。

2、檔案引入
WXML提供兩種檔案引入方式，import和include。區別在於：import可以引入定義好的template模板，模板是有作用域的；而include就是拷貝一個公用的程式碼片段到目標檔案中，適合做公共頁面片的拆分。

<!--import-->

<import src="../template/a.wxml"/>

<!--include-->

<include src="../include/footer.wxml"/>

檔案引入在小程式做模組化拆分的過程中非常重要。

WXSS

1、尺寸單位
WXSS支援的單位有px、rem和rpx，其中rem和rpx可以針對螢幕容器進行適配，px則為固定尺寸。
其中1rpx=0.5px，在WXSS和WXML中定義的rpx單位最終會轉換為在手機端可以識別的rem單位。
建議：開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。
所以工程師拿到750的設計稿，在PS中量取的容器大小，可以直接定義為rpx，不需要進行2倍尺寸的換算。

view{

font-size:26rpx;

width:400rpx;

height:400rpx;

}

備註：rpx的單位不光在樣式中會自適應，寫在WXML的style裡也會根據螢幕自適應。

2、樣式引入
看到很多文章說小程式不支援樣式的@import，其實官方公佈的第一個正式開發者工具就已經支援了。

import "../../wxss/common.wxss";

3、選擇器

小程式支援的選擇器在官方公佈的文件中包括.class、#id、 element、element,element、::after(注意是雙冒號)、::before這6種選擇器。
經過測試，小程式對於:first-child、:last-child、.class-a .class-b{}，甚至更多層級的巢狀都是支援的。
不過官方並不推薦級聯的這種寫法，因為考慮到後面切Native的擴充套件可能，會沒辦法支援級聯選擇。
所以保險起見，不建議.class-a .class-b{}這種級聯的寫法，以免後期工具過濾導致頁面錯亂。

元件

小程式在0.10.102800的版本中加入了 textarea，並即將廢棄操作反饋的系列元件。
我們簡單通過一個表格來對比下HTML5和小程式的元件標籤的區別；

下面一一來分析下：

1、view
div和view都是盒模型，預設display:block。
盒模型在佈局過程中，一般推薦display:flex的寫法，配合justify-content:center;align-items:center;的定義實現盒模型在橫向和縱向的居中。

2、text
除了text文字節點以外的其他節點都無法長按選中。。
截止到0.10.102800的開發者工具text支援巢狀text，不過有class的text會被面板過濾，樣式不影響。

<text class="text-tips">

<text class="text-light">* </text>友情提示!

</text>

<!--支援text巢狀text-->

<text>

<view></view>

</text>

<!--不支援text巢狀其他標籤-->

3、 icon

icon可以直接用微信元件預設的圖示，預設是iconfont格式的，從WeUI那邊沿襲過來的一種做法。
自定義的icon推薦svg sprite格式或者iconfont。
目前來看，市面上還沒有很好的自動合併單個svg為svg sprite的工具，需要手動拼圖。

4、input
input 的型別，有效值：text, number, idcard, digit, time, date 。
input不需要設定line-height或padding來縱向居中，預設placeholder的文字是居中的。
小程式把checkbox和radio都單獨做成了元件，預設的input只支援輸入文字。
上傳檔案在小程式裡需要呼叫chooseImage事件完成；

<input type="file" class="upload-input" accept="image/*">

<!--HTML5的上傳檔案-->

<view class=" upload-block" bindtap="chooseImage"></view>

<view class="upload-block" wx:for="{{imageList}}" wx:for-item="image">

<image src="{{image}}" class="pic" data-src="{{image}}" bindtap="previewImage"></image>

</view>

<!--小程式的上傳圖片，可以呼叫app原生的拍照和上傳圖片介面-->

小程式CSS裡的 :focus 不生效，需要修改placehoder的樣式，通過placeholder-class=”class”來定義。

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

color: #c0c0c0;

}

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

color: transparent;

}

<!--HTML5通過focus修改placeholder預設和點選時候的樣式-->

<input type="text"  placeholder="郵箱" placeholder-style="color:#c0c0c0" />

<input password type="number" placeholder="密碼" placeholder-class="placeholder"  />

<!--小程式裡通過placeholder-style和placeholder-class修改樣式，不過並不能修改點選時候input的邊框顏色-->

5、picker

picker預設支援普通、日期和時間三種選擇器。
picker通過bindchange事件來調取range中自定義的資料資料，並展示到頁面中，呼叫的是系統原生的select。
這裡小程式廢棄了select元件，考慮到的是這個元件的互動不適合移動場景，最終用picker代替了。

<select class="select-block">

<option value="0">選擇</option>

<option value="1">北京</option>

<option value="2">上海</option>

</select>

<!--HTML5的下拉框-->

<picker bindchange="bindPickerChange" value="{{index}}" range="{{area}}">

<view class="picker">

{{area[index]}}

</view>

</picker>

Page({

data: {

area: ['中國', '美國', '巴西', '日本'],

}

})

<!--js裡的area陣列-->

<!--picker下拉框-->

6、 navigator

navigator支援相對路徑和絕對路徑的跳轉，預設是開啟新頁面，當前頁面開啟需要加redirect；
navigator僅支援5級頁面的跳轉；
navigator不可跳轉到小程式外的連結地址；

<navigator class="navigator" redirect  url="../login/index" >登入頁</navigator>

在小程式開發工具裡，預設開啟新頁面，工具左上角有返回按鈕。加上redirect，當前頁開啟，不出現返回按鈕。

7、image
小程式的image與HTML5的img最大的區別在於：小程式的image是按照background-image來實現的。
預設image的高寬是320*240。必須通過樣式定義去覆蓋這個預設高寬，auto在這裡不生效。（開發者說這樣設定的原因是：如果設定 auto ，頁面佈局會因為圖片載入的過程有一個閃的現象（例如高度從 0 到 height ），所以要求一定要設定一個寬度和高度。）
最新的api支援獲取圖片的高寬。不過這裡返回的高寬是px單位，不支援螢幕自適應；
圖片包括三種縮放模式scaleToFill、aspectFit、aspectFill和9種裁剪模式，三種縮放模式的實現原理對應如下：

scaleToFill{

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

}

aspectFit{

background-size:contain;//保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。

}

aspectFill{

background-size:cover;//保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生擷取。

}

8、button

額外補充下button的實現方式，button的邊框是用:after方式實現的，使用者如果在button上定義邊框會出現兩條線，需用:after的方式去覆蓋預設值。不過這個應該會在最近的開發者工具中修復。

button::after {

content:" ";

width:200%;

height:200%;

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

}

小程式不支援button:active這種樣式的寫法，button的點選態通過.button-hover{}的樣式覆蓋，也可修改hover-class為自定義的樣式名。

9、css3動畫
最新版的開發工具已經支援transition和keyframes動畫，不用js苦哈哈的寫動畫隊列了。

除了官方公佈的小程式的元件之外，有一些標籤比如，span、em、strong、b也是支援的，只是官方並不推薦使用。

瀏覽器核心

• 在ios平臺上，微信的瀏覽器渲染核心是wkwebview；
• 而在平臺上，微信則採用了騰訊QQ瀏覽器2016年4月份釋出的X5核心（blink核心）作為渲染引擎。
• 在小程式的開發工具上，小程式的JavaScript是執行在chrome核心（nwjs）中。

autoprefixer

小程式會在接下來的版本中加入自動補全css字首，使用的外掛是postcss的autoprefixer，設定的相容級別是> ios 8及> android 4.1。

const browserOptions = {

browsers: [

'last 3 versions',

'ios >= 8',

'android >= 4.1',

]

}

也就是說，我們在寫css的時候只需要寫沒有字首的寫法。比如：display:flex，工具自動編譯為display:flex;display:-webkit-flex。

OM小程式實戰

上圖為OM小程式的開發介面。下面我們從佈局、智慧裁圖和loading動畫幾個方面簡單說下OM小程式具體的UI開發經驗。
1、flex佈局

以上圖om的文章列表為例，文章的形態包括純文字的和圖文混合的。圖文混合的文字不管是1行還是2行都需要相對於圖片縱向居中。用flex的佈局，就可以實現這3種狀態不修改CSS檔案，只按需隱藏DOM結構就搞定。

.media {

display: flex;

justify-content:center;//設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

align-items:center;//定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

}

.media .content {

flex: 1;

}

在做傳統H5的時候，為了相容各種低端裝置的機型，通常不太敢輕易嘗試flex，但在小程式裡就可以大膽的使用了。

2、智慧裁圖
正是由於小程式把圖片處理成背景圖片，OM的素材管理頁面圖片的實現方式在這裡遇到了一個挑戰。
簡單列舉下om各種不同尺寸圖片在平臺上的展示方案。

1、高<50px：
（1）寬<175px，原圖居中顯示；
（2）寬>175px，定寬等比上下居中顯示；
2、50px<高<400px：
（1）寬<175px，原圖居中顯示；
（2）寬>175px，定寬等比顯示；
3、高>400px：
（1）寬<175px，原圖居中顯示、超出400px高度隱藏；
（2）寬>175px，定寬等比顯示、超出400px高度隱藏；

這種方案，用css和img實現起來，只需要設定外層盒子最大高寬，圖片自適應縮放即可。

.pic-list .pic-item .pic-body .pic {

width: 100%;

text-align: center;

overflow: hidden;

max-height: 4rem;

min-height: 0.5rem;

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-align: center;

-webkit-box-pack: center;

}

.pic img {

-webkit-box-flex: 1;

}

然而因為小程式裡是用背景圖片的方式，簡單的css設定並不能實現智慧裁圖的方案。需要配合js計算出不同尺寸圖片對應的適配尺寸。

.pic-list .pic-item .pic-body .pic {

width: 100%;

text-align: center;

overflow: hidden;

max-height: 800rpx;

min-height: 100rpx;

display:flex;

align-items:center;

justify-content:center;

}

這裡需要後臺介面提供資料列表的圖片高寬，js對拿到圖片的不同尺寸進行演算法計算，重新賦值再返回給資料。

3、css3動畫改變預設loading
小程式預設提供的loading是普通的菊花loading，這裡OM使用自定義的keyframes序列幀動畫。

.icon-loading {

animation: loadingWhite 1.2s infinite linear;

animation-timing-function: steps(10);

}

@keyframes loadingWhite {

0% {

background-position:0 0;

}

100%{

background-position:-500rpx 0;

}

}

寫在最後

1. 微信小程式集成了很多原生APP的元件，從體驗和頁面流暢度來說，都會比HTML5要優秀很多。
2. 微信小程式相對於HTML5開發來說，除了熟悉API需要學習成本之外，開發難度指數3顆星，還是很容易上手的。
3. 開發者工具、元件和API目前剛剛對外公測，還不算太成熟，裡面還有很多坑需要開發者去填。

文章篇幅有限，在這裡只能簡單從UI開發角度介紹下小程式的開發經驗。有關小程式的更多API，可以查閱小程式開發文件 。
由於開發工具一直在持續更新，文章中可能會有不準確或者更新不及時的地方，還請諒解。