知乎日报的坑

没想到吧!本鸽子想起自己的博客啦!

暑假到了,感觉时间跟不要钱一样,没有了时间概念了233

我实在没啥可写的,就随便说说这两天干了啥吧

昨天我开始写一个第三方的知乎日报客户端

因为太无聊了,就随便搞搞吧。用的是这个API

简单说一下之前遇到的问题吧,以及开发的过程

架构

用的是MVP,也就是Model, View, Presenter

感觉有点麻烦,其实现在有点后悔了,写起来太无聊啦

最开始当然是疯狂写写写写接口,创建Activity

后面则是疯狂用用用用别人的轮子

全局异常处理

自己写了个全局异常处理实现Thread.UncaughtExceptionHandler这个接口。

然后再把自己的Application搞上去,在MyApplication中把默认的ExceptionHandler给搞下去!

在uncaughtException方法中写入处理异常的代码,这里是不能使用AlertDialog的!!!

我是直接跳转到专门的ExceptionActivity处理,这样用户体验就更棒了(其实没啥用)

但但但但但是!!!

不知道为啥在uncaughtException中Throwable的printStackTrace方法失效了,我也没有深究,也懒得管啦

JSON解析

没啥意思,就那样JSONOBJECT, JSONARRAY,懒得用别人的轮子233

应用中需要加载图片,我并没有考虑Glide,我使用了OkHttp框架,而Picasso也用到了OkHttp,况且Picasso更轻量,在某种情况下个人感觉Picasso比Glide更好用

图片宽度太宽啦

这个Webview的图片超过了屏幕的宽度,我在网上查了一下 WenView 图片自适应

找到了一个方法,就是加载JavaScript,这可能是一个本方法但管用

像我这种五线水平,也就只能这样惹QAQ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String javascript = "javascript:function ResizeImages() {" +
"var myimg,oldwidth;" +
"var maxwidth = document.body.clientWidth;" +
"for(i=0;i <document.images.length;i++){" +
"myimg = document.images[i];" +
"if(myimg.width > maxwidth){" +
"oldwidth = myimg.width;" +
"myimg.width = maxwidth;" +
"}" +
"}" +
"}";
view.loadUrl(javascript);
view.loadUrl("javascript:ResizeImages();");
}
});

Html显示

推荐一个整理json的工具:http://www.bejson.com/

在文章接口中,它会返回一个html代码,也就是文章内容,例如

1
html有点长,不放了

Emmmmmm,你懂我意思就行了,很多这种内容型项目的语法都是用html的,而不是markdown

这里我遇到了一个坑,最开始我以为只需要用TextView显示html就行了

但实际结果很不尽人意,图片显示的效果很差,图片都太小了

这是一个很严重的问题

我开始怀疑人生…

想到用Webview加载,但是害怕竹篮打水一场空,就分析了一下官方的知乎日报

似乎的确是使用WebView的,这是返回的json

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
{
body: "<div class="main-wrap content-wrap">...</div>",
image_source: "Yestone.com 版权图片库",
title: "深夜惊奇 · 朋友圈错觉",
image: "http://pic3.zhimg.com/2d41a1d1ebf37fb699795e78db76b5c2.jpg",
share_url: "http://daily.zhihu.com/story/4772126",
js: [ ],
recommenders": [
{ "avatar": "http://pic2.zhimg.com/fcb7039c1_m.jpg" },
{ "avatar": "http://pic1.zhimg.com/29191527c_m.jpg" },
{ "avatar": "http://pic4.zhimg.com/e6637a38d22475432c76e6c9e46336fb_m.jpg" },
{ "avatar": "http://pic1.zhimg.com/bd751e76463e94aa10c7ed2529738314_m.jpg" },
{ "avatar": "http://pic1.zhimg.com/4766e0648_m.jpg" }
],
ga_prefix: "050615",
section": {
"thumbnail": "http://pic4.zhimg.com/6a1ddebda9e8899811c4c169b92c35b3.jpg",
"id": 1,
"name": "深夜惊奇"
},
type: 0,
id: 4772126,
css: [
"http://news.at.zhihu.com/css/news_qa.auto.css?v=1edab"
]
}

可以看到有一条 css,官方的知乎日报显示的效果,与网页不同

看来就是加载了这个css吧,我还以为有什么其他高科技呢!

毕竟效率第一嘛,这样做的好处也是有的

我们只需要在 Model 层中对 javabean 的正文属性做一些修改就可以了

最后加载css后发现整个世界都不一样了

(事实上最后加载css后发现,知乎日报提供的css根本就不用考虑 img 标签的宽度太大,人家自懂帮忙处理好的 QAQ)

(而且加载css还会给官方的知乎日报app留白)

这其中不难发现 Android客户端 与负责 Web 的开发人员之间的合作,这很常见(当然也可能是一位全栈工程师吧)

Tips: 如果WebView

但我还没感受过这种合作呢,哭惹

现在完成了简单的加载和查看

只做完了六分之一吧,甚至更少(哭哭)

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×