深刻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干货！