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

目录

• app分类
• HyBird App(混合应用)
• JSBridge介绍
• 优势及应用场景
• JsBridge的核心
  • 1、Web端调用Native端代码
    • 1.1 拦截URL Schema
    • 1.2 注入api
  • 2、Native端调用Web端代码

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");

1. 通过注入的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>