Hybrid技术原理1. 目前主流的混合开发方案 2. Hybrid技术原理该文件中构建了一个AndroidJSBr

1. 目前主流的混合开发方案

现有混合开发框架：RN/weex/flutter/小程序/移动应用混合开发框架/PWA
混合开发：Hybrid App 混合了Native（原生）技术和web技术进行开发的移动应用
流行的混合开发方案
- 基于WebView UI（JSBridge）
- 基于Native UI（RN、weex）
- 小程序方案（微信、支付宝小程序）

2. Hybrid技术原理

2.1 Hybrid的本质

Hybrid App本质
- 在原生Native APP中使用WebView作为容器，来承载一个web页面
Hybrid App核心
- 在原生Native和web端的双向通讯层（跨语言解决方案）JSBridge
JSBridge
- 定义：一座用js搭建的桥，连接了web端和原生端
- 目的：让Native可以调用web的JS代码，让web可以调用Native的原生代码
层次关系：手机设备=> Native App => WebView <=JSBridge=> Web网页

2.2 Android与Web通讯

2.2.1 Android代码内容

引入tx-webview https://x5.tencent.com/
- HybridAppDemo/app/src/main/java/cn/sunday/hybridappdemo/MyApplication.java
- HybridAppDemo/app/src/main/java/cn/sunday/hybridappdemo/views/X5WebView.java
  - 该文件中构建了一个AndroidJSBridge对象以供调用，构建 JSBridge 对象，这里提供的 JSBridge 字符串会被挂载到，网页中的 window 对象下面。
JSBridge包装的网页端调用Native端方法
- HybridAppDemo/app/src/main/java/cn/sunday/hybridappdemo/jsInterface/MyJaveScriptInterface.java
页面 activity_main,Native调用web端方法
- HybridAppDemo/app/src/main/java/cn/sunday/hybridappdemo/MainActivity.java

2.2.2 Android配置路径访问http

安装http-server / anywhere 启动http服务 (win10下http-server有问题)
- npm install http-server -g / npm install anywhere -g
- 切换到对应文件夹下，执行http-server / anywhere
配置路径
- HybridAppDemo/app/src/main/java/cn/sunday/hybridappdemo/constants/Constants.java
安全访问中配置ip
- HybridAppDemo/app/src/main/res/xml/network_security_config.xml

2.2.3 Android与web互相调用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input
      type="button"
      value="js调用android方法1"
      onclick="onAndroidFunction1('js调用android方法1')"
    />
    <input
      type="button"
      value="js调用android方法2"
      onclick="onAndroidFunction2()"
    />
    <br />
    <input
      type="button"
      value="js调用IOS方法1"
      onclick="onIOSFunction1('js调用ios方法1')"
    />
    <input type="button" value="js调用IOS方法2" onclick="onIOSFunction2()" />

    <script>
      // 调用 Android 方法1
      function onAndroidFunction1(str) {
        //window.AndroidJSBridge.方法
        window.AndroidJSBridge.androidTestFunction1(str);
      }

      // 调用 Android 方法2
      function onAndroidFunction2() {
        var result = window.AndroidJSBridge.androidTestFunction2();
        alert(result);
      }

      // Android 调用 onFunction 方法
      window.onFunction = function (str) {
        alert(str);
        return "onFunction 方法已经调用完成";
      };

      // ----------------------

      // 调用 IOS 方法1
      function onIOSFunction1(str) {
        // window.webkit.messageHandlers.方法名.postMessage(参数) 调用
        window.webkit.messageHandlers.IOSTestFunction1.postMessage({
          msg: str,
        });
      }

      // 调用 IOS 方法2
      function onIOSFunction2() {
        window.webkit.messageHandlers.IOSTestFunction2.postMessage({});
      }

      // IOS 回调 onFunctionIOS 方法
      window.onFunctionIOS = function (str) {
        alert(str);
        return "onFunctionIOS 方法已经调用完成";
      };
    </script>
  </body>
</html>

2.3 IOS与Web通讯

2.3.1 IOS代码内容

IOSHybridAppDemo/IOSHybridAppDemo/ViewController.m

2.3.2 IOS配置路径访问http

配置路径
- IOSHybridAppDemo/IOSHybridAppDemo/常量/Constants.h

2.3.3 IOS与web互相调用

2.4 Android / IOS与Web通讯对比

相同点
- 都是通过WebView来完成网页加载，无论安卓中使用tx的x5-WebView，还是IOS的wkWebview，都是加载网页的载体，浏览器
- 都是通过Window注入对象的方式来提供可被Web端调用的方法
- 都可以直接调用Web端挂载到window对象下的方法
不同点
- 注入对象不同，Android可提供注入对象名（AndroidJSBridge），IOS固定为webkit
- JS调用Native方法不同，面向安卓可直接获取注入对象，调用方法，面向IOS为相对固定写法（window.webkit.messageHandlers.方法名.postMessage(参数)）
- 传递数据的格式不同，安卓只接受基本类型数据，JSON转换才可以，IOS可以传递任意数据类型
- 返回值不同，面向安卓可以直接接收返回值，面向IOS无法直接获取返回值