webapp 跨ios android,Hybird App中 Android 和 IOS 与网页之间的通信

一、 Android、IOS的双向通信对比-相同点

1、都是通过WebView来完成页面加载的

2、都是通过向Window注入对象的方式来提供可被Web端调用的方法

3、都是直接调用Web端挂载到window对象下的方法

一、 Android、IOS的双向通信对比-不同点

1、注入对象不同：Android 可提供注入对象名。IOS固定为webkit

2、JS调用Native方式不同：面向Android可以直接获取注入对象，调用方法面向IOS为相对固定的写法(window.webkit.messageHandlers.方法名.postMessage(入参对象))

3、传递数据格式不同：面向Android只能接受基本数据类型数据。面向IOS可以接受任意类型数据。

4、返回值不同：面向Android可以直接接受返回值。面向IOS没有办法直接获取返回值。

三、Android与Web端的双向通信

image.png

1、向原生端传递参数

在原生端通过自定义的AndroidJSBridge向网页端的window对象中注入方法，然后通过window.AndroidJSBridge.androidTestFunction1('xxxx')的方式调用，实现通信。调用的时候，可以为原生端的方法传递必要的参数。

android端

/**

*

* window.AndroidJSBridge.androidTestFunction1('xxxx')

* 调用该方法，APP 会弹出一个 Alert 对话框，

* 对话框中的内容为 JavaScript 传入的字符串

* @param str android 只能接收基本数据类型参数

* ，不能接收引用类型的数据(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端

type="button"

value="调用toAndroidFunction1"

onClick="toAndroidFunction1()"

/>

// 调用 Android Function1

function toAndroidFunction1() {

window.AndroidJSBridge.androidTestFunction1(

"调用 Android 下的function1 方法"

);

}

2、原生返回值给网页端

除了给原生端的方法传递参数，原生端还可以直接为我们web端返回值。

android 端

/**

* 调用该方法，方法会返回一个返回值给 javaScript 端

* @return 返回值的内容为："androidTestFunction2方法的返回值"

*/

@JavascriptInterface

public String androidTestFunction2 () {

return "androidTestFunction2方法的返回值";

}

web端

type="button"

value="调用toAndroidFunction2"

onClick="toAndroidFunction2()"

/>

// 调用 Android Function2

function toAndroidFunction2() {

var result = window.AndroidJSBridge.androidTestFunction2();

alert(result);

}

3、Android端直接调用web端的方法

android端可以直接调用web端挂载到window对象下的方法。

android 端

/**

* 原生端调用 web 方法，方法必须是挂载到 web 端 window 对象下面的方法。

* 调用 JS 中的方法：onFunction

*/

public void onJSFunction1 (View v) {

mWebView.evaluateJavascript("javascript:onFunction('android调用JS方法')", new ValueCallback() {

@Override

public void onReceiveValue(String s) {

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

builder.setMessage(s);

builder.setNegativeButton("确定", null);

builder.create().show();

}

});

}

web 端

// 原生端调用网页端的方法

window.onFunction = function (str) {

alert(str);

return "这是 onFunction 方法的返回值";

};

三、IOS与Web端的双向通信

1、js调用OC定义的方法

js直接调用OC定义的方法时，调用的方式跟Android相似，执行IOS中会将方法挂载在网页指定的window.webkit的对象下面,而不是跟andorid一样需要自定义JSBridge。与 Android 不同，IOS可以直接接收一个对象Object数据。

OC端

//OC在JS调用方法做的处理

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

{

//前端主动JS发送消息，前端指令动作

if ([@"IOSTestFunction1" isEqualToString:message.name]) {

[self IOSTestFunction1:message.body];

} else if ([@"IOSTestFunction2" isEqualToString:message.name]) {

[self IOSTestFunction2:message.body];

}

}

#pragma mark - 与 Android 不同，IOS可以直接接收一个对象Object数据

- (void)IOSTestFunction1:(id)body {

NSDictionary *dict = body;

NSString *msg = [dict objectForKey:@"msg"];

UIAlertController * alertController = [UIAlertController alertControllerWithTitle:@"提示" message:msg preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction * action = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:nil];

[alertController addAction:action];

[self presentViewController:alertController animated:YES completion:nil];

}

web端

type="button"

value="调用toIosFunction1"

onClick="toIOSFunction1()"

/>

// 调用 IOS Function1

function toIOSFunction1() {

var obj = {

msg: "web 调用IOS toIOSFunction1.postMessage(obj)",

};

window.webkit.messageHandlers.IOSTestFunction1.postMessage(obj);

}

2、OC不能直接返回值给web端

oc端不能直接返回给web端，要实现类似与Android那样的功能，我们可以通过在OC端调用web预先挂载好的方法，实现相应业务。OC端可以接受挂载在window下边方法返回的直接。如下代码onFunctionIOS所示：

OC端

#pragma mark - 调用该方法，回调 web 端 onFunctionIOS 方法，并传递字符串

- (void)IOSTestFunction2:(id)body {

[self.webView evaluateJavaScript:@"onFunctionIOS('IOSTestFunction2方法执行完成')" completionHandler:^(id result, NSError * _Nullable error) {

NSLog(@"%@", result);

}];

}

web端

type="button"

value="调用toIosFunction2"

onClick="toIOSFunction2()"

/>

// 调用 IOS Functio2

function toIOSFunction2() {

window.webkit.messageHandlers.IOSTestFunction2.postMessage({});

}

// IOS 回调 web的方法

window.onFunctionIOS = function (str) {

alert(str);

return "onFunctionIOS 执行完成！";

};