从简书iOS客户端，来谈谈Hybrid方案细节设计

做为一位 iOS 开发人员，你应该已经敏感地发现，本身的工做涉及内容已经不止于 Native 的部分，由于 Hybrid App 和 ReactNative 等技术方案已经不只仅是概念，愈来愈多的公司开始着手本身的 Hybrid 方案以及 ReactNative 本地化工做。

1、引言

介绍相关概念的优秀文章已经有许多，方案的实现原理你也应该已经或多或少有了一些理解。不了解也没有关系，在这篇文章里，我将用简书 iOS 客户端的有关特性，来探索一下 Hybrid 方案的技术细节。文章的目的是抛砖引玉，用一个具体的项目，你们很熟悉的简书客户端，来帮助你们认识 Hybrid 方案，而后亲自实现它 。

从如今开始，再也不着眼于某一个 feature ，你须要站在一个客户端架构师的角度来看待问题。

2、咱们用到的简书客户端特性

1.界面构成分析

• 本文的主角是简书 iOS 客户端的文章展现页面，这是个人一篇文章的展现页面：

  

  文章展现页面

• 如你所见，文章内容的展现是使用webview控件，具体是UIWebview仍是WKWebview按下不表，这不是本文的关键。在个人demo中，我使用了UIWebview。
• 在简书发现tab栏的内容顶部，还有一个热门内容推荐的轮播图。与它相似是一些app内的活动推介轮播图，以及广告页面，它们的详情页内容展现多使用webview。在简书中，这个轮播图对应的下一级页面也是文章展现页面，特性基本一致。
  

  

  热门内容推荐轮播图

• 在 webview 的基础上，添加了符合浏览器用户习惯的导航栏按钮。包括左侧的返回和关闭按钮。以及右侧的功能列表按钮。
• 页面底部，是一个工具栏，提供了四个经常使用的操做。注意这里的评论按钮，它是咱们下文的一个谈论点。

2.界面特性分析

• 通常各家客户端的内容页，都会有一些适于本身功能点的设计。简书也不例外。好比，在文章内容区域点击做者的头像（它自己也是网页的一部分，暂且理解为对应一个连接），跳转到了做者的我的主页，注意，容易发现它是一个客户端的原生页面，也就是一个VC。
  

  

  做者我的主页

• 点击底部工具栏中的评论按钮（原生组件），页面（web页面）会滑动到评论区域，如图
  

  

  点击评论按钮，页面滑动

• 对一篇文章写下本身的评论（使用了原生组件），评论列表（网页内容）进行更新。
• 简书对于展现内容做了内外站的区分。据我本身的简要测试，来自简书域名www.jianshu.com下的内容，在加载过程当中，是没有进度条的，用户体验很是接近原生页面。而第三方的内容，则在加载过程当中会出现通常浏览器中常见的加载进度条，如图：
  

  

  第三方内容的加载进度条

• 对于简书域名下的内容，不会出现叉号的关闭按钮，这也是为了营造接近原生页面的用户体验，让用户不会察觉到这是一个 web 界面。而第三方内容，则会出现符合浏览器使用习惯的关闭按钮，如上图。

3、咱们须要的储备知识

1.Hybrid相关

• 在Hybrid架构中，原生界面和web页面须要频繁地沟通，而且是双向的沟通。原生代码能够构建JavaScript语句，交由webview进行执行，从而在web页面上实现须要的效果。而在web页面的js文件中，也能够调用原生的Objective-C方法，从而执行一些原生方法才能完成的操做。与此相关的库有WebViewJavascriptBridge以及JavaScriptCore，有须要的同窗能够自行了解。

2.UIWebview的相关特性

• UIWebviewDelegate
  webview的代理方法你们想必很是熟悉，咱们能够在页面加载前、开始加载时、加载完成时以及失败时进行须要的操做。这里咱们须要用到的是这一条代理方法：
  - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
  webview根据它的返回结果来决定是否进行加载。
• 执行JS语句的方法：
  - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
  咱们能够自行构建一条JS语句，经过这个方法交由webview执行
• goback相关
  UIWebview拥有布尔类型的canGoBack、loading等属性，经过监测它们的值咱们能够知道当前页面是否能够进行回退，以及页面是否正在加载。
  与之对应，拥有- (void)goBack;等方法，调用之页面会进行返回，就像咱们在浏览器中常见的那样。

4、相关特性的模仿实现

对于上文中提到的相关特性，我出写了一个demo，对它们进行了简要的模仿实现。固然简书官方的实现会考虑到方方面面，而个人demo仅是从Hybrid架构的思想出发，盼可以抛砖引玉。
这是demo中对该页面的模仿实现：

demo页面

1.页面初始化

在demo中，使用一条web页面的URL来初始化VC：- (instancetype)initWithURL:(NSURL *)URL;这条URL对应文章的连接。
顶部导航栏和底部工具栏都是系统原生的UINavigationBar和UIToolBar，按钮素材使用阿里巴巴的iconfont字体。

2.点击做者头像进入我的主页

关于这个特性的实现，若是按照 Hybrid 架构的思想，属于 Web 页面调用原生方法，进入一个原生的VC。点击头像，JS脚本执行相关代码，调用原生方法暴露出来的接口，执行原生方法。
我在这里用一种简要的方法实现：原生代码利用以前提到的代理方法，在用户点击头像后，拦截该URL，分析URL为头像部分，直接执行原生方法跳转到我的主页VC。
经过分析简书文章页面的网页源代码，我发现用户头像对应的URL中的Query部分，有一个参数为utm_medium=note-author-link。据此，在- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType代理方法中加以判断，如果头像连接，则跳转到我的主页VC。下面是相关代码：

NSURL *destinationURL = request.URL;
    NSString *URLQuery = destinationURL.query;
//    简书点击文章中头像时跳转至原生页面。此处利用头像连接中的一个参数做判断
    if ([URLQuery containsString:@"utm_medium=note-author-link"])
    {
        NSLog(@"我跳转到我的主页啦");
        AvatorViewController *avatorVC = [[AvatorViewController alloc] init];
        [self.navigationController pushViewController:avatorVC animated:YES];
        return NO;
    }复制代码

最后返回NO是由于如果头像连接，该web页面是不须要作跳转操做的。

这里顺便讲一个小tips：若是想要在Mac端查看移动端的网页源代码，那么你只须要在Safari中输入该页面，而且在开发选项下的用户代理中，选择iOS系统下的Safari做为代理，这时再使用源代码查看，看到的就是移动端的网页源代码了。

3.点击评论按钮，页面滑动到评论区域

这个特性的实现方式和上面相似，点击评论按钮，原生代码构建一条JS语句，交由- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;方法进行执行，由web页面执行滑动操做。代码以下：

- (void)scrollToCommentField
{
    [self stringByEvaluatingJavaScriptFromString:@"scrollTo(0,20500)"];
}复制代码

这里的JS语句很是简单，因为笔者的前端知识还有所欠缺，没有想到能够精确滑动的评论区域的JS语句，因此简要实现，点到为止。

4.原生组件写评论，web页面更新

这里首先须要贴一下文章页面的网页源代码：

<!-- 评论列表 -->
  <div data-vcomp="comments-list" data-lazy="3">
    <script type="application/json">
      {"likedNote":true,"commentable":true,"publicCommentsCount":3,"noteId":2491941,"likesCount":43}
    </script>
  </div>复制代码

能够看到，页面的评论内容是异步加载的。因此这个功能的实现，我
认为比较合理的逻辑是原生组件向服务器提交一条新的评论，收到成功回调以后，原生组件和web页面进行交互，执行更新并加载评论列表的JS代码，从而看到本身发的新评论。

5.内外站页面的区分

这里和点击头像的实现方法相似，经过拦截连接的URL，区份内部连接和第三方连接，从而在开始加载的时候采用不一样的加载界面，或者对于第三方连接单独开启一个第三方VC。
demo中关于第三方连接的关闭按钮的显示逻辑，作出了相应的处理。

5、demo中的不足

看到这里你们应该就会发现，对于提到Hybrid咱们就会想到的Bridge、Router等模块，我并无作明显的限定。这样也是为了方便你们用一种更接近以往原生代码编写的思惟，来理解Hybrid模式。
同时，demo中较多涉及了原生代码对web页面作出的沟通操做。而没有JS代码对原生代码的调用，这是由于一来站在一个简书客户端的用户和iOS开发的角度，对于JS端执行的操做，有些力不能及，这本是和你共同工做的前端伙伴的任务，二来对于一篇帮助你们入门Hybrid的文章来讲，从这个单方面的交互来入手，管中窥豹，已经是足够。

6、一些感悟

其实，写了这么多，我以为收获到一些感悟是最重要的，下面的要讲的，多是我以为更为重要的思想性的东西。

1.将来的趋势之一，即是大前端团队进行客户端开发。

• 看到这里你发现，若是大家的团队想要采用Hybrid模式进行产品的开发，光靠iOS或者是安卓的客户端工程师是不可能完成的。在客户端框架的开发过程当中，须要和前端的工程师沟通具体的技术细节。好比怎样设计接口可以更好地兼顾客户端和前端特色，对于某个问题，如何能把握全局而不是单单从客户端的角度来看待。这些多是普通的iOS开发工程师和大牛的差距所在之一。
• 愈来愈多的客户端工程师招聘要求中，出现了熟悉前端语言的要求。若是你能在精通客户端开发之余，对前端语言也游刃有余，那么在接下来的发展趋势中，就会有更多的可能性。因此，请开始你的前端学习吧~。

2.在Hybrid模式下，如何进行产品技术方案的取舍

• 如前文所见，简书客户端对于内部域名的内容和第三方内容，在展现方式上是有明显不一样的。在阅读简书的文章时，让用户发现不了本身是在一个浏览器上进行阅读，这在方方面面就极大改善了用户体验。为了作到这一点，我推测简书首先须要对本身的内容进行很是良好的CDN加速，以保证内容加载时不会耗时过长，同时采起一些预加载策略，二是在内容加载时，采用与原生界面部分相同的loading界面，去掉进度条，模拟原生界面的加载过程。而对于第三方的连接，采用进度条+返回、关闭按钮的设计，则更符合用户在浏览器中进行阅读的习惯，也能够和本身的内容进行直观区分，这也改善了用户体验。
• 对于某些原生和Web页面均可以实现的特性如何取舍，这也是须要考虑的问题。好比，点击评论按钮页面滑动，这个功能使用web页面的滑动而非原生的控制显然更为天然也更符合用户习惯。而对于撰写评论的功能，使用原生的键盘、编辑器组件，固然就比使用web页面的键入更加稳定可控了。

7、文章的demo

对于文章内容，我写了一个demo，这是demo地址。为了便于理解，我为代码写了详尽的注释。若是以为它对你有帮助，不妨在github上为我点一个star~很是感谢！