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自带的，如何换成我们自己的下拉刷新呢？