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的结果