一、 Android授舟、IOS的雙向通信對(duì)比-相同點(diǎn)
1释树、都是通過(guò)WebView來(lái)完成頁(yè)面加載的
2奢啥、都是通過(guò)向Window注入對(duì)象的方式來(lái)提供可被Web端調(diào)用的方法
3嘴拢、都是直接調(diào)用Web端掛載到window對(duì)象下的方法
一、 Android、IOS的雙向通信對(duì)比-不同點(diǎn)
1弊攘、注入對(duì)象不同：Android 可提供注入對(duì)象名襟交。IOS固定為webkit
2、JS調(diào)用Native方式不同：面向Android可以直接獲取注入對(duì)象啼染，調(diào)用方法面向IOS為相對(duì)固定的寫法（window.webkit.messageHandlers.方法名.postMessage(入?yún)?duì)象)）
3、傳遞數(shù)據(jù)格式不同：面向Android只能接受基本數(shù)據(jù)類型數(shù)據(jù)卦洽。面向IOS可以接受任意類型數(shù)據(jù)斜棚。
4、返回值不同：面向Android可以直接接受返回值蚤霞。面向IOS沒(méi)有辦法直接獲取返回值昧绣。
三捶闸、Android與Web端的雙向通信
1鉴嗤、向原生端傳遞參數(shù)
??????在原生端通過(guò)自定義的AndroidJSBridge向網(wǎng)頁(yè)端的window對(duì)象中注入方法，然后通過(guò)window.AndroidJSBridge.androidTestFunction1('xxxx')的方式調(diào)用兔簇，實(shí)現(xiàn)通信垄琐。調(diào)用的時(shí)候经柴，可以為原生端的方法傳遞必要的參數(shù)。
android端
/**
*
* window.AndroidJSBridge.androidTestFunction1('xxxx')
* 調(diào)用該方法翻擒，APP 會(huì)彈出一個(gè) Alert 對(duì)話框牛哺，
* 對(duì)話框中的內(nèi)容為 JavaScript 傳入的字符串
* @param str android 只能接收基本數(shù)據(jù)類型參數(shù)
* ，不能接收引用類型的數(shù)據(jù)（Object巩趁、Array）淳附。
* JSON.stringify(Object) -> String
*/
@JavascriptInterface
public void androidTestFunction1 (String str) {
AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
builder.setMessage(str);
builder.setNegativeButton("確定", null);
builder.create().show();
}
web端
<input
type="button"
value="調(diào)用toAndroidFunction1"
onClick="toAndroidFunction1()"
/>
<script>
// 調(diào)用 Android Function1
function toAndroidFunction1() {
window.AndroidJSBridge.androidTestFunction1(
"調(diào)用 Android 下的function1 方法"
);
}
</script>
2、原生返回值給網(wǎng)頁(yè)端
??????除了給原生端的方法傳遞參數(shù)别凹，原生端還可以直接為我們web端返回值。
android 端
/**
* 調(diào)用該方法到涂，方法會(huì)返回一個(gè)返回值給 javaScript 端
* @return 返回值的內(nèi)容為："androidTestFunction2方法的返回值"
*/
@JavascriptInterface
public String androidTestFunction2 () {
return "androidTestFunction2方法的返回值";
}
web端
<input
type="button"
value="調(diào)用toAndroidFunction2"
onClick="toAndroidFunction2()"
/>
<script>
// 調(diào)用 Android Function2
function toAndroidFunction2() {
var result = window.AndroidJSBridge.androidTestFunction2();
alert(result);
}
</script>
3践啄、Android端直接調(diào)用web端的方法
??????android端可以直接調(diào)用web端掛載到window對(duì)象下的方法屿讽。
android 端
/**
* 原生端調(diào)用 web 方法伐谈，方法必須是掛載到 web 端 window 對(duì)象下面的方法试疙。
* 調(diào)用 JS 中的方法：onFunction
*/
public void onJSFunction1 (View v) {
mWebView.evaluateJavascript("javascript:onFunction('android調(diào)用JS方法')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder.setMessage(s);
builder.setNegativeButton("確定", null);
builder.create().show();
}
});
}
web 端
// 原生端調(diào)用網(wǎng)頁(yè)端的方法
window.onFunction = function (str) {
alert(str);
return "這是 onFunction 方法的返回值";
};
三祝旷、IOS與Web端的雙向通信
1怀跛、js調(diào)用OC定義的方法
??????js直接調(diào)用OC定義的方法時(shí)吻谋，調(diào)用的方式跟Android相似，執(zhí)行IOS中會(huì)將方法掛載在網(wǎng)頁(yè)指定的window.webkit的對(duì)象下面,而不是跟andorid一樣需要自定義JSBridge阁最。與 Android 不同骇两，IOS可以直接接收一個(gè)對(duì)象Object數(shù)據(jù)脯颜。
OC端
//OC在JS調(diào)用方法做的處理
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
//前端主動(dòng)JS發(fā)送消息栋操，前端指令動(dòng)作
if ([@"IOSTestFunction1" isEqualToString:message.name]) {
[self IOSTestFunction1:message.body];
} else if ([@"IOSTestFunction2" isEqualToString:message.name]) {
[self IOSTestFunction2:message.body];
}
}
#pragma mark - 與 Android 不同，IOS可以直接接收一個(gè)對(duì)象Object數(shù)據(jù)
- (void)IOSTestFunction1:(id)body {
NSDictionary *dict = body;
NSString *msg = [dict objectForKey:@"msg"];
UIAlertController * alertController = [UIAlertController alertControllerWithTitle:@"提示" message:msg preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction * action = [UIAlertAction actionWithTitle:@"確認(rèn)" style:UIAlertActionStyleDefault handler:nil];
[alertController addAction:action];
[self presentViewController:alertController animated:YES completion:nil];
}
web端
<input
type="button"
value="調(diào)用toIosFunction1"
onClick="toIOSFunction1()"
/>
<script>
// 調(diào)用 IOS Function1
function toIOSFunction1() {
var obj = {
msg: "web 調(diào)用IOS toIOSFunction1.postMessage(obj)",
};
window.webkit.messageHandlers.IOSTestFunction1.postMessage(obj);
}
</script>
2、OC不能直接返回值給web端
??????oc端不能直接返回給web端剔宪，要實(shí)現(xiàn)類似與Android那樣的功能，我們可以通過(guò)在OC端調(diào)用web預(yù)先掛載好的方法感帅，實(shí)現(xiàn)相應(yīng)業(yè)務(wù)失球。OC端可以接受掛載在window下邊方法返回的直接。如下代碼onFunctionIOS所示：
OC端
#pragma mark - 調(diào)用該方法帮毁，回調(diào) web 端 onFunctionIOS 方法，并傳遞字符串
- (void)IOSTestFunction2:(id)body {
[self.webView evaluateJavaScript:@"onFunctionIOS('IOSTestFunction2方法執(zhí)行完成')" completionHandler:^(id result, NSError * _Nullable error) {
NSLog(@"%@", result);
}];
}
web端
<input
type="button"
value="調(diào)用toIosFunction2"
onClick="toIOSFunction2()"
/>
<script>
// 調(diào)用 IOS Functio2
function toIOSFunction2() {
window.webkit.messageHandlers.IOSTestFunction2.postMessage({});
}
// IOS 回調(diào) web的方法
window.onFunctionIOS = function (str) {
alert(str);
return "onFunctionIOS 執(zhí)行完成黔牵！";
};
</script>
