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

code小生,一个专注 Android 领域的技术平台

公众号回复 Android 加入我的安卓技术群

作者：Simple_world
链接：https://www.jianshu.com/p/afb4872ffab0
声明：本文已获Simple_world授权发表，转发等请联系原作者授权

背景介绍

如果你的团队有自己维护的网站，现在想拓展业务使用场景快速做一个移动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平台做一些跨平台的东西，比如当前已经成型的快应用、微信、支付宝、百家号等等。

个人一些浅薄见解，欢迎大家一起来评论交流~

推荐阅读

对于 Android 业务开发的一些理解总结

如何衡量一个 Android 应用开发人员的能力？

Kotlin Multiplatform - 下一代全平台开发技术

fluter该学学了，不是为了用