混合开发按html5开发与混合原生开发通常分为什么类型

转载

lanhy 2024-10-02 10:11:30

文章标签 Android ios web端 文章分类 HTML5 移动开发

文章目录

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. 流行的混合开发方案

基于WebView UI – 最初/最核心的方案，主要通过JSBridge来完成web端和 native端的通信，从而赋予web端原生的能力；JSBridge 是原生端和 web端通信的桥梁
基于Native UI – 典型的有ReactNative 和 weex,通过赋予web 原生能力基础上，进一步通过JSBridge将js解析成虚拟机链数来传递到native端，并使用原生去渲染的解决方案
小程序方案 – 微信、支付宝小程序，也是通过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机制来完成的。

手机中有个自己开发的程序Native App
Native App 中所有的业务和 ui效果都是通过网页来进行展示的，所有需要有一个可以承载网页的容器（就类似电脑里有个浏览器用来去展示网页）这个容器就是webView；

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) 是谷歌提供的安卓的代码编辑器，配置时需要上网

JDK 安装 – AS 要求我们必须安装1.8以上的JDK
下载JDK: https://www.oracle.com/cn/java/technologies/javase/javase-jdk8-downloads.html
环境变量配置（只针对 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验证环境变量有没有配对

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

给安卓端提供一个网页访问地址

安装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的双向通讯对比

相同点：

都是通过webView 来完成网页的加载（安卓用的X5wevview,ios用的WKwebview,都是网页的载体，加载网页的app浏览器）
都是通过向Window注入对象的方式来提供可被web端调用的方法 – web调用原生方法
都可以直接调用 Web 端挂载到 window 对象下的方法 – 原生调用web方法

不同点：

注入对象不同：都是向window上挂载注入对象，Android 可提供注入对象名称。IOS 固定为 webkit
JS 调用 Native 方式不同：面向 Android 可直接获取注入对象，调用方法window.AndroidJSBridge.方法名(基本类型的参数);。面向 IOS 为相对固定写法（window.webkit.messageHandlers.方法名.postMessage(入参对象)）
传递数据格式不同：android 只能接收基本数据类型参数 ，不能接收引用类型的数据（Object、Array），而传递给ios的参数可以是引用类型的任意类型数据
返回值不同：面向== Android 可以直接接收返回值==。面向 IOS 没有办法直接获取返回值–可以通过回调方法的方式进行获取。
ios 不能提供返回值，所以可以在web 调用ios的方法1后，在ios方法1里调用web的方法，传递参数，来告诉web调用方法1的结果