小程序與傳統(tǒng)HTML5的區(qū)別
小程序剛開放公測艰亮，互聯(lián)網(wǎng)圈內(nèi)開始了各種解讀和猜測闭翩。其中有觀點(diǎn)認(rèn)為小程序和HTML5有著緊密關(guān)聯(lián)，甚至小程序就是基于HTML5開發(fā)垃杖。
經(jīng)過仔細(xì)研究文檔和代碼開發(fā)男杈，從視圖層的角度來說丈屹，小程序與傳統(tǒng)HTML5還是有明顯的區(qū)別调俘，主要區(qū)別在于：
1、開發(fā)工具不同旺垒；
區(qū)別于H5的開發(fā)工具+瀏覽器Device Mode預(yù)覽的模式彩库，小程序的開發(fā)基于自己的開發(fā)者工具，可以實(shí)現(xiàn)同步本地文件+開發(fā)調(diào)試+編譯+預(yù)覽+上傳+發(fā)布等一整套流程先蒋。
2骇钦、開發(fā)語言不同；
小程序自己開發(fā)了一套WXML標(biāo)簽語言和WXSS樣式語言竞漾，并非直接使用標(biāo)準(zhǔn)的HTML5+CSS3眯搭。
3窥翩、組件封裝不同；
小程序獨(dú)立出來了很多原生APP的組件鳞仙，在HTML5需要模擬才能實(shí)現(xiàn)的功能寇蚊，小程序里可以直接調(diào)用組件。
小程序開發(fā)者工具
微信小程序的開發(fā)工具棍好，基于MINA框架（現(xiàn)已取消該名稱）仗岸，現(xiàn)在官方公布的工具名為微信web開發(fā)者工具。小程序開發(fā)工具是一種基于Native System系統(tǒng)層的框架借笙，由于并非運(yùn)行在瀏覽器中扒怖，所以JavaScript在web中的一些諸如Document、Window等方法無法使用业稼。
從執(zhí)行的速度方面盗痒，普通HTML5和小程序有哪些不同呢，用一張圖表簡單表示下：
傳統(tǒng)HTML5在加載的時(shí)候受限于網(wǎng)絡(luò)環(huán)境低散，需要順序加載HTML积糯、CSS、JS谦纱，然后返回?cái)?shù)據(jù)看成，最后渲染頁面顯示在瀏覽器中。用戶經(jīng)常需要等待很長時(shí)間跨嘉，體驗(yàn)會(huì)受到影響川慌。
相比之下，小程序的兩個(gè)線程：Appservice Thread和View Thread會(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在語法上更接近XML語言沛膳，遵循SGML規(guī)范，區(qū)別于HTML語言隨意的標(biāo)簽閉合方式汛聚，WXML語言必須包括開始標(biāo)簽和結(jié)束標(biāo)簽锹安，以image標(biāo)簽為例，以下2種寫法都支持：
<image src="" />
or
<image src="" ></image>
這里需要注意的是：
所有組件與屬性都是小寫，以連字符-連接叹哭。
2忍宋、文件引入
WXML提供兩種文件引入方式，import和include风罩。區(qū)別在于：import可以引入定義好的template模板讶踪，模板是有作用域的；而include就是拷貝一個(gè)公用的代碼片段到目標(biāo)文件中泊交，適合做公共頁面片的拆分乳讥。
<!--import-->
<import src="../template/a.wxml"/>
<!--include-->
<include src="../include/footer.wxml"/>
文件引入在小程序做模塊化拆分的過程中非常重要。
WXSS
1廓俭、尺寸單位
WXSS支持的單位有px云石、rem和rpx，其中rem和rpx可以針對屏幕容器進(jìn)行適配研乒，px則為固定尺寸汹忠。 其中1rpx=0.5px，在WXSS和WXML中定義的rpx單位最終會(huì)轉(zhuǎn)換為在手機(jī)端可以識(shí)別的rem單位雹熬。
建議：開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)宽菜。
所以工程師拿到750的設(shè)計(jì)稿，在PS中量取的容器大小竿报，可以直接定義為rpx铅乡，不需要進(jìn)行2倍尺寸的換算。
view{
font-size:26rpx;
width:400rpx;
height:400rpx;
}
備注：rpx的單位不光在樣式中會(huì)自適應(yīng)烈菌，寫在WXML的style里也會(huì)根據(jù)屏幕自適應(yīng)阵幸。
2、樣式引入
看到很多文章說小程序不支持樣式的@import芽世，其實(shí)官方公布的第一個(gè)正式開發(fā)者工具就已經(jīng)支持了挚赊。
import "../../wxss/common.wxss";
3、選擇器
小程序支持的選擇器在官方公布的文檔中包括.class济瓢、#id荠割、 element、element,element旺矾、::after(注意是雙冒號(hào))蔑鹦、::before這6種選擇器。
經(jīng)過測試宠漩，小程序?qū)τ?first-child举反、:last-child、.class-a .class-b{}扒吁，甚至更多層級(jí)的嵌套都是支持的。 不過官方并不推薦級(jí)聯(lián)的這種寫法，因?yàn)榭紤]到后面切Native的擴(kuò)展可能雕崩，會(huì)沒辦法支持級(jí)聯(lián)選擇魁索。
所以保險(xiǎn)起見，不建議.class-a .class-b{}這種級(jí)聯(lián)的寫法盼铁，以免后期工具過濾導(dǎo)致頁面錯(cuò)亂粗蔚。
組件
小程序在0.10.102800的版本中加入了 textarea，并即將廢棄操作反饋的系列組件饶火。
我們簡單通過一個(gè)表格來對比下HTML5和小程序的組件標(biāo)簽的區(qū)別鹏控；
下面一一來分析下：
1、view
div和view都是盒模型肤寝，默認(rèn)display:block当辐。 盒模型在布局過程中，一般推薦display:flex的寫法鲤看，配合justify-content:center;align-items:center;的定義實(shí)現(xiàn)盒模型在橫向和縱向的居中缘揪。
2、text
除了text文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無法長按選中义桂。截止到0.10.102800的開發(fā)者工具text支持嵌套text找筝，不過有class的text會(huì)被面板過濾，樣式不影響慷吊。
<text class="text-tips">
<text class="text-light">* </text>友情提示!
</text>
<!--支持text嵌套text-->
<text>
<view></view>
</text>
<!--不支持text嵌套其他標(biāo)簽-->
3袖裕、 icon
icon可以直接用微信組件默認(rèn)的圖標(biāo)，默認(rèn)是iconfont格式的溉瓶，從WeUI那邊沿襲過來的一種做法陆赋。 自定義的icon推薦svg sprite格式或者iconfont。
目前來看嚷闭，市面上還沒有很好的自動(dòng)合并單個(gè)svg為svg sprite的工具攒岛，需要手動(dòng)拼圖。
4胞锰、input
input 的類型灾锯，有效值：text, number, idcard, digit, time, date 。 input不需要設(shè)置line-height或padding來縱向居中嗅榕，默認(rèn)placeholder的文字是居中的顺饮。 小程序把checkbox和radio都單獨(dú)做成了組件，默認(rèn)的input只支持輸入文本凌那。 上傳文件在小程序里需要調(diào)用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>
<!--小程序的上傳圖片，可以調(diào)用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默認(rèn)和點(diǎn)擊時(shí)候的樣式-->
<input type="text" placeholder="郵箱" placeholder-style="color:#c0c0c0" />
<input password type="number" placeholder="密碼" placeholder-class="placeholder" />
<!--小程序里通過placeholder-style和placeholder-class修改樣式，不過并不能修改點(diǎn)擊時(shí)候input的邊框顏色-->
5佃乘、picker
picker默認(rèn)支持普通囱井、日期和時(shí)間三種選擇器。 picker通過bindchange事件來調(diào)取range中自定義的數(shù)據(jù)數(shù)據(jù)趣避，并展示到頁面中庞呕，調(diào)用的是系統(tǒng)原生的select。
這里小程序廢棄了select組件程帕，考慮到的是這個(gè)組件的交互不適合移動(dòng)場景住练，最終用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數(shù)組-->
<!--picker下拉框-->
6愁拭、 navigator
navigator支持相對路徑和絕對路徑的跳轉(zhuǎn)讲逛，默認(rèn)是打開新頁面，當(dāng)前頁面打開需要加redirect敛苇；
navigator僅支持5級(jí)頁面的跳轉(zhuǎn)妆绞；
navigator不可跳轉(zhuǎn)到小程序外的鏈接地址；
<navigator class="navigator" redirect url="../login/index" >登錄頁</navigator>
在小程序開發(fā)工具里枫攀，默認(rèn)打開新頁面括饶，工具左上角有返回按鈕。加上redirect来涨，當(dāng)前頁打開图焰，不出現(xiàn)返回按鈕。
7蹦掐、image
小程序的image與HTML5的img最大的區(qū)別在于：小程序的image是按照background-image來實(shí)現(xiàn)的技羔。 默認(rèn)image的高寬是320*240。必須通過樣式定義去覆蓋這個(gè)默認(rèn)高寬卧抗，auto在這里不生效藤滥。
（開發(fā)者說這樣設(shè)置的原因是：如果設(shè)置 auto ，頁面布局會(huì)因?yàn)閳D片加載的過程有一個(gè)閃的現(xiàn)象（例如高度從 0 到 height ）社裆，所以要求一定要設(shè)置一個(gè)寬度和高度拙绊。）
最新的api支持獲取圖片的高寬。不過這里返回的高寬是px單位泳秀，不支持屏幕自適應(yīng)标沪；
圖片包括三種縮放模式scaleToFill、aspectFit嗜傅、aspectFill和9種裁剪模式金句，三種縮放模式的實(shí)現(xiàn)原理對應(yīng)如下：
scaleToFill{
background-size:100% 100%;//不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
}
aspectFit{
background-size:contain;//保持縱橫比縮放圖片吕嘀，使圖片的長邊能完全顯示出來违寞。也就是說贞瞒，可以完整地將圖片顯示出來。
}
aspectFill{
background-size:cover;//保持縱橫比縮放圖片坞靶，只保證圖片的短邊能完全顯示出來憔狞。也就是說蝴悉，圖片通常只在水平或垂直方向是完整的彰阴，另一個(gè)方向?qū)?huì)發(fā)生截取。
}
8拍冠、button
額外補(bǔ)充下button的實(shí)現(xiàn)方式尿这，button的邊框是用:after方式實(shí)現(xiàn)的，用戶如果在button上定義邊框會(huì)出現(xiàn)兩條線庆杜，需用:after的方式去覆蓋默認(rèn)值射众。不過這個(gè)應(yīng)該會(huì)在最近的開發(fā)者工具中修復(fù)。
button::after {
content:" ";
width:200%;
height:200%;
border:1px solid rgba(0, 0, 0, 0.2);
}
小程序不支持button:active這種樣式的寫法晃财，button的點(diǎn)擊態(tài)通過.button-hover{}的樣式覆蓋叨橱，也可修改hover-class為自定義的樣式名。
9断盛、css3動(dòng)畫
最新版的開發(fā)工具已經(jīng)支持transition和keyframes動(dòng)畫罗洗，不用js苦哈哈的寫動(dòng)畫隊(duì)列了。
除了官方公布的小程序的組件之外钢猛，有一些標(biāo)簽比如伙菜，span、em命迈、strong贩绕、b也是支持的，只是官方并不推薦使用壶愤。
瀏覽器內(nèi)核
在iOS平臺(tái)上淑倾，微信的瀏覽器渲染內(nèi)核是wkwebview；
而在Android平臺(tái)上征椒，微信則采用了騰訊QQ瀏覽器2016年4月份發(fā)布的X5內(nèi)核（blink內(nèi)核）作為渲染引擎娇哆。
在小程序的開發(fā)工具上，小程序的JavaScript是運(yùn)行在chrome內(nèi)核（nwjs）中陕靠。
autoprefixer
小程序會(huì)在接下來的版本中加入自動(dòng)補(bǔ)全css前綴迂尝，使用的插件是postcss的autoprefixer，設(shè)置的兼容級(jí)別是> ios 8及> android 4.1剪芥。
const browserOptions = {
browsers: [
'last 3 versions',
'ios >= 8',
'android >= 4.1',
]
}
也就是說垄开，我們在寫css的時(shí)候只需要寫沒有前綴的寫法。比如：display:flex税肪，工具自動(dòng)編譯為display:flex;display:-webkit-flex溉躲。
OM小程序?qū)崙?zhàn)
上圖為OM小程序的開發(fā)界面榜田。下面我們從布局、智能裁圖和loading動(dòng)畫幾個(gè)方面簡單說下OM小程序具體的UI開發(fā)經(jīng)驗(yàn)锻梳。
1箭券、flex布局
以上圖om的文章列表為例，文章的形態(tài)包括純文字的和圖文混合的疑枯。圖文混合的文字不管是1行還是2行都需要相對于圖片縱向居中辩块。用flex的布局，就可以實(shí)現(xiàn)這3種狀態(tài)不修改CSS文件荆永，只按需隱藏DOM結(jié)構(gòu)就搞定废亭。
.media {
display: flex;
justify-content:center;//設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items:center;//定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對齊方式具钥。
}
.media .content {
flex: 1;
}
在做傳統(tǒng)H5的時(shí)候豆村，為了兼容各種低端設(shè)備的機(jī)型，通常不太敢輕易嘗試flex骂删，但在小程序里就可以大膽的使用了掌动。
2、智能裁圖
正是由于小程序把圖片處理成背景圖片宁玫，OM的素材管理頁面圖片的實(shí)現(xiàn)方式在這里遇到了一個(gè)挑戰(zhàn)粗恢。 簡單列舉下om各種不同尺寸圖片在平臺(tái)上的展示方案。
1撬统、高<50px：
（1）寬<175px适滓，原圖居中顯示；
（2）寬>175px恋追，定寬等比上下居中顯示凭迹；2、50px<高<400px：
（1）寬<175px苦囱，原圖居中顯示嗅绸；
（2）寬>175px，定寬等比顯示撕彤；3鱼鸠、高>400px：
（1）寬<175px，原圖居中顯示羹铅、超出400px高度隱藏蚀狰；
（2）寬>175px，定寬等比顯示职员、超出400px高度隱藏麻蹋；
這種方案，用css和img實(shí)現(xiàn)起來焊切，只需要設(shè)置外層盒子最大高寬扮授，圖片自適應(yīng)縮放即可芳室。
.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;
}
然而因?yàn)樾〕绦蚶锸怯帽尘皥D片的方式，簡單的css設(shè)置并不能實(shí)現(xiàn)智能裁圖的方案刹勃。需要配合js計(jì)算出不同尺寸圖片對應(yīng)的適配尺寸堪侯。
.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;
}
這里需要后臺(tái)接口提供數(shù)據(jù)列表的圖片高寬，js對拿到圖片的不同尺寸進(jìn)行算法計(jì)算荔仁，重新賦值再返回給數(shù)據(jù)伍宦。
3、css3動(dòng)畫改變默認(rèn)loading
小程序默認(rèn)提供的loading是普通的菊花loading咕晋，這里OM使用自定義的keyframes序列幀動(dòng)畫雹拄。
.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;
}
}
本文引用：https://zhuanlan.zhihu.com/p/23536784收奔，之后在實(shí)際開發(fā)中會(huì)添加更過實(shí)用性東西
