1、前言
先入門後實戰，本篇文章從0開始一步步實戰出一個列表頁，趟坑之路正式起航！
先來看下我們要實現的介面吧。
2、過程
2.1 初始化
各位老司機肯定熟悉，先Compile；
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.11.0'
複製程式碼然後在應用Application中初始化；
InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();// 自己實現的圖片載入的Adapter擴充套件；
WXSDKEngine.initialize(this,config);
複製程式碼2.2 Weex程式碼編寫
2.2.1 分析
首先我們來分析寫這個介面，列出幾個關鍵詞：列表、Header、下拉重新整理、上拉載入；如果使用Android原生開發的話我們會使用到列表元件、然後下拉重新整理和上拉載入使用自定義控制元件的方式實現。
那麼同理，我們先來找下Weex中的列表元件，在手冊——》內建元件中發現——》list，是不是想起了Android原生的listview或者是recycleview。而list元件中也提供了條目型別的支援（cell）、header、下拉重新整理（refresh）、上拉載入（loading）。
2.2.2 拆解
對整體佈局進行拆解：
- 頂部的搜尋條：需要吸附在頂部，那就使用header來做；
- 紅色的頂部一欄和正常的列表項明顯不一樣，那就使用不同的cell來做；
- 下拉重新整理和上拉載入使用list元件提供的refresh和loading來做；
整體佈局拆分完了那我們就開始寫具體的佈局了，常用控制元件元件的使用參考內建元件，而佈局規則可以參考通用樣式；
2.2.3 佈局
經過一陣子的編寫，我們已經開發出了初步的介面，程式碼此處不貼。最主要的是List元件，裡面包含一個header、兩個不同的cell、一個refresh、一個loading；
2.2.4 資料
使用介面資料毋庸置疑需要使用到網路元件，我們來看下stream元件；首先進行宣告
var stream = weex.requireModule('stream')
複製程式碼然後參考其文件上的Demo，不過可惜的是文件上的Demo只有Get請求，而我們使用到的介面需要使用Post：
- 那我們就去其Demo中去找stream-demo；
- 而這個介面需要使用http Header中的引數作為呼叫的依據，可惜的是stream-demo中也沒有，只有靠Google加上猜測、實驗；（實際上隨著對Weex理解的逐漸深入，我們可以從它的原始碼中找到答案）
下面貼出一個加Header的Post請求：
stream.fetch({
method: 'POST',
type: 'json',
url: url,
headers: {
'deviceid': '',
'uid': ''
},
body: data
}, function(res) {}
複製程式碼2.2.5 呼叫時機
網路請求的方法寫好之後，我們開始呼叫；有幾個呼叫的時機：
- 初次進入介面；
- 下拉重新整理；
- 上拉載入；
這點和原生的介面呼叫時機是一樣的。
2.2.6 其它
加上各種狀態（下拉重新整理、上拉載入等的顯示隱藏與page的控制等），和原生的流程類似。之後這個介面基本上就算完成了。
3、升級版
如果本文到此就貼原始碼結束，就顯得有點水了，不像我的風格。誠然此入門篇實戰對照著官方文件、官方Demo、專案Issue等也可以寫出，既然挑戰性不是那麼強，那我們就自己加點料：一般專案都會有自己的通用下拉重新整理控制元件來實現一樣的效果，上面我們實現的下拉重新整理是Weex自帶的，如何換成我們自己的下拉重新整理呢？
3.1 思考
我們專案中使用的下拉重新整理庫是ultra-ptr，通用性強而且可以自定義Header效果。這個Weex介面要想用ultra-ptr實現的下拉重新整理那就要將二者結合起來；
3.2 方案
- 使用Weex的自定義元件，將ultra-ptr進行包裝，然後配置成Weex可用的元件；
- 將Weex生成的View加到ultra-ptr中，這樣二者也結合起來了；
3.3 方案實戰
本文中我們選擇第二種方案：將Weex生成的View加到ultra-ptr中作為其Content，來實現下拉重新整理的效果。
備註：為什麼不選第一種呢？因為第一種我們下篇文章講。
這樣就需要我們在Activity中也設定一個包含下拉重新整理的佈局，然後在Weex介面重新整理出來的時候將其加到下拉重新整理的控制元件裡，這樣Weex介面就和我們應用自身的下拉重新整理介面結合到了一起，下拉重新整理的風格自然和原來的應用保持一致。
來看下最終實現的效果：
3.4 對比
使用Android和Weex開發的首頁的一個對比：第一張是Android，第二張是Weex；
對比線條的高度可以看出，Android開發效能優於Weex但是差異並不大（左側的起始點比後側靠下）。
4、總結
- 本文是對Weex實戰的一個試水，涉及通用列表的完成：佈局、網路請求、下拉重新整理等；
- 從實戰感受來看，Weex確實易於上手；
- 文件不是十分詳細，需要對照官方Demo乃至Issue、Google等；
一個問題：大家有沒有覺得Weex和我們自己的下拉重新整理結合的怎麼就這麼容易，簡直不像自己平時寫程式碼的感受！其實確實沒有那麼容易，Weex和我們的下拉重新整理控制元件直接結合使用是有事件衝突的，那麼下一篇文章我們就來一起看看如何解決Weex與專案裡下拉重新整理的衝突！
原始碼地址：github.com/liuzhao2007…
歡迎關注微信公眾號：定期分享Java、Android乾貨！
