android h5混合开发（二）

6.界面设计: 
由于表达能力有限,所以我只谈谈设计中的几个要点,具体的细节就请看代码吧. 
我们将手机的模式调整为 显示布局边界 ,那么我们就尅比较清晰的得到网易新闻客户端的布局,事实上,通过显示控件布局我们就可以判断一个应用到底是原生还是HTML5的. 
网易新闻客户端 布局 

仿网易新闻客户端 

有了布局,但是我们并不能急于开工,因为市面上的手机屏幕和分辨率太多了,如果不能解决屏幕的适配性问题,那么为什么就需要使用Html5来开发吗,原生岂不是更好. 
解决屏幕适配性一般有两张解决方案,一种是响应式布局,二是flex布局.我并不推荐在手机上进行响应式布局,因为响应式布局会需要判断屏幕宽度,不同的屏幕尺寸和不同的分辨率搭配起来这个取舍并不容易,而且如果适配的多了,代码就很冗余,少了可能效果并不理想.我推荐flex布局,flex布局顾名思义,是弹性的,类似Android中的LinearLayout的layout_weight属性,我们可以将剩余空间按比例分配从而避免出现讨厌的留白. 
虽然我们采用了flex布局,但是到具体的组件的时候,我们还是必须知道它具体的尺寸,但是很显然我们并不能把他写死,所以rem就派上用场了.rem是CSS3引进的,它是相对于根元素(即html元素)font-size计算值的倍数,也就是说如果html的font-size是16px,那么1rem就是16px,但是这样还是写死了对吧,所以我们需要手动赋值,参考这篇文章(使用Flexible实现手淘H5页面的终端适配 : http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html),所以我们在计算时,将1rem设置为屏幕宽度的十分之一.

function Rem() {
   var w = window.innerWidth / 10;      //一般使用10倍
   var html = document.querySelector('html');
   html.style.fontSize = w + "px";
}
window.onresize = Rem();
   
   
1
2
3
4
5
6
   
   
1
2
3
4
5
6

这段代码应该放在其他用到长度高度的前面,不然有可能造成bug,之前我就被坑过.当然,你也可以使用上篇文章中提供的flexible.js,不过它的计算在宽度超出一点范围后,1rem并不是宽度的十分之一,所以使用时需要注意,然而我们只是做一个演示,而且网易新闻客户端在我的黑莓priv 2k屏上,其栏目的宽高比例并没有发生变化而使用flexible.js时其宽高已经发生变化了,所以姑且先这样吧. 
这个是使用flexible.js,黑莓上运行的结果: 

我这里每个li都是2rem多,显然是不可能出现五个li在一行的.

轮播图采用一个开源库 swiper.js ,官网上的例子很详细,在具体的应用中,我们应该注意下:轮播图中的文字应该和图片相对应,这里可以通过回调函数中的参数 swiper.activeIndex 来判断. 
类似listview我们可以采用iscroll库来进行模拟下拉刷新.但是在初始化前先要确保其长度高度已经确定,否则会失败.所以我们可以在加载完数据之后再初始化.

7.数据加载: 
之前我们找到的api得到是一个网页而不是json文件,所以我采取了各种跨域方案,最终证明是徒劳的.一般情况下,用后台服务器转一下就可以,可这样还需要我维护,可是我并没有动力去维护,所以极有可能你们下载代码进行尝试时,结果发现无法获取数据,就坑了,所以我把这个过程放在android本地.

    public String getUrlResponseData(String urlString){
        HttpURLConnection conn = null;
        InputStream is = null;
        String resultData = "";

        try{
            URL url = new URL(urlString);
            conn = (HttpURLConnection) url.openConnection();
            conn.setDoInput(true); //允许输入流，即允许下载
            conn.setDoOutput(true); //允许输出流，即允许上传
            conn.setUseCaches(false); //不使用缓冲
            conn.setRequestMethod("GET"); //使用get请求
            is = conn.getInputStream();
            InputStreamReader isr = new InputStreamReader(is);
            BufferedReader bufferReader = new BufferedReader(isr);
            String inputLine  = "";
            while((inputLine = bufferReader.readLine()) != null){
                resultData += inputLine + "\n";
            }

        }catch (Exception e){
            e.printStackTrace();
        }finally {
            if(is != null){
                try {
                    is.close();
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
            if(conn != null){
                conn.disconnect();
            }
        }
        return resultData;
    }
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

由于之前我们得到的api可以一次性获取最多140个新闻条目,但是并不支持获取指定位置的新闻条目,所以为了方便,我就一次性把所有的条目下载下来了,但是每次加载只加载20个,每次需要更多的时候,需要下拉刷新再加载.这本来需要ajax来请求的,但是受限于api,所以这么做了.

数据加载是有一定讲究的,那就是在知道客户的意图后要尽可能的早去请求网络数据.由于我们做的是首页,所以只要打开客户端就必然会加载新闻的,所以我们可以把加载时间放在页面载入阶段就去请求.

图片的异步加载,或者只有wifi下才能加载图,我们可以这么做:我们的程序有一个本地图片就是加载不了数据时填充占位的,我们在即使有数据的情况下先将src的路径指向它,然后将远程图片的路径作为它的属性,然后判断图片是否在可视的范围内,如果在,这将属性值放入src中,就可以加载.wifi其实也比较容易,就是在android原生中拿到当前网络的类型,把值发给html,然后html判断即可.

第一页其实还有很多可以做的,比如缓存最近的新闻等.这些我就不想做了.

下面是我仿的客户端的图,细节还有瑕疵,没有太多时间细扣,而且细扣也没有太大意义.同时,也没有加什么错误处理,所以测试时请务必确保网络连接通畅,否则可能会出错,如果出错,那么就只有您慢慢调了. 

最后附上代码: 
源码下载