深刻Weex系列（二）之列表頁實戰

一、前言

先入門後實戰，本篇文章從0開始一步步實戰出一個列表頁，趟坑之路正式起航！

先來看下咱們要實現的界面吧。

二、過程

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的控制等），和原生的流程相似。以後這個界面基本上就算完成了。

三、升級版

若是本文到此就貼源碼結束，就顯得有點水了，不像個人風格。誠然此入門篇實戰對照着官方文檔、官方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可是差別並不大（左側的起始點比後側靠下）。

四、總結

• 本文是對Weex實戰的一個試水，涉及通用列表的完成：佈局、網絡請求、下拉刷新等；
• 從實戰感覺來看，Weex確實易於上手；
• 文檔不是十分詳細，須要對照官方Demo乃至Issue、Google等；

一個問題：你們有沒有以爲Weex和咱們本身的下拉刷新結合的怎麼就這麼容易，簡直不像本身平時寫代碼的感覺！其實確實沒有那麼容易，Weex和咱們的下拉刷新控件直接結合使用是有事件衝突的，那麼下一篇文章咱們就來一塊兒看看如何解決Weex與項目裏下拉刷新的衝突！

源碼地址：github.com/liuzhao2007…

歡迎關注微信公衆號：按期分享Java、Android乾貨！