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

 3 total views,  1 views today

页面下部广告