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

标签: | 发表时间:2017-08-07 05:43 | 作者:
分享到:
出处:http://www.jianshu.com

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

一、引言

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

从现在开始,不再着眼于某一个 feature ,你需要站在一个客户端架构师的角度来看待问题。

二、我们用到的简书客户端特性

1.界面构成分析
  • 本文的主角是简书 iOS 客户端的文章展示页面,这是我的一篇文章的展示页面:
    文章展示页面

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

    热门内容推荐轮播图

    热门内容推荐轮播图
  • 在 webview 的基础上,添加了符合浏览器用户习惯的导航栏按钮。包括左侧的返回关闭按钮。以及右侧的功能列表按钮。
  • 页面底部,是一个工具栏,提供了四个常用的操作。注意这里的评论按钮,它是我们下文的一个谈论点。
2.界面特性分析
  • 一般各家客户端的内容页,都会有一些适于自己功能点的设计。简书也不例外。比如,在文章内容区域点击作者的头像(它本身也是网页的一部分,暂且理解为对应一个链接),跳转到了作者的个人主页,注意,容易发现它是一个客户端的原生页面,也就是一个VC。



    作者个人主页

    作者个人主页
  • 点击底部工具栏中的评论按钮(原生组件),页面(web页面)会滑动到评论区域,如图

    点击评论按钮,页面滑动

    点击评论按钮,页面滑动
  • 对一篇文章写下自己的评论(使用了原生组件),评论列表(网页内容)进行更新。
  • 简书对于展示内容作了内外站的区分。据我自己的简要测试,来自简书域名www.jianshu.com下的内容,在加载过程中,是没有进度条的,用户体验非常接近原生页面。而第三方的内容,则在加载过程中会出现一般浏览器中常见的加载进度条,如图:

    第三方内容的加载进度条

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

三、我们需要的储备知识

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拥有布尔类型的canGoBackloading等属性,通过监测它们的值我们可以知道当前页面是否可以进行回退,以及页面是否正在加载。

    与之对应,拥有- (void)goBack;等方法,调用之页面会进行返回,就像我们在浏览器中常见的那样。

四、相关特性的模仿实现

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

这是demo中对该页面的模仿实现:

demo页面

demo页面
1.页面初始化

在demo中,使用一条web页面的URL来初始化VC:- (instancetype)initWithURL:(NSURL *)URL;这条URL对应文章的链接。

顶部导航栏和底部工具栏都是系统原生的UINavigationBarUIToolBar,按钮素材使用阿里巴巴的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中关于第三方链接的关闭按钮的显示逻辑,做出了相应的处理。

五、demo中的不足

看到这里大家应该就会发现,对于提到Hybrid我们就会想到的Bridge、Router等模块,我并没有做明显的限定。这样也是为了方便大家用一种更接近以往原生代码编写的思维,来理解Hybrid模式。

同时,demo中较多涉及了原生代码对web页面做出的沟通操作。而没有JS代码对原生代码的调用,这是因为一来站在一个简书客户端的用户和iOS开发的角度,对于JS端执行的操作,有些力不能及,这本是和你共同工作的前端伙伴的任务,二来对于一篇帮助大家入门Hybrid的文章来说,从这个单方面的交互来入手,管中窥豹,已是足够。

六、一些感悟

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

1.未来的趋势之一,便是大前端团队进行客户端开发。
  • 看到这里你发现,如果你们的团队想要采用Hybrid模式进行产品的开发,光靠iOS或者是安卓的客户端工程师是不可能完成的。在客户端框架的开发过程中,需要和前端的工程师沟通具体的技术细节。比如怎样设计接口能够更好地兼顾客户端和前端特点,对于某个问题,如何能把握全局而不是单单从客户端的角度来看待。这些可能是普通的iOS开发工程师和大牛的差距所在之一。
  • 越来越多的客户端工程师招聘要求中,出现了熟悉前端语言的要求。如果你能在精通客户端开发之余,对前端语言也游刃有余,那么在接下来的发展趋势中,就会有更多的可能性。所以,请开始你的前端学习吧~。
2.在Hybrid模式下,如何进行产品技术方案的取舍
  • 如前文所见,简书客户端对于内部域名的内容和第三方内容,在展示方式上是有明显不同的。在阅读简书的文章时,让用户发现不了自己是在一个浏览器上进行阅读,这在方方面面就极大改善了用户体验。为了做到这一点,我推测简书首先需要对自己的内容进行非常良好的CDN加速,以保证内容加载时不会耗时过长,同时采取一些预加载策略,二是在内容加载时,采用与原生界面部分相同的loading界面,去掉进度条,模拟原生界面的加载过程。而对于第三方的链接,采用进度条+返回、关闭按钮的设计,则更符合用户在浏览器中进行阅读的习惯,也可以和自己的内容进行直观区分,这也改善了用户体验。
  • 对于某些原生和Web页面都可以实现的特性如何取舍,这也是需要考虑的问题。比如,点击评论按钮页面滑动,这个功能使用web页面的滑动而非原生的控制显然更为自然也更符合用户习惯。而对于撰写评论的功能,使用原生的键盘、编辑器组件,当然就比使用web页面的键入更加稳定可控了。

七、文章的demo

对于文章内容,我写了一个demo,这是demo地址

为了便于理解,我为代码写了详尽的注释。

如果觉得它对你有帮助,不妨在github上为我点一个star~非常感谢!

相关 [ios 客户端 hybrid] 推荐:

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

- -
作为一位 iOS 开发人员,你应该已经敏感地发现,自己的工作涉及内容已经不止于 Native 的部分,因为 Hybrid App 和 ReactNative 等技术方案已经不仅仅是概念,越来越多的公司开始着手自己的 Hybrid 方案以及 ReactNative 本地化工作. 介绍相关概念的优秀文章已经有许多,方案的实现原理你也应该已经或多或少有了一些理解.

iOS客户端hack的两种姿势

- - WooYun知识库
分析某商城漏洞,在漏洞验证时采用了两种iOS上的hack工具:cycript和reveal,各有风情,均能攻城拔寨,实乃我辈日常居家、杀人越货之利刃,现与诸君共享之. 该商城的iOS版app为用户提供了找回密码的功能,用户需通过三个步骤找回密码:. 输入一个本地的图形辨识验证码(多余. 提供用户手机号,输入一个短信验证码.

Tweetbot:iOS 平台上最高效的 Twitter 客户端

- Xuyang - 爱范儿 · Beats of Bits
虽然 Twitter 官方不鼓励第三方再开发 Twitter 客户端,但是似乎无法阻挡开发者的步伐,最新上架的 Tweetbot 获得了媒体和用户一致的好评,现在得分是四星半,总共有 520 次评分. Daring Fireball 的 John Gruber 最喜欢 Tweetbot 的两点是:第一,当你点击一条 Tweet 的时候,这条 Tweet 下面会出现操作按钮,大量第三方客户端则是进入单独页面,回到时间线需再按“退出”按钮;第二,在 Tweet 上自左向右滑动会出现对话界面,大量第三方客户端都有这个功能,但只有 Tweetbot 的最高效.

iOS客户端开发与Web前端开发

- - bang's blog
不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 用户角度上看,客户端升级必须让用户手动下载整个新的安装包覆盖安装,而web的升级无需用户做任何事情. 开发角度上看,如果客户端有个小bug需要紧急修复,需要修复完后打包一个完成的安装包,给一个版本号,发布给用户升级.

朋游风景网推出iOS、Android 客户端,瞄准智能旅游市场

- Draven - 36氪
以前外出旅行,跟团的话,总是觉着被牵着走特别不爽;自己玩又不知道按照什么路线,又不知道各个景点背后有什么故事. 这时候就会想,有没有一个手机App,去一个景点时,它可以为你自动规划参观路线,同时还为你介绍每个景点的相关信息呢. 广州创业公司朋游风景网 就打算解决这个问题. 朋游风景于8月1日正式上线了其网站,并同期发布了iOS 应用、Android 应用.

QQ邮箱iPhone客户端强势登场:经过iOS 4.0 测试

- 洞箫 - cnBeta.COM
新版iOS5总算是千呼万唤始出来,其中,内置QQ邮箱这一点更是吸引了众多中国果粉的眼球. 同样值得关注的是,QQ邮箱的官方iPhone客户端近日强势登陆App Store,已经过 iOS 4.0 测试,只需要iOS 3.0 或更高版本即可下载使用.

继Android版后,成都公交手机二维码iOS客户端正式推出

- - 雷锋网
还记得去年11月23号雷锋网的那条微博么. 成都公交手机二维码终端亮相:推出Android系统客户端,下载后手机扫描站台二维码可直接查询公交位置、线路信息、换乘方式等信息. 在继Android客户端之后,支持iPhone的iOS客户端测试版正式亮相. 手机登陆www.10628106.com即可下载安装.

推送通知iOS客户端编写实现及推送服务器端编写

- - CSDN博客移动开发推荐文章
推送通知技术在Mac OS X和iOS系统上都可以运行,我们本章主要介绍iOS客户端编程,推送通知的编程比较简单,编程的关键是获得令牌,这是从APNS返回的,然后还有把提交给内容提供商. 下面我们看看开发之前的一些准备工作. 编写iOS推送应用需要在Xcode工程中进行一些配置,这些配置是主要是设置代码签名标识,代码签名标识的前提要有配置概要文件(Provisioning Profiles).

移动端Hybrid应用与响应式

- - SegmentFault 最新的文章
前端是一个非常庞大和复杂的领域. 如果说多年前的前端只是需要学习几个 HTML 标签,看到别的网站用了狂拽酷炫的特效就 copy 下来,稍微懂点 jQuery 做日常使用,再了解几个 Prototype 和 MooTools(貌似都不再维护了)等高冷脱俗的库做装X用就能显得很“专家”了. 那么现在要还是持这样的想法,就不适合搞前端.

Hybrid APP架构设计思路

- - SegmentFault 最新的文章
关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue. 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开.