HyBird App(混合应用)核心原理JSBridge

app分类

1. Native App(原生应用)
2. Web App(网页应用)
3. HyBird App(混合应用)

HyBird App(混合应用)

Hybrid利用JSBridge进行通信
优点：随时发版，不受应用市场审核限制；拥有几乎和Native一样的能力，如：拍照、存储、加日历等等...

缺点：H5有的缺点他几乎都有，比如性能差、JS执行效率低等等。

JSBridge介绍

给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能,(摄像头，地理定位...)。
让native可以调用web的js代码，让web可以调用原生的代码，实现双向的消息通信的通道，它在做native代码和js代码相互转换的事情。

双向通信的通道:
JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。
Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

数据间的通讯关键是以下两点：
将Native端的接口封装成js接口
将Web端js接口封装成原生接口

总结

• js调用原生代码
• 原生调用js
  

优势及应用场景

• 因为Web端支持JavaScript，而Native(iOS/Android)端的Webview控件对JavaScript也有所支持，页面加载完成后调用页面的JavaScript代码。
• 通过Webview可以类似于iframe把我们的页面嵌入到原生Native中进行控制。
• 由于Webview内嵌H5的性能/功能各种受限。于是有了各种的混合开发模式(Hybrid App)混合使用Native和Web技术解决方案，例如：Hybrid、RN、WEEX、Flutter、小程序、快应用等等。

JsBridge的核心

1、Web端调用Native端代码

1. 拦截Url
   • URL Schema， 客户端通过拦截webview请求来完成通讯
   • URL Schema(类URL的请求格式，如：<protocol>://<host>/<path>?<query>)
2. 注入API
   • native向webview中的js执行环境, 注入API, 以此来完成通讯。

1.1 拦截URL Schema

当Web端要请求Native端的方法时，我们首先要自定义一个URL Schema，向Native端发起一个请求，最后在Native端的WebView进行监听。
它类似于我们常见的url，区别在于protocol域名 和 host协议 一般是自定义的
自定义通信的URL schema

jsbridge://<method>?<params> jsbridge://showToast?text=hello&a=b

流程：web端发送URL Schame请求如（jsonp）可以携带参数，native端进行相应处理

发送URL schema请求
向Native端发起请求：

<script>     function showNativeDialog(text) {         window.alert('jsbridge://showToast?text=' + text);     } </script>

Native端实现监听

 webView.setWebChromeClient(new WebChromeClient() {         @Override         public boolean onJsAlert(WebView view, String url, String message, JsResult result) {             if (!message.startsWith("jsbridge://")) {                 return super.onJsAlert(view, url, message, result);             }              UrlSchema urlschema = new UrlSchema(message);             if ("showToast".equals(urlchema.getMethodName())) {                 String text = urlschema.getParams("text");                 Toast.makeText(mContext, text, Toast.LENGTH_LONG).show();             }              result.confirm();             return true;         }     }

1.2 注入api

Native端通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象。
在Web中通过注入的对象调用Native方法。

1. 向WebView注入JS对象
   创建一个JS对象，并实现监听的方法

class NativeBridge{     private Context context;      NativeBridge(Context context){         this.context = context;     }      @JavascriptInterface     public void showNativeDialog(String text){         Toast.makeText(context,text,Toast.LENGTH_LONG).show();     } }

Native端通过WebView的接口注入JS对象

webView.addJavascriptInterface(new NativeBridge(mContext),"NativeBridge");

2. 通过注入的JS对象调用Native代码
   Web中获取JS对象，调用Native代码

<script>     function showNativeDialog(text) {         //window.alert('jsbridge://showToast?text=' + text);         window.NativeBridge.showNativeDialog(text);     } </script>

2、Native端调用Web端代码

WebView是Native中加载网页的一个控件，该组件提供一个evaluateJavascript()方法运行JS代码。我们要做的是在Native端执行一个js方法，在Web端进行监听

Native端
Android

mWebView.evaluateJavascript("window.showWebDialog('123')", new ValueCallback() {         @Override         public void onReceiveValue(String value) {             //这里的value即为对应JS方法的返回值         } });

H5端

<script>     window.showWebDialog = text => window.alert(text); </script>