Hybrid技术原理

举报
坚果的博客 发表于 2022/02/27 11:15:41 2022/02/27
【摘要】 随着Web技术的发展和移动互联网的发展,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式:Hybrid APP。Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢?Hybrid App(混合模式移动应用)是指...

随着Web技术的发展和移动互联网的发展,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式:Hybrid APP。Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢?

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具" Native App良好用户交互体验的优势 “和” Web App跨平台开发的优势 "。

Hybrid技术原理

image.png

作为一种混合开发的模式,Hybrid APP底层依赖于Native提供的容器(UIWebview),上层使用Html&Css&JS做业务开发,底层透明化、上层多多样化,这种场景非常有利于前端介入,非常适合业务快速迭代,于是Hybrid火啦。总的来说,就是既具有APP的体验和性能,又具有Web灵活的开发模式和跨平台开发能力。

Hybrid的本质

  • Hybrid App本质

    • 在原生Native APP中使用WebView作为容器,来承载一个web页面
  • Hybrid App核心

    • 在原生Native和web端的双向通讯层(跨语言解决方案)JSBridge
  • JSBridge

    • 定义:一座用js搭建的桥,连接了web端和原生端
    • 目的:让Native可以调用web的JS代码,让web可以调用Native的原生代码

image.png

image.png

只有在了解了其最本质的实现原理后,才能对这套方案进行实现以及进一步的优化,
混合开发,也就是半原生半 Web 的开发模式,由原生提供统一的 API 给 JS 调用,实际的主要逻辑有 Html 和 JS 来完成,最终是放在 webview 中显示的,所以只需要写一套代码即可达到跨平台效果。

Hybrid App 兼具了 Native APP 用户体验佳、系统功能强大和 Web APP 跨平台、更新速度快的优势。本质其实是在原生的 App 中,使用 WebView 作为容器直接承载 Web 页面。因此,最核心的点就是 Native 端 与 H5 端 之间的双向通讯层,也就是我们常说的 JSBridge

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200