混合开发概述

Posted on | In

混合开发概述

混合开发是什么

Hybrid App, 混合了Native技术和web技术进行开发的移动应用。

混合开发方案

  1. 基于WebView UI (JSBridge)
    JSBridge是原生端和web端通信端桥梁，通过JSBridge和App进行通信，完成web端和原生端通信。

  2. 基于Native UI (ReactNative, weex)
    赋予web原生能力的基础之上，进一步通过JSBridge解析虚拟节点素，传递到Native端，并使用原生进行渲染的解决方案。

  3. 小程序方案
    通过JSBridge实现，对JSBridge进行更加细致化对定制。隔离UI渲染层和JS逻辑层，形成特殊的开发环境，从而web和Native的融合程度，提高web端的执行性能。

  4. 总结：方案2和方案3都是基于方案1进行不同的封装思想实现，提高web和Native的融合程度。

Hybrid App的本质

在App中，使用WebView作为容器，承载一个web页面。JSBridge一座用JavaScript搭建起来的桥，一端是web，一端是Native端。目的web和Native端相互通信、相互调用。

Web调用Android

  • android构建 JSBridge 对象，这里提供的 JSBridge 字符串会被挂载到网页中的window 对象下面。还可以对

    1
    2
    3
    addJavascriptInterface(
      new MyJaveScriptInterface(mContext, this),
    "AndroidJSBridge");

  • Android 调用 onFunction 方法

    1
    2
    3
    4
    window.onFunction = function (str) {
      alert(str);
      return 'onFunction 方法已经调用完成';
    }

  • Web调用Android方法

    1
    window.AndroidJSBridge.androidTestFunction1(str);

Web调用IOS

  • OC注册供JS调用的方法，IOS 注入 jsbridge 对象名为 webkit
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // Web调用IOS方法
    window.webkit.messageHandlers.IOSTestFunction2.postMessage({});
    // IOS 回调 onFunctionIOS 方法
    window.onFunctionIOS = function (str) {
      alert(str);
      return 'onFunctionIOS 方法已经调用完成';
    }
    // 调用 IOS 方法2，通过postMessage传对象
    function onIOSFunction2 () {
      window.webkit.messageHandlers.IOSTestFunction2.postMessage({});
    }

Android和IOS的双向通信

相同点

  1. 都是通过WebView来完成网页的加载。

  2. 都是通过window注入对象的方式来提供被web端调用的方法。

  3. 都是可以直接调用web端挂载到window对象的方法。

不同点

  1. 注入对象不同：Android可提供注入对象名。IOS固定为webkit。

  2. JS调用Native的方法不同：面向Android可直接获取注入对象、方法。面对IOS相对固定写法window.webkit.messageHandlers.方法名.postMessage(入参对象)。

  3. 传递格式不同：面向Android只能接受基本类型数据，如果传对象，通过JSON.stringify()把对象转字符串。面向IOS可以接受任意类型数据。

  4. 返回值不同： 面向Android可以直接接受返回值。面向IOS没有直接获取返回值，通过回调方法获取。