微信小程序一些要點

[color=rgb(153, 153, 153) !important][size=0.18]本文由廣研微信小程序的開發團隊所作，做者爲UI開發工程師王婷婷。本文從UI開發的角度，結合OM小程序的案例，剖析小程序的組件用法與傳統HTML5標籤的區別。css

小程序與傳統HTML5的區別
android

小程序剛開放公測，互聯網圈內開始了各類解讀和猜想。其中有觀點認爲小程序和HTML5有着緊密關聯，甚至小程序就是基於HTML5開發。
通過仔細研究文檔和代碼開發，從視圖層的角度來講，小程序與傳統HTML5仍是有明顯的區別，主要區別在於：ios

[size=0.18]開發工具不一樣。
區別於H5的開發工具+瀏覽器Device Mode預覽的模式，小程序的開發基於本身的開發者工具，能夠實現同步本地文件+開發調試+編譯+預覽+上傳+發佈等一整套流程。css3
[size=0.18]開發語言不一樣。
小程序本身開發了一套WXML標籤語言和WXSS樣式語言，並不是直接使用標準的HTML5+CSS3。git
[size=0.18]組件封裝不一樣。
小程序獨立出來了不少原生APP的組件，在HTML5須要模擬才能實現的功能，小程序裏能夠直接調用組件。web

小程序開發者工具

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

[size=0.18]傳統HTML5在加載的時候受限於網絡環境，須要順序加載HTML、CSS、JS，而後返回數據，最後渲染頁面顯示在瀏覽器中。用戶常常須要等待很長時間，體驗會受到影響。chrome
[size=0.18] 相比之下，小程序的兩個線程：Appservice Thread和View Thread會同時進行、並行加載，甚至Appservice Thread會更早執行，當視圖線程加載完，通知Appservice，Appservice 會把準備好的數據用setData的方法返回給視圖線程。小程序

小程序的這種優化策略，能夠減小用戶的等待時間、加快小程序的響應速度。微信小程序

WXML

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

這裏須要注意的是：
全部組件與屬性都是小寫，以連字符-鏈接。

二、文件引入
WXML提供兩種文件引入方式，import和include。區別在於：import能夠引入定義好的template模板，模板是有做用域的；而include就是拷貝一個公用的代碼片斷到目標文件中，適合作公共頁面片的拆分。

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

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

文件引入在小程序作模塊化拆分的過程當中很是重要。

WXSS

一、尺寸單位
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裏也會根據屏幕自適應。

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

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

三、選擇器
小程序支持的選擇器在官方公佈的文檔中包括.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和小程序的組件標籤的區別；

下面一一來分析下：

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

二、text
除了text文本節點之外的其餘節點都沒法長按選中。。
截止到0.10.102800的開發者工具text支持嵌套text，不過有class的text會被面板過濾，樣式不影響。

三、 icon
icon能夠直接用微信組件默認的圖標，默認是iconfont格式的，從WeUI那邊沿襲過來的一種作法。
自定義的icon推薦svg sprite格式或者iconfont。
目前來看，市面上尚未很好的自動合併單個svg爲svg sprite的工具，須要手動拼圖。

四、input
input 的類型，有效值：text, number, idcard, digit, time, date 。
input不須要設置line-height或padding來縱向居中，默認placeholder的文字是居中的。
小程序把checkbox和radio都單獨作成了組件，默認的input只支持輸入文本。
上傳文件在小程序裏須要調用chooseImage事件完成；

小程序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;
}

<input type="text" placeholder="郵箱" placeholder-style="color:#c0c0c0" />
<input password type="number" placeholder="密碼" placeholder-class="placeholder" />

五、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>

<picker bindchange="bindPickerChange" value="{{index}}" range="{{area}}">
<view class="picker">
{{area[index]}}
</view>
</picker>
Page({
data: {
area: ['中國', '美國', '巴西', '日本'],
}
})

六、 navigator
navigator支持相對路徑和絕對路徑的跳轉，默認是打開新頁面，當前頁面打開須要加redirect；
navigator僅支持5級頁面的跳轉；
navigator不可跳轉到小程序外的連接地址；

在小程序開發工具裏，默認打開新頁面，工具左上角有返回按鈕。加上redirect，當前頁打開，不出現返回按鈕。

七、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;//保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來。也就是說，圖片一般只在水平或垂直方向是完整的，另外一個方向將會發生截取。
}

八、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爲自定義的樣式名。

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

除了官方公佈的小程序的組件以外，有一些標籤好比，span、em、strong、b也是支持的，只是官方並不推薦使用。

瀏覽器內核

[size=0.18]在iOS平臺上，微信的瀏覽器渲染內核是wkwebview；
[size=0.18]而在Android平臺上，微信則採用了騰訊QQ瀏覽器2016年4月份發佈的X5內核（blink內核）做爲渲染引擎。
[size=0.18]在小程序的開發工具上，小程序的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開發經驗。
一、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，但在小程序裏就能夠大膽的使用了。

二、智能裁圖
正是因爲小程序把圖片處理成背景圖片，OM的素材管理頁面圖片的實現方式在這裏遇到了一個挑戰。
簡單列舉下om各類不一樣尺寸圖片在平臺上的展現方案。

[color=rgb(153, 153, 153) !important][size=0.18]一、高<50px：
（1）寬<175px，原圖居中顯示；
（2）寬>175px，定寬等比上下居中顯示；
二、50px<高<400px：
（1）寬<175px，原圖居中顯示；
（2）寬>175px，定寬等比顯示；
三、高>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對拿到圖片的不一樣尺寸進行算法計算，從新賦值再返回給數據。

三、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;
}
}

寫在最後

[size=0.18]微信小程序集成了不少原生APP的組件，從體驗和頁面流暢度來講，都會比HTML5要優秀不少。
[size=0.18]微信小程序相對於HTML5開發來講，除了熟悉API須要學習成本以外，開發難度指數3顆星，仍是很容易上手的。
[size=0.18]開發者工具、組件和API目前剛剛對外公測，還不算太成熟，裏面還有不少坑須要開發者去填。

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

微信小程序 一些要點

微信小程序,weixin,關於微信小程序，那些開發文檔沒有告訴你的-微信小程序開發資源-微信開發者平臺，微信開發者社區，微信小程序開發者社區

微信小程序一些要點