作為一名頁面重構，在剛開始接觸weex頁面開發的時候或多或少會遇到，很多感覺莫名其妙的問題，現在把最近做weex頁面的想法和心得分享一下，也可以作為一個快速的入門講解。
單位
weex的預設單位是:PX，我們先看一下官方的說法：In order to simplify the page design and the complete underlying implementation, the width of our default screen is unified to 750 pixels, different screens should be scaled with corresponding ratio.谷歌翻譯一下就是：為了簡化頁面設計和完整的底層實現，我們預設的螢幕寬度統一為750畫素，不同的螢幕應該按照相應的比例進行縮放。其實可以籠統的說weex預設就是750寬度，不管你是多大的螢幕它都給你按照750來換算，px是佔比，px=dpi。wx單位：類似於鎖定結構大小的單位，不隨著螢幕解析度的變化而變化。
樣式
weex中的樣式不支援簡寫所有類似margin: 0 0 5px 3px都是不支援的，是為了提高解析效率。
- weex 中只支援單個類名選擇器，不支援關係選擇器，也不支援屬性選擇器。
- 不支援行內塊級元素，預設塊級元素，但是支援flexbox佈局。
- 僅支援border-box。
- 當前版本（V0.17）支援簡單的transform（2D）樣式。
- 安卓的view是有白色的預設顏色的, 而iOS如果不設定是沒有預設顏色的, 這點需要注意。
- scroll元件是有個預設顏色的，如果要設定新的顏色最好是通過在元件內部進行央視控制來新增顏色。
- 不支援display:hidden;可以在整個功能模組的父級新增v-if="false"來實現消失效果。
- 注意安卓預設overflow:hidden且不可改，因此使用絕對定位的時候注意不要超過父級。
文字（text元件）
text元件只能包含文字，不能包含其他節點。
- 注意要給text元件設定font-size,對於預設值ios和h5都是32，而安卓回根據裝置的不同而變化。
- 超出省略號需要 lines: 行數;搭配text-overflow: ellipsis;來使用，注意要讓weex知道你的text元件是有寬度的，例如你至少要給它width或者flex:1;讓weex可以計算出它的寬度，不然就沒有用。
如果是遇到這種中途要變色的文字，處理起來，不同的樣式的文字就要使用不同的text元件搭配樣式處理，這時候要注意的是文字是否會超出換行，如果把text設定成彈性盒子，那麼text元件之間的換行就會在自己當前的模組直接就換行了，不會展現行內塊級元素的狀態。
圖片（image元件）
image元件只能包含文字，不能包含其他節點。
- 需要明確width和height，否則圖片無法顯示。
- 因為不支援background-image，所以要實現背景圖效果的時候把image放在文件流的上方，絕對定位，因為weex的dom權重跟隨文件流來，所以後面的結構就會覆蓋在上面以此來實現背景圖。
頁面滑動（scroller元件）
當頁面需要滑動的時候就需要這個元件的幫助。
- 大多數頁面都會超出一屏需要滾動，因此建議把scroller當做根節點。
- 對於一些簡單的頁面或者頁面長度不會過長的頁面建議用scroller，如果頁面複雜的話建議使用 list元件。
頁面滑動（list元件）
擁有平滑的滾動和高效的記憶體管理，非常適合用於長列表的展示。
- 子元件有header，cell，refresh和loading，weex會對cell進行高效的記憶體回收以達到更好的效能，所以這就是為什麼上面說如果頁面複雜的話建議使用 list元件的原因。
- list裡面只能包含上訴4個子元件，如果插入別的元件則不能被正確的渲染。
定位（absolute與fixed）
關於彈層一般我們都會用絕對定位來展示。
- 經過與前端一段時間的磨合，決定使用absolute來定位彈層，因為經過幾個業務的實踐總結出來，fixed的權重過於高，對於業務複雜和彈層過多的業務中，彈層的顯示層級不好控制導致互動完成度不高。因此對於彈層，推薦使用absolute。
本文主要是開發過程中對於官方文件的補充，如有錯誤請多多指教。
附上官方文件連結：weex文件
附上官方文件連結：weex文件
我的個人部落格：http://zengjinchao.com/wordpress/