围绕原生与H5交互实践聊聊Android混合开发

背景介绍

    如果你的团队有自己维护的网站,现在想拓展业务场景快速做一个移动App,那么就可以考虑利用混合开发来完成这个任务。
    本文就初步探讨下混合开发技术,主要内容有:
    1 混合开发的概念-原生与H5的合作;
    2 原生与H5交互方案以及使用场景;
    3 原生与H5交互实践详解;
    4 混合开发未来展望。

一、 混合开发的概念-原生与H5的相互合作

      混合开发是一种开发方式(模式),它指开发一个App时候,一部分功能用原生(native)构建,一部分功能用html5构建,这样用两种方式合作开发出来的App叫Hybrid App。
      混合开发的对立面是单一开发,比如我们常说的纯原生(native)开发就是一种单一开发,纯Html5开发当然也是一种单一开发(请注意:单一开发是本文为了探讨混合开发概念提出的对立概念,主要指利用特定开发语言、开发环境进行的开发行为)。为了更好理解混合开发,我们再回顾下它的两个合作方,原生开发和H5开发一些基础知识。

      1)什么是原生开发 ,它的优势?
       原生开发是基于手机本地操作系统如IOS、Android,利用官方提供的开发语言、开发类库、开发工具进行App开发 。用这种方式开发出来的App,叫native app-本地app。
      Native App业务逻辑代码在本地,操作系统能对Native App进行有效地资源约束(比如内存不能占用太多、流量不能浪费太多)、权限控制、生命周期监管,这样有问题也可以找到负责APP。
      离我越近、交融越多、对你掌控力度越大,那么我就越信任你,所以给你更多的便利和权限。 基于这样的理念,操作系统会向Native app开放更多的能力接口,这样Native App就可以更好的利用操作系统“手里”的设备,比如相机、GPS、蓝牙等。在手机厂商做过的同学就会知道,预装App跟手机厂商更紧密,所以他们会拥有比三方App更高的权限和能力,可以有更多的骚操作。
      不过万事有利有弊,跟一个特定平台关系越密切,那么向其他平台发展时候,又需要花费大量时间、精力来重新建立不太一样的亲密关系,这些对企业来说就是时间与金钱。所以Native开发的缺点就是耗时较长、耗资巨大

      2)什么是H5,它的优势?
      H5是HTML(HyperText Markup Language)超文本标记语言第五个版本。那什么是超文本标记语言呢?
      首先认识下超文本,纯文本就是类似word 里面的文字,超文本就是文本中又嵌入了图片、链接、音乐、程序、甚至未来加入气味、感觉等,他们本质都是信息的不同表现形式。超文本=多类型信息的融合。
      其次了解下标记语言(markup language)。
      文字语言本质是祖祖辈辈传递下来并不断演变的符号解析规则(约定、协议),比如说“苹果”是中文中的一个符号,“Apple”是英文中的一个符号,这两个符号都指的是那个红红的,圆圆的、吃起来甜甜的东西。学习语言的过程就是大脑构建符号解析系统的过程,比如看到“我吃香辣鸡翅”,我们的大脑就会自动将这几个符号解析(理解、翻译)成为一副香喷喷的场景,然后就可能流出了不争气的口水,还要偷偷的咽下去。
      markup language 直翻是标记语言,其实更应翻译为增强语言。markup language标记语言不仅有符号解析的约定,还有符号展示方式的约定。所谓的展示方式具体来说就是符号(比如说文字)的大小、颜色、位置、背景、出场方式等,不同的展示方式给人不同的感官冲击力、从而达到不同的表达效果。例如Android中的xml就是一种标记语言。

      超文本标记语言(html5)是一种多类型信息的内容和展示方式的约定(协议),
我们平时看到的H5页面,它的源码就是按照H5协议书写的,用浏览器解析后就是我们看到的网页。

      谈到H5就不可避免聊到JavaScript。什么是Script,Script英文释义:a written text of a play, film/movie, broadcast, talk, etc.由此可见Script本意就是剧本,只是当时的翻译不懂,至于当时为啥命名为JavaScript据说为了蹭Java热度来增加自己知名度。
      在没有加入JS之前,H5是静态的,是一副定格了的风景,当有了剧本(JS)之后,H5中的对象便根据剧本来完成各自的表演,H5成了一场热闹的舞台剧。

      H5优势和缺点:因为H5不仅仅有文字、图片等信息,还包括这种文字、图片等的展示方式、比如布局、大小、背景等,所以H5页面优势就是更灵活、更方便的UI变化,但是H5在传输的时候就不仅要把信息(比如文字)传过来,还要把文字显示在哪里,大小、颜色这些值也传递过来。解析的时候,也不仅需要解析信息(比如文字)的语义还要解析文字的布局、颜色等展示方式,随着信息展示方式(比如说布局)的复杂度提升、总的信息传输量和解析时间都会大大增加
      本章开始讲到混合开发就是Native开发和H5开发的合作完成的,既然有合作,那么Native和H5之间就会有很多交流,接下来就谈谈如何完成“交流”的。

二 、原生与H5交互方案以及使用场景

      前面有谈到,通过浏览器可以将h5源码变成为我们看到h5页面(网页),那么原生中如果有一个类似于浏览器的类,我们就可以在原生中使用这个类来处理h5相关的事情,事实的确如此,这个类叫WebView。为了更深入的了解这种交互方案,我们先梳理下浏览器的基本功能。

浏览器基本功能

      我们用浏览器是这样的:输入一个url(统一资源定位符),比如百度首页https://www.baidu.com直接点击,然后浏览器就给我们一个丰富多彩的网页。其具体流程如下:
      1) 网络请求,从我们输入的地址获取到信息资料-h5源码;
      2 )把h5源码按照h5协议解析出来,浏览器这时候就知道标题该放哪里,背景什么样子,哪个信息是图片,图片该放在哪个位置,图片或者文字有没有什么入场动画等等。
      3)把刚才解析好的东西显示出来,显示就是绘制, 上一步解析后咱就胸中有画卷,那么现在就可以下笔如有神 ,显示用一个专业名词就是渲染。
      所以浏览器的基本功能是网络请求、页面源码解析、页面渲染。但是你还发现不同的浏览器还有其他一些很不错的功能,比如收藏网址、记录常用网站、网页截图等等来满足不同用户各种需求。为了种基础功能稳定,扩展功能丰富多彩,浏览器的基本功能和扩展功能分离了,基本功能被整合成为一个单独模块叫浏览器内核,它一般由一些实力比较强的公司提供,基本功能要保持稳定可靠嘛。
      浏览器内核=网络请求+解析+渲染(显示)
      其他的辅助功能,各个浏览器厂家就可以随意添加定制,就有了各种各样的浏览器。

原生与H5交互方案

      了解浏览器基本功能后,就很容易理解WebView,Webview是Android系统提供的一个内置浏览器对象类,它早期采用WebKit内核,这个内核也是苹果浏览器safari的内核,后来用上了自己在此基础上研发的内核。正是通过这个Android内置的浏览器,Android便可以很方便的展示H5页面,如下

 mWebView.loadUrl("https://www.baidu.com");

同时WebView也提供了丰富的接口去设置这个浏览器(比如WebView是否支持页面缩放等)和与原生进行数据交互
      讲到这里,你是不是有一个想法:既然在原生中增加一个实现浏览器的类就可以实现原生与H5交互,那么我是否可以不用原生的WebView呢?
      回答是Yes,你可以自己手写(大神可以)或者用三方的浏览器类库去完成这个任务,比如可以接入腾讯浏览器,它的内核x5是腾讯基于WebKit内核深度优化的,声称可以更快、更好、更安全,它的用法与WebView基本一样。

原生与H5交互使用场景

      前面有提到原生与H5的特点,原生就是与系统亲近但是不能跨平台,H5就是信息表现灵活,跨平台,但是相应的数据传输和解析会增加很多时间。所以混合开发场景大概如下:
      1 团队有很多业务已经是H5,而且业务页面变化也挺频繁;
      2 App有加载速度要求很不是很严格的页面,或者使用频率很低的页面;
      3 需要使用到移动端的相机,传感器等能力。
搞清楚了WebView是什么以及何时使用之后,我们便可以开始探讨:

三、WebView如何使用

      前文有讲到,WebView其实就是一个内置的浏览器,所以这里再次回想我们怎么用浏览器,比如这里以浏览器访问https://www.jianshu.com/p/c8262379c8ec(这是我一篇介绍网络层搭建的文章)为例:
      1 )打开浏览器
      2 )设置浏览器(省略则使用默认设置)
      3 )输入要访问地址:https://www.jianshu.com/p/c8262379c8ec
      4 )等待浏览器响应,当返回内容时候进行相关处理,比如观看,或者copy到自己个人笔记中。
      所以Webview使用也大概这几个步骤:
      1)WebView对象初始化,相当于打开浏览器;
      2)WebView设置,相当于设置浏览器;
      3)添加WebView一些通知事件,比如加载页面开始、加载页面完毕的通知、H5中JS相关事件的一些通知;
      4)添加Android与H5交互的方法,包括Android调用H5中的方法,H5中调用Android的方法;
      5)加载url,设置完毕开始去请求加载相关页面
具体使用见我的git库:https://github.com/kingkong-li/HighPerformanceWebView
这里面有很详细的注释帮你理解每一个步骤,并且可以下载后在AndroidStudio中可直接编译运行,如果你要做一个简单的混合开发,只需要修改下url就可以了。

四、混合开发的未来

      最后我们在这里探讨下混合开发的未来,特别是5G通信来了之后通信速度大大提升,加之手机性能过剩,之前原生的效果用H5实现就可以达到用户难以区分的程度。
      那么这时候是否意味着原生开发的消亡,纯WebApp大行其道?
      否也!!一方面基于本文前面提到的理论,离系统越近与系统越紧密,系统才越信任,才能给与更多的权限与本地能力,系统厂商不会拱手把自己本地能力暴露在网络大环境中,除了自己利益也是对用户安全负责。
      另一方面5G虽然来了,但是VR、AR、MR、感官共享、IOT等新领域技术对通信和本地硬件性能要求更是成吨增长,还是会存在通信和性能的限制,仅仅用Web开发也许还是玩不转。
      综上所述,个人认为混合开发才是未来。其中Native部分比重会下降并且更加注重于权限、系统能力获取、高性能部分,但由于高昂的费用,只有大公司才会采用原生开发。小公司则会利用大公司或者团体提供的App平台做一些跨平台的东西,比如当前已经成型的快应用、微信、支付宝、百家号等等。个人一些浅薄见解,欢迎大家一起来评论交流~

你可能感兴趣的:(围绕原生与H5交互实践聊聊Android混合开发)