# 混合开发
基于webview ui(jsBridge)
基于Native ui (react-native weex)
小程序
Hybird app本质:在原生app(native)中，使用webview作为容器，来承载一个web界面
JSBridge：一座js搭建的桥，一端是web，一端native；可以让native调用web的js代码，让web可以调用native的原生代码
<!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.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.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>
# Android
Native 提供给 WEB 调用的方法：
- androidTestFunction1(String str)
- 调用方式：
window.AndroidJSBridge.androidTestFunction1('xxxx')
- 入参类型：字符串
- 返回值：无
- 作用：以 alert 对话框的形式展示传的字符串内容
- androidTestFunction2()
- 调用方式：
window.AndroidJSBridge.androidTestFunction2()
入参类型：无
返回值：“androidTestFunction2方法的返回值”
作用：返回字符串 - “androidTestFunction2方法的返回值”
WEB 提供 Native 调用的方法：
- onFunction(str)
a. 注意事项：onFunction 必须绑定在 window 对象下
b. 调用方式：原生端调用
c. 返回值：“ onFunction 方法已经调用完成 ”
d. 作用：以 alert 的形式弹出原生端传入的字符串，同时返回数据。
# IOS
Native 提供给 WEB 调用的方法：
- iosTestFunction1(obj)
调用方式：window.webkit.message
.iosTestFunction1.postMessage({ key: value });
入参类型：object 对象
返回值：无法直接提供返回值
作用：以 alert 对话框的形式展示 msg 字段下的字符串内容
- iosTestFunction2(obj)
调用方式：window.webkit.message
.iosTestFunction2.postMessage({});
入参类型：object 对象
返回值：无法直接提供返回值
作用：回调网页端方法
WEB 提供 Native 调用的方法：
1、onFunctionIOS(str)
注意事项：onFunction 必须绑定在 window 对象下
调用方式：原生端调用
返回值：“onFunction 方法已经调用完成”
作用：以 alert 的形式弹出原生端传入的字符串，同时返回数据。