search

Home  >  Q&A  >  body text

webview - iOS今日头条详情界面实现

哪位大神了解或者有思路了解今日头条的详情界面是如何实现的吗?或者网易新闻的文章详情界面都是如何实现的?

迷茫迷茫2771 days ago1088

reply all(4)I'll reply

  • ringa_lee

    ringa_lee2017-04-18 09:36:42

    I have not installed Toutiao, but the main text of almost all news apps is webview.
    Take NetEase News as an example. It is a webview. After loading the news text, tell js to leave it blank and let the client fill in the following sharing, advertisements, popular posts, related news, etc. Or put a webview that displays the text on the scrollView, and put sharing, advertisements, popular posts, etc. below it.
    You should know the communication method between webview and js. As for how to package webview like client-side controls, it is actually not difficult, such as getting the total height of the page, getting the thumbnail rect, customizing the menu, setting the background of the body to be transparent, and letting customers Execute certain code on the terminal, such as sharing, opening the comment interface, etc.

    This is the general idea. I made something a long time ago, which is similar to the news text page, but js can control the page arbitrarily, and supports web and native controls. The boss hopes that the client can be like a web application and can change the interface at any time, add event pages, etc.

    As for what you said about passing json, passing json is just how to transmit data, but what you asked about is how to implement the interface. There is no relationship between the two.

    Let’s talk a little more about page caching. Webviews that are displayed frequently such as news details pages generally require page caching. You can set rules to cache html/css/js, or package them into an app, or both. Cached pages load without any stress. If you know that the main text of NetEase news is transmitted in json, then you can look through directories such as app bundle and documents/library, and there must be page cache.

    Then comes the data. The cached interface is just an empty shelf, with only styles and no data. The method of filling data is very flexible and depends on your personal preferences and actual test results. You can ask ajax to request data and then fill in p, or you can ask the client to execute js to fill it in after the shelf page is loaded, or you can let the part that does not participate in caching (such as iframe) bring its own data, or both.
    Because there will be an http request when opening the details page to obtain data such as popular posts and number of posts, you can also return the news text to the client at this time, so that the client has all the data and the page display will be faster. This is just an optimization point.

    The overall process is:
    pushController -> hidden all views -> load page cache -> fill page data -> layout other native controls

    reply
    0
  • ringa_lee

    ringa_lee2017-04-18 09:36:42

    Use webview to load html, you can Baidu for details

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-18 09:36:42

    Here is an article for you to read http://www.jianshu.com/p/1495...

    reply
    0
  • ringa_lee

    ringa_lee2017-04-18 09:36:42

    Webview loads html, typesetting is the job of html

    reply
    0
  • Cancelreply