Hybrid混合开发与JSBridge

目录

Hybrid

引言

优点

原理

JSBridge

定义 

用途 

JSBridge 双向通信原理   

原理图 

总结 

---

Hybrid

引言

        首先，混合开发（Hybrid App），是一种开发模式，指使用多种开发模型开发App。那为什么会需要混合开发这种模式呢？当然是有其出现的必然性，就好比杂交水稻才是yyds。该模式混合使用了原生Native App（可以理解为端上 iOS 和 Android）和 Web （H5）App 技术开发来实现同一个应用。你问我这俩者有什么特点？ 

优点

        俩者的结合就是 Hybrid 它同时采用网页语言与程序语言进行开发，通过不同的应用商店进行打包与分发，相比原生APK size更小且跨平台性优还容易维护；在开发过程中同时使用了网页语言，所以开发成本、周期与难度大大降低。而混合开发时，Native、Web相互通信离不开JSBridge！

原理

        Hybrid App 融合 Web App的原理就是引入一个WebView组件，可以在这个组件中载入HTML页面做UI呈现（部分的），通过JsBridge 实现业务层与界面层的数据通讯、逻辑调用。

WebView：是移动端提供的运行JavaScript的环境，用于加载h5页面，即一个小型的浏览器内核;作为系统渲染Web网页的一个控件容器 

实现方法

• 前端做好静态页面（html js css），将文件交给客户端
• 客户端拿到前端静态页面，以文件形式存储在app中
• 客户端在一个webview中
• 使用file协议加载静态页面

JSBridge

定义 

        它并非是一种具体的手段，而是一种通信机制，它以js引擎或webview容器为媒介进行协议约定进行一个双向通信。在开发过程中，往往原生开发会与前端开发做出一个类似于接口文档形式的API使用文档的东西，根据文档来进行协助，即原生开发只注重如何封装成JS接口，然后给webview容器注入，而前端开发只要清楚调用即可。

用途 

        主要是 给 JavaScript 提供调用 Native 功能的接口，让混合开发中的『前端部分』可以方便地使用地址位置、摄像头甚至支付等 Native 功能；核心是 构建 Native 和非 Native 间消息通信的通道，而且是 双向通信的通道。   

JSBridge 双向通信原理   

 a. H5 调用 Native

      1 拦截 Webview请求的URL SCHEME                        

URL Schema是类URL的一种请求格式，

即 ：:///? ，

如："jsbridge://getUserInfo?a=1&b=2" ，当然 协议头 是自定义的，不一定非要是 jsbridge

原理图：

 

原生移动端是可以拿到我们发出的任何一个请求的，他们会对这些请求进行处理，如果带上 协议头 后就进行拦截处理：

• 如果符合自定义的URL Schema，对URL进行解析，拿到相关操作，进而调用原生Native的方法

• 如果不符合自定义的URL Schema，接转发，请求真正的服务

 该方法有一定缺陷：

        URL是有长度限制的，可以通过扩展 ajax post 方式来解决URL长度问题但这样相对于使用方式又受到了限制；创建请求需要一定的耗时，比注入 API 的方式调用同样的功能，耗时会较长。

    2 注入API

        通过webView提供的接口，App将Native的相关接口注入到JS的Context（window）的对象中，一般来说这个对象内的方法名与Native相关方法名是相同的，Web端就可以直接在全局window下使用这个暴露的全局JS对象，进而调用原生端的方法。

        通常我们主要会选择使用DSBridge库，它是一个三端易用的现代跨平台 JSBridge，支持以类的方式集中统一管理API，同时还支持同步调用和异步调用。                

b. Native 调用 H5

        Native 调用 JavaScript，就是将拼接的JavaScript代码字符串，传入JS解析器执行，（JS解析器在这里就是webView）从外部调用 JavaScript 中的方法，因此 JavaScript 的方法必须在全局的 window 上。相比于 JavaScript 调用 Native， Native 调用 JavaScript 较为简单，毕竟不管是 iOS 的 UIWebView 还是 WKWebView，还是 Android 的 WebView 组件，都以子组件的形式存在于 View/Activity 中，直接调用相应的 API 即可。

原理图 

   

总结 

        目前，很多大厂的app例如淘宝、今日头条和微信等都采用了混合开发的模式，并构建建自己的Hybrid框架，并且各公司架构师会开发自己的JSBridge， 并配合与H5互相调用的相关文档。