请问 36Kr/ifanr iOS 客户端的文章详情页是如何实现的？有开源的组件吗？

  • Z时代
  • 2024-01-10
  • 分类：IT

iOS 客户端中 36Kr 和 ifanr 的文章详情页的文章详情页的结构很相似，包含：主题图，标题，作者和正文。

它们的 API 返回的信息结构也很相似，都包含主题图，作者信息、正文等。另外正文部分，ifanr 的 content 和 36Kr 的 body_html 都包含有一张图片元素 <img src="">。但是从显示效果来看，不像是仅仅直接使用 WebView 渲染出来的，因为图片和正文之间还有文章标题和作者信息。

请教 iOS 大拿们，这种效果是如何实现的呢？由开源的组件吗？

36krifanr

ifanr 获取文章内容的接口和返回结果示例如下：

点我接口

{
    ID: 508521,
    title: "三强相遇，谁能称王？iPhone 6 和三星 S6、HTC One M9 拍照对比",
    author: "李谋",
    pubDate: "2015-04-05 12:14:37",
    post_modified: "2015-04-05 14:11:19",
    image: "http://cdnzz.ifanr.com/wp-content/uploads/2015/04/initpintu.jpg",
    thumb: "http://cdnzz.ifanr.com/wp-content/uploads/2015/04/initpintu.jpg",
    content: "<p><a href="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/initpintu.jpg"><img class=" size-full wp-image-508537 aligncenter" src="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/initpintu.jpg" alt="initpintu" width="1000" height="625" /></a></p><p>今年的 Android 旗舰机三星 S6 和 HTC One M9 就要正式上市，外媒 <a href="http://www.cnet.com/news/samsung-galaxy-s6-camera-comparison-versus-htc-one-m9-iphone-6/">cnet 已经拿到了真机并与旗舰标杆机 iPhone 6 进行了拍照对比</a>。先回顾一下这三款旗舰的影像系统配置吧，三星 S6 采用了 1600 万像素索尼 IMX240 CMOS ，镜头光圈为 f/1.9，并支持着光学防抖；HTC One M9 采用的是东芝 T4KA7 CMOS，尺寸为 1/2.4 "，像素为 2000 万，镜头光圈为 f/2.2；iPhone 6 依然采用了 800 万像素的 CMOS，镜头光圈为 f/2.2。需要说明一下的是以下样张顺序从上至下均为三星 S6、HTC One M9、iPhone 6。</p> <p><!--more--></p> <h3>第一组场景 阳光充足的户外</h3> <p><a href="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/samsung-galaxy-s6-outdoor-sunny.jpg"><img class=" size-full wp-image-508540 aligncenter" src="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/samsung-galaxy-s6-outdoor-sunny.jpg" alt="samsung-galaxy-s6-outdoor-sunny" width="800" height="450" /></a></p> <p><a href="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/htc-one-m9-outdoor-sunny.jpg"><img class=" size-full wp-image-508539 aligncenter" src="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/htc-one-m9-outdoor-sunny.jpg" alt="htc-one-m9-outdoor-sunny" width="800" height="450" /></a></p> <p><a href="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/apple-iphone-6-outdoor-sunny.jpg"><img class=" size-full wp-image-508538 aligncenter" src="http://cdnzz.ifanr.com/wp-content/uploads/2015/04/apple-iphone-6-outdoor-sunny.jpg" alt="apple-iphone-6-outdoor-sunny" width="850" height="637" /></a></p> <p>……</p> <p>&nbsp;</p> <p>样张来自<a href="http://www.cnet.com/news/samsung-galaxy-s6-camera-comparison-versus-htc-one-m9-iphone-6/"> cnet </a></p> ",
    excerpt: "今年的 Android 旗舰机三星 S6 和 HTC One M9 就要正式上市，外媒 cnet 已经拿到了真机并与旗舰标杆机 iPhone 6 进行了拍照对比。先回顾一下这三款旗...",
    introduce: "",
    link: "http://www.ifanr.com/508521",
    comments: "88",
    category: "产品",
    post_type: "post",
    tags: "Apple&amp;iOS|Google/Android|HTC|三星|拍照",
    like: "20",
    is_ad: 0,
    dasheng_author: "",
    dasheng_original: "#",
    dasheng_comment: ""
},

36Kr 获取文章内容的接口和返回结果示例如下：

接口

{
    id: 531489,
    title: "【独家】家装O2O的“风口”来了？“美家帮”宣布完成800万美金A轮投资，把标准化家装进行到底",
    excerpt: "黄晓明和雷军最近拍了个微电影，复刻《教父》的经典桥段，黄晓明向雷军请教互联网下一个风口在哪里，雷军冷冷的回答道，“风口，我倒是听说过。",
    body_html: "<p></p><p><img alt="Image title" src="http://a.36krcnd.com/nil_class/8e75373d-bd25-48ef-a03a-e299335e3219.jpg"></p><p>黄晓明和雷军最近拍了个微电影，复刻《教父》的经典桥段，黄晓明向雷军请教互联网下一个风口在哪里，雷军冷冷的回答道，“风口，我倒是听说过。”戏里戏外，大家都在寻找下一个风口，而去年顺为基金6000万人民币投资“爱空间”，让原本安静的互联网家装行业备受关注，家装O2O会是下一个“风口”么？<br></p><p>去年我们介绍过的，主打<a href="http://36kr.com/p/219810.html" target="_blank">777元/㎡标准化家庭装修</a>的家装O2O品牌“<a href="http://www.mjbang.cn/" target="_blank">美家帮</a>”，独家向36氪透露，<span>已经完成800万美金A轮投资</span>，此次A轮投资方为东方富海旗下富海铧创基金和移动创新基金联投，资金已到帐。此前，“美家帮”曾获得坚果资本1000万人民币天使投资。<br></p><p>“美家帮”现在主打针对平层毛坯房，包含一线主材、一线辅材、人工费三合一的完全标准化的一站式装修服务，定价为777元/㎡，基本等同于除了软装，基础工程全包了。CEO戴洪亮表示，本轮资金主要用于装修产品标准化，装修施工的标准化，供应链优化整合以及行业布局。<br></p><p>装修是一个严重非标准品，如何通过互联网的方式尽可能将其标准化呢？一般来说，硬装主要有三个大的环节：<span>设计</span>、<span>建材</span>和<span>施工</span>。各个家装O2O在设计和建材上的玩法都大同小异：设计风格基本上是固定的几种模板，都是什么欧式、田园、古典之类的，每种风格大概的材料和成本，都有很标准的把控；在建材这块儿，平台会直接和上游的供应商谈，一来省去中间各级渠道的成本，二来规模采购可以压低价格。<br></p><p>所以在设计和建材上，标准化的难度不是特别的高，真正蛋疼的是施工环节，各种撕逼也基本上出现在施工这块儿。“美家帮”的玩法是，第一采用平台入驻的方式，装修工人通过线上入驻、培训、考核，并进行认证，建立了一套“<span>工人管理体系</span>”，以确保装修工人的质量。<br></p><p>二是工人管理体系外，“美家帮”还建立了一套“<span>施工过程管控体系</span>”根据总体工期时间，对每天要做的事项进行管控。一来设计师、监理、工人可以根据设定好的标准化施工事项进行事务对接与执行，提高内部管控效率；二来业主也可以实时查看施工进度，如果有出现偏差，可以及时向平台反馈。</p><p>三是在施工工艺方面，按照水电工程、泥水工程、木作工程、油漆工程等四大节点进行监工和验收。设有“国家标准”和“我家现场”两个栏目，业主可以将自家的施工现场和国家标准两者进行对比，施工质量如何，一目了然，若发现任何问题，可随时与设计师、监理人员或工人进行交流，并提出自己的建议。</p><p>在施工这个环节，除了培训装修工人入驻的平台模式外，还有更“重”的自营模式，即自己养装修工人，比如“爱空间”就采用自营的模式。自营模式对装修工人可以有更好的管理，因此“爱空间”甚至喊出了“20天完成工期”的口号......<br></p><p>是不是下一个“风口”难说，但家装家装O2O的玩家越来越多，且竞争越来越凶悍已经成为不争的事实。不仅仅是“美家帮”、“爱空间”，比如<a href="http://www.sdsj.com.cn/">圣点装饰</a>推出了698元/㎡先装修后付款的服务，<a href="http://mogu.51zx.com/">蘑菇装修</a>甚至直接推出了599元/㎡的套餐......</p><p>不仅仅是创业公司在关注，前不久天猫总裁行癫对外表示，“过去几年家装电商年复合增长率超100%，欢迎更多传统家装行业用互联网＋家装的方式转型，迎接行业的大变革。”</p><p>行癫认为，跟服装等传统电商短平快不同，&nbsp;家装电商用户从最初的设计、风格、到品牌确定，到最终他挑选最钟意的款式，再到安装、施工、售后服务等，有非常长的产业链，因此需要传统品牌与互联网更深度的融合，从接触潜客、塑造品牌、长尾销售、汇聚产业、标准服务这五方面看，天猫甚至整个淘宝与家装行业融合有深度变革的机会。</p><p>虽然落脚点不在家装O2O上，但越来越多的互联网公司开始觊觎家装这个市场已经是不争的事实。那么问题来了，家装O2O会是下一个“风口”么？</p>",
    md_content: null,
    title_link: null,
    node_id: 11,
    node_name: "国内创业公司",
    replies_count: 4,
    tags: [ ],
    must_read: null,
    slug: null,
    state: "published",
    draft_key: null,
    feature_img: "http://a.36krcnd.com/nil_class/8e75373d-bd25-48ef-a03a-e299335e3219.jpg",
    user_id: 4721,
    user: {
    id: 4721,
    name: "WANGJINGYU",
    email: "wangjingyu+krlogin@36kr.com",
    phone: "",
    tagline: "winner winner, chicken dinner",
    bio: "36氪茶水间主任，在36氪负责端茶倒水，收发快递，偶尔帮阿姨洗菜做饭......",
    role: "editor",
    sso_id: null,
    avatar_url: "http://ww4.sinaimg.cn/crop.0.1.1242.1242.1024/6fdc60b3jw8epe35k0sogj20yi0ykgq3.jpg",
    authentication_token: "xgaEHh1rzxw_M9Q3gLm5",
    authentications: [
    {
    id: 8245,
    uid: "6633",
    provider: "krypton",
    raw: {
    provider: "krypton",
    uid: 6633,
    info: {
    name: "鏡宇cupl",
    email: "wangjingyu+krlogin@36kr.com",
    nickname: "鏡宇cupl",
    phone: null,
    image: "http://ww4.sinaimg.cn/crop.0.1.1242.1242.1024/6fdc60b3jw8epe35k0sogj20yi0ykgq3.jpg",
    location: null
    },
    credentials: {
    token: "6267b9a126e859c7ff163ad8990e7ffa8ef003388a257ca3c7e90f7954f257cb",
    refresh_token: "7bab32adff722df19efc345889ab2d5e79ee79699bf6e7b1a48303490aeac622",
    expires_at: 1428988294,
    expires: true
    },
    extra: {
    version: 1,
    raw_info: {
    id: 6633,
    email: "wangjingyu+krlogin@36kr.com",
    username: null,
    realname: null,
    phone: null,
    nickname: "鏡宇cupl",
    avatar: "http://ww4.sinaimg.cn/crop.0.1.1242.1242.1024/6fdc60b3jw8epe35k0sogj20yi0ykgq3.jpg",
    gender: null,
    city: " ",
    version: 1,
    email_confirmed_at: "2015-04-01T16:40:28+08:00"
    }
    }
    },
    user_id: 4721,
    created_at: "2015-04-01T16:40:29+08:00",
    updated_at: "2015-04-07T13:11:35+08:00"
    }
    ],
    created_at: "2015-03-20T20:12:37+08:00",
    updated_at: "2015-04-01T16:39:22+08:00"
    },

以上是 请问 36Kr/ifanr iOS 客户端的文章详情页是如何实现的？有开源的组件吗？ 的全部内容， 来源链接： utcz.com/p/187519.html

回到顶部