NetEase News Client iOS version in the News Details page (uiwebview) analysis and discussion of the implementation of the technology

background of this blog post:
1: I am a loyal user of NetEase news app, about 2-3 hours of usage time per day.
2: In such a frequent and long-time use of the process, almost no experience of the flash back.
Have to admire others to optimize the effect of good, also have to sigh with the gap between their own and Daniel Big. (not advertised.) Is true love. ）
3: Always feel that the details page of NetEase News app is doing particularly well. Some time ago, see online a lot of people said that the details of NetEase News page is Coretext (Rich text) to achieve. Feel very funny, just a copy of the function of the text, Coretext will not be able to achieve, can eliminate the possibility of coretext.
However, these erroneous remarks in the online residual spread, poisoning the novice, here I hope you notice that the information on the Internet is needed to identify and know, think and then take. Don't blindly believe. In fact, the news detail page is clearly implemented through UIWebView.
4: Based on the above three points, decided to write a blog analysis.
5: This article declined reprint, if reproduced, please specify the source address:
http://386502324.blog.163.com/blog/static/11346937720154293438399/

Technical Implementation Analysis
One: interface analysis
The following is the interface I crawl NetEase news, if someone wants to catch it, recommend using Charles or PAROS (how to use, self-Baidu)
1: Full text sample interface
Http://c.3g.163.com/nc/article/AQ76LHPS00963VRO/full.html
2: Graphic mix, easy moment (typically contains a large number of diagrams containing dynamic diagram).
Http://c.3g.163.com/nc/article/AQ4RPLHG00964LQ9/full.html
3: Contains Atlas (NBA) (actually only one picture)
Http://c.3g.163.com/nc/article/AQ72N9QG00051CA1/full.html

Conclusion: The interface returned by the Detail page is a JSON string. This eliminates the case where webview directly loads the URL.

Two: data+ template generates HTML
With interface analysis, we ruled out the possibility of webview directly loading URLs. How is that possible? The answer is to load the local HTML.

By processing the received JSON data + local HTML template, generate HTML strings that can be displayed and content, and then WebView loaded.
Here, we recommend a third-party open source HTML template project Mgtemplateengine：
Https://github.com/nxtbgthng/MGTemplateEngine
You can use Google for your own specific usage.

Three: JS (JavaScript) and OC Communication
In short, it is OC can send a message to JS, JS can also send a message to OC to let OC call an interface.
Through communication, we generate HTML files that achieve collaboration with OC. Lay the groundwork for the next question four.
For this problem. We recommend that you use Webviewjavascriptbridge:
Https://github.com/marcuswestin/WebViewJavascriptBridge
Simple configuration, you can effectively and elegantly realize the JS and OC communication. Highly recommended.
There are many blogs about how to use it online, You can use Google for your own specific usage.

four: processing of pictures
Often use NetEase news users can find that the app is provided under the mobile network, the image is not displayed by default features to help you save traffic. Of course, under the mobile network, there are individual pictures you really want to see, click on the blank image, you can download the display. WebView's own picture download, obviously uncontrollable. So, how do we go about implementing this function? Not suspense this time, direct description:
1:html a picture in a string to pre-load a blank image or a locally-occupied bitmap
2: It is easy to get an array of all the pictures in the received JSON string
3: Check whether the picture already exists, if the picture already exists, send the picture information through a string to Js,js after receiving the type message, replace the IMG src with the image local path.
If the picture does not already exist, first go to download, after the download is complete, give the JS message, complete the IMG replacement, and add click to enter the album event.
If the picture download fails, the same message is sent to JS. IMG points to the image with the re-download event and click Re-download.
Here, the image of the cache solemnly recommend everyone to use Sdwebimage: Very efficient.
Https://github.com/rs/SDWebImage

V: Other
Some other features of the reality also ask you to think for yourself.

VI: This article demo
I simply wrote a demo, but did not use SdwebimageAnd mgtemplateengine
After a few days, I'll upload it to my github and then put it on the download link.
If there is any problem, welcome to comment on my blog.

NetEase News Client iOS version in the News Details page (uiwebview) analysis and discussion of the implementation of the technology