Didn’t expect it, right? This pigeon remembered its blog!

Summer vacation has arrived, and it feels like time is as free as money, losing the sense of time 233.

I really have nothing to write about, so I’ll just casually talk about what I’ve been doing these past two days.

Yesterday, I started writing a third-party Zhihu Daily client.

Because I was too bored, I just decided to mess around. I used this API.

Let me briefly talk about the problems I encountered before and the development process.

Architecture

I used MVP, which stands for Model, View, Presenter.

It feels a bit troublesome, and I actually regret it a bit now; it’s too boring to write.

At first, of course, I was frantically writing interfaces and creating Activities.

Then it was just using other people’s wheels like crazy.

Global Exception Handling

I wrote a global exception handler that implements the Thread.UncaughtExceptionHandler interface.

Then I set up my Application and removed the default ExceptionHandler in MyApplication!

In the uncaughtException method, I wrote the code to handle exceptions, and I can’t use AlertDialog here!!!

I directly jumped to a dedicated ExceptionActivity to handle it, which improves the user experience (though it’s actually not very useful).

But, but, but, but!!!

I don’t know why the printStackTrace method of Throwable is ineffective in uncaughtException; I didn’t delve into it and I’m too lazy to care.

JSON Parsing

It’s nothing special, just JSONObject, JSONArray; I’m too lazy to use other people’s wheels 233.

The app needs to load images, and I didn’t consider Glide; I used the OkHttp framework, and Picasso also uses OkHttp. Moreover, Picasso is lighter, and in some cases, I personally feel that Picasso is easier to use than Glide.

Image Width Too Wide

The images in this WebView exceed the screen width. I searched online for “WebView image adaptive.”

I found a method, which is to load JavaScript; this might be a common method but it works.

With my level of skill, I can only do it this way QAQ.

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 Display

I recommend a tool for organizing JSON: http://www.bejson.com/.

In the article interface, it returns HTML code, which is the article content, for example:

The HTML is a bit long, so I won't include it.

Emmmmmm, you get what I mean; many content-type projects use HTML syntax instead of Markdown.

Here I encountered a pitfall. At first, I thought I just needed to display HTML using TextView.

But the actual result was quite unsatisfactory; the image display effect was poor, and the images were too small.

This is a serious problem.

I started to doubt life…

I thought of using WebView to load it, but I was afraid it would be a wasted effort, so I analyzed the official Zhihu Daily.

It seems that they indeed use WebView; here’s the returned JSON:

{
      body: "<div class="main-wrap content-wrap">...</div>",
      image_source: "Yestone.com Copyright Image Library",
      title: "Midnight Surprise · Moments Illusion",
      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": "Midnight Surprise"
      },
      type: 0,
      id: 4772126,
      css: [
          "http://news.at.zhihu.com/css/news_qa.auto.css?v=1edab"
      ]
  }

You can see there’s a css entry. The display effect of the official Zhihu Daily is different from the webpage.

It seems that this CSS is loaded; I thought there was some other high technology!

After all, efficiency is the priority, and there are benefits to doing it this way.

We just need to make some modifications to the text property of the JavaBean in the Model layer.

After loading the CSS, I found that the whole world was different.

(In fact, after loading the CSS, I found that the CSS provided by Zhihu Daily doesn’t even need to consider the width of the img tag; it automatically handles it QAQ.)

(And loading the CSS also leaves space for the official Zhihu Daily app.)

One can easily see the collaboration between the Android client and the web developers, which is quite common (though it could also be a full-stack engineer).

Tips: If WebView

But I haven’t experienced this kind of collaboration yet; I’m crying.

Now I’ve completed simple loading and viewing.

I’ve only finished about one-sixth, or even less (crying).

1

2

3

4

2020 Update

Basically completed; mainly finished the pagination loading. Feel free to check out the messy code: GitHub (https://github.com/HelloLingC/zhihu-daily-open).