hybrid技术

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yexudengzhidao/article/details/82811185

hybrid是什么?hybrid译为中文是“混合”的意思,是一种原生APP和HTML5混合开发的技术。

在前端移动端开发中,到现在阶段主要有三大潮流

  1. 原生APP开发(以Android和iOS为主导)
  2. HTML5 webAPP开发
  3. 原生APP和HTML5混合开发,也就是这里的hybrid技术

今天我们就来聊一聊hybrid技术
首先,为什么要有这个hybrid技术,当然是原生APP开发和web开发暴露出了问题。

  • 对于原生APP开发,开发成本高,周期长,维护成本高,并且当今社会处于高速信息发展时期,产品必须快速迭代,而且原生的APP都需要经过应用商店审核才能够上线,那么这对于企业来说,尤其是创业公司来说是不可以接受的,时间代表着金钱。
  • 对于以HTML5主导的webAPP开发,优点就是开发成本低,可以快速迭代,但是缺点也是相当明显,每次切换一个页面都要发送一次http(https)请求,从系统架构软件质量属性的性能来说,它是不可接受的,用户体验及其不友好。
  • 于是乎,基于原生APP和前端页面的hybrid技术火了起来。

那么hybrid技术是如何工作的呢?

首先,我们必须理解如下三个协议:
  1. file协议:用于打开本地文件,特点当然就是速度快。
  2. https协议:http+ssl协议,这个协议需要发送一次网络请求,当然相对于file协议就慢的很多了。
  3. schema协议:用于客户端和前端通讯的协议。微信部分schema协议如下(大家经常玩的朋友圈里面的链接打开的其实就是网页):
    在这里插入图片描述
其次,大家还要理解webview的概念。

那么什么是webview呢?其实就是一个用来存放文件的容器,我用下面图片的形式展示给大家:
在这里插入图片描述

红色框里的内容就是存放前端内容的容器,而红色框外面的为原生APP的东西。


好了,假如我在webview容器里直接通过file协议调用前端页面是不是比用HTML5发送HTTPS协议要快的多了呢。
在这里插入图片描述

那么接下来就是客户端如何和前端页面进行交互了,这就是前面的schema协议了。

这时候有的小伙伴可能就会问了,我用的hybrid技术开发的APP一天迭代一百次,怎么让用户同步更新呢?如下图所示:
在这里插入图片描述
我们可以用原生APP的API来发送一次网络请求来获取我们服务端页面的内容,这时小伙伴可能会有疑问了,你用HTML5不也是发送一次HTTPS请求吗,这样不也是很慢吗?NoNoNo,大家不要忘记JavaScript是一种解释型的语言,你请求来js文件之后还要解释执行。而你通过原生的APP可以在打开APP的同时就把服务器的页面请求过来然后再去执行本地js文件就OK了。
当然,这里的请求也是有技巧的,不是每一次打开APP都去服务端请求新的东西,只有服务端有新的东西变化时才去请求,这样又可以提高一部分效率了。
实现思路可以参考如下:只有用户版本号和服务器版本号不一致的时候才去请求。
在这里插入图片描述

好了,我简单的阐述完了混合APP内部是如何执行的以及原生APP和服务端之间的通信,估计也能够解决大家在打开原生APP发现切换页面的时候会有HTML5页面切换的疑问了。

当然hybrid技术也并不是完美的,就像“没有免费的午餐定理”一样,这个社会就是在矛盾中发展的,hybrid技术需要懂得原生APP开发、前端开发、后台开发才能进行完成,因此开发成本高、维护成本也高。

猜你喜欢

转载自blog.csdn.net/yexudengzhidao/article/details/82811185