【混合开发】- 1、技术原理

文章目录

    • 1.关于混合开发
      • 1-1. 什么是混合开发
      • 1-2. 流行的混合开发方案
    • 2. 混合开发app 的本质
      • 2-1. Hybrid App 混合开发app 的本质
      • 2-2. 什么叫做JSBridge
      • 2-3. webView
    • 3. Android 与 web 通信 -- 安卓中js 和 原生的相互调用--了解
      • 3-1. Android Studio - 安装配置流程
      • 3-2 安卓 与 web 通信
      • 3-3. npm 安装 与 http-server
      • 3-4. 安卓 与 web的相互调用
    • 4. IOS 与 web 通信
      • 4-1.IOS的代码运行
      • 4-2. ios 和 web 的相互调用
      • 4-3. 安卓 与 ios的双向通讯 对比

1.关于混合开发

1-1. 什么是混合开发

混合开发(Hybrid App)是一种开发模式,混合了Native(原生)技术和web技术进行开发的移动应用

1-2. 流行的混合开发方案

  1. 基于WebView UI – 最初/最核心的方案,主要通过JSBridge来完成web端 和 native端的通信,从而赋予web端原生的能力;JSBridge 是原生端 和 web端通信的桥梁
  2. 基于Native UI – 典型的有ReactNative 和 weex,通过赋予web 原生能力基础上,进一步通过JSBridge将js解析成虚拟机链数来传递到native端,并使用原生去渲染的解决方案
  3. 小程序方案 – 微信、支付宝小程序,也是通过JSBridge来实现的,只不过对JSBridge进行了更加细致的定制,并隔离了js逻辑层和ui的渲染层,形成了特殊的开发环境;从而加强了web 和native的融合程度,提高了web端的执行性能

总结:上述3中方案都是通过JSBridge 来完成通信的,2、3方案是在1方案的基础上,通过不同的封装思想提高了web 和 native的融合程度


2. 混合开发app 的本质

2-1. Hybrid App 混合开发app 的本质

  • 在原生(Native) APP 中,使用 WebView 作为容器,来承载一个 web 页面

  • 所以混合开发的本质是:原生(Native)和 web 端的双向通讯层(跨语言解决方案)– JSBridge

    所有的ui 和逻辑都在web 完成
    在上架商城的时候,苹果商城中:原生ui 和 web ui 的比重大概2:8 ,当然根据情况可以有所调整

2-2. 什么叫做JSBridge

定义:一座用 JavaScript 搭建起来的桥,一端是 web ,一端是 Native

目的:让 Native 可以调用 Web 的 JavaScript 代码,让 web 可以调用 Native 的原生代码

而实现JSBridge 的关键是原生端的容器:webView, JSBridge的一切原理都是基于webView机制来完成的。

  1. 手机中有个自己开发的程序Native App
  2. Native App 中所有的业务 和 ui效果都是通过网页来进行展示的,所有需要有一个可以承载网页的容器(就类似电脑里有个浏览器用来去展示网页)这个容器就是webView;
    【混合开发】- 1、技术原理_第1张图片

2-3. webView

webView在app里可以被当作是展示网页的浏览器,所以网页的内容都会通过webView去 进行展示,从而完成app需要展示的ui 和 业务逻辑;
但是因为有一些原生的特性功能,eg:原生端提供的数据存储,录音,摄像头等是没办法通过web端的js代码来调用,所以我们需要有一个桥JSBridge,来1.通知原生端 web需要调用原生的哪些功能 2.原生端告诉web端调用原生功能后的结果


3. Android 与 web 通信 – 安卓中js 和 原生的相互调用–了解

3-1. Android Studio - 安装配置流程

Android Studio(简称AS) 是谷歌提供的安卓的代码编辑器,配置时需要上网

  1. JDK 安装 – AS 要求我们必须安装1.8以上的JDK
    下载JDK: https://www.oracle.com/cn/java/technologies/javase/javase-jdk8-downloads.html

  2. 环境变量配置(只针对 windows 用户),mac 不需要配置环境变量

    计算机-系统属性-高级系统设置-高级-环境变量: 修改系统环境变量

  • 新建系统环境变量 JAVA_HOME,变量值为 JDK 安装路径
  • 在 path 变量内容的尾部增加: %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
  • 新建系统环境变量 CLASSPATH,变量值为: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

配置完后,在cmd 命令行中,输入java -version验证环境变量有没有配对

  1. Android studio 下载

官方地址:https://developer.android.com/studio

国内地址:http://www.android-studio.org/index.php

3-2 安卓 与 web 通信

注意:

  • 原生端调用web方法,web方法必须是挂载到web端的window对象上的方法

  • 安卓端构建JSBridge 对象后,会将JSBridge字符串挂载到网页中的window对象下面
    网页中可以通过window.AndroidJSBridge 拿到注入的JSBridge对象,从而调用安卓端提供给web的方法

3-3. npm 安装 与 http-server

  1. 给安卓端提供一个网页访问地址
  • 安装node 环境
  • npm install http-server -g 安装http-server后
  • cd 到项目地址后, http-server启动http 服务

注意:win10系统上,http-server 会有问题,可以使用anywhere – 也是随启随用的静态文件服务器,可以随时随地将当前目录变成一个静态文件服务器的根目录

  • web端把可访问的网页地址给到安卓,安卓做如下修改,就可在安卓端查看web页面了
public class Constants {

    /**
     * 在 android 9.0 的设备上,如果要加载 http 协议的网页,
     * 那么需要对 app 进行安全访问设置。
     * 网页加载路径
     */
    public static final String WEB_URL = "http://192.168.0.100:8080/";
}

3-4. 安卓 与 web的相互调用

<body>
    <input type="button" value="js调用android方法1" onclick="onAndroidFunction1('js调用android方法1')">
    <input type="button" value="js调用android方法2" onclick="onAndroidFunction2()">

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

        // web调用 Android 方法2
        function onAndroidFunction2 () {
            var result = window.AndroidJSBridge.androidTestFunction2();
            alert(result);  //安卓端给的返回值
        }

        // Android 调用web的 onFunction 方法
        //web 定义的方法,挂在window上,安卓原生端可以调用这个方法
        window.onFunction = function (str) {
            alert(str);
            return 'onFunction 方法已经调用完成';
        }

    script>

body>
html>

4. IOS 与 web 通信

IOS 与 web 的双向通信 也是:通过webView组件,向window中注入了一个JSBridge 对象,web端通过这个JSBridge 来调用原生端提供的方法

4-1.IOS的代码运行

  • IOS的代码运行,必须使用macos系统,用windows不行
  • 安装Xcode 编译器,不需要进行配置就能运行ios代码
  • app store中安装Xcode

4-2. ios 和 web 的相互调用

<body>
    <input type="button" value="js调用IOS方法1" onclick="onIOSFunction1('js调用ios方法1')">
    <input type="button" value="js调用IOS方法2" onclick="onIOSFunction2()">

    <script>
        // web调用 IOS 方法1 :  
        //调用方法:window.webkit.messageHandlers.方法()
        //传递参数:如果要传递参数,必须用postMessage(),window.webkit.messageHandlers.方法.postMessage(参数)
        function onIOSFunction1 (str) {
            
            window.webkit.messageHandlers.IOSTestFunction1.postMessage({
                msg: str
            });
        }
        
        // 调用 IOS 方法2
        function onIOSFunction2 () {
            
            window.webkit.messageHandlers.IOSTestFunction2.postMessage({});
        }

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

4-3. 安卓 与 ios的双向通讯 对比

  • 相同点:
  1. 都是通过webView 来完成网页的加载(安卓用的X5wevview,ios用的WKwebview,都是网页的载体,加载网页的app浏览器)
  2. 都是通过向Window注入对象的方式 来 提供可被web端调用的方法 – web调用原生方法
  3. 都可以直接调用 Web 端挂载到 window 对象下的方法 – 原生调用web方法
  • 不同点:
  1. 注入对象不同:都是向window上挂载注入对象,Android 可提供注入对象名称。IOS 固定为 webkit
  2. JS 调用 Native 方式不同:面向 Android 可直接获取注入对象,调用方法window.AndroidJSBridge.方法名(基本类型的参数);。面向 IOS 为相对固定写法(window.webkit.messageHandlers.方法名.postMessage(入参对象)
  3. 传递数据格式不同android 只能接收基本数据类型参数 ,不能接收引用类型的数据(Object、Array),而传递给ios的参数可以是引用类型的任意类型数据
  4. 返回值不同:面向== Android 可以直接接收返回值==。面向 IOS 没有办法直接获取返回值–可以通过回调方法的方式进行获取
    ios 不能提供返回值,所以可以在web 调用ios的方法1后,在ios方法1里调用web的方法,传递参数,来告诉web调用方法1的结果

你可能感兴趣的:(Hybird,App)