原生app 主动调用h5

在移动端开发中，原生应用和H5应用都有各自的特点和优势。原生应用有着更强的性能和更好的用户体验，而H5应用则更加灵活和易于维护。在某些情况下，我们需要在原生应用中嵌入H5页面，或者在H5页面中调用原生应用的功能，这就需要原生应用主动调用H5页面了。

原理

在iOS平台上，原生应用主动调用H5页面的方式主要是通过JavaScriptCore框架实现的。JavaScriptCore是苹果公司推出的一个JavaScript解释器，它可以在iOS应用中嵌入JavaScript引擎，使得应用可以执行JavaScript代码。在JavaScriptCore中，我们可以通过JSContext对象来执行JavaScript代码，并且可以将原生应用的对象注入到JSContext中，从而实现原生应用和H5页面的互相调用。

在Android平台上，原生应用主动调用H5页面的方式则主要是通过WebView实现的。WebView是Android系统提供的一个基于WebKit引擎的浏览器控件，它可以嵌入到应用中，并且可以加载H5页面。在WebView中，我们可以通过WebViewClient类和WebChromeClient类来控制WebView的行为，并且可以通过JavaScriptInterface注解将原生应用的对象注入到H5页面中，从而实现原生应用和H5页面的互相调用。

详细介绍

在iOS平台上，原生应用主动调用H5页面的方式主要包括以下几个步骤：

1. 创建JSContext对象

在原生应用中，我们需要创建一个JSContext对象来执行JavaScript代码。JSContext对象是JavaScriptCore框架中的一个核心对象，它可以执行JavaScript代码，并且可以将原生应用的对象注入到JavaScript环境中。

```objective-c

JSContext *context = [[JSContext alloc] init];

```

2. 注入原生应用的对象

在JSContext对象中，我们可以通过setObject:forKeyedSubscript:方法将原生应用的对象注入到JavaScript环境中。注入的对象可以是任何类型的对象，包括原生应用中的控制器、模型、工具类等等。

```objective-c

context[@"nativeObject"] = self;

```

3. 加载H5页面

在原生应用中，我们需要创建一个UIWebView对象来加载H5页面。UIWebView是UIKit框架中的一个控件，它可以加载H5页面，并且可以与JavaScript交互。

```objective-c

UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

[self.view addSubview:webView];

NSURL *url = [NSURL URLWithString:@"http://www.example.com"];

NSURLRequest *request = [NSURLRequest requestWithURL:url];

[webView loadRequest:request];

```

4. 执行JavaScript代码

在UIWebView中加载H5页面后，我们可以通过JavaScriptCore框架中的JSContext对象来执行JavaScript代码。我们可以通过evaluateScript:方法来执行JavaScript代码，并且可以获取JavaScript代码的返回值。

```objective-c

JSValue *result = [context evaluateScript:@"document.title"];

NSString *title = [result toString];

```

5. 响应H5页面的事件

在H5页面中，我们可以通过JavaScript代码来触发事件，并且可以通过JavaScriptCore框架中的JSContext对象来响应这些事件。我们可以通过setObject:forKeyedSubscript:方法将原生应用的方法注入到JavaScript环境中，并且可以在JavaScript代码中调用这些方法。

```objective-c

- (void)showAlert:(NSString *)message {

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

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

[alert addAction:action];

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

}

context[@"nativeObject"][@"showAlert"] = ^(NSString *message) {

[self showAlert:message];

};

```

在Android平台上，原生应用主动调用H5页面的方式主要包括以下几个步骤：

1. 创建WebView对象

在原生应用中，我们需要创建一个WebView对象来加载H5页面。WebView是Android系统提供的一个控件，它可以加载H5页面，并且可以与JavaScript交互。

```java

WebView webView = new WebView(context);

```

2. 注入原生应用的对象

在WebView中，我们可以通过addJavascriptInterface方法将原生应用的对象注入到JavaScript环境中。注入的对象可以是任何类型的对象，包括原生应用中的控制器、模型、工具类等等。

```java

webView.addJavascriptInterface(nativeObject, "nativeObject");

```

3. 加载H5页面

在原生应用中，我们需要调用WebView的loadUrl方法来加载H5页面。loadUrl方法可以接受一个URL字符串或者一个File对象作为参数，用来指定要加载的H5页面的地址。

```java

webView.loadUrl("http://www.example.com");

```

4. 执行JavaScript代码

在WebView中加载H5页面后，我们可以通过WebView的loadUrl方法和evaluateJavascript方法来执行JavaScript代码。loadUrl方法可以用来执行一段JavaScript代码，并且可以获取JavaScript代码的返回值。evaluateJavascript方法则可以用来执行一段JavaScript代码，并且可以通过回调函数来获取JavaScript代码的返回值。

```java

webView.loadUrl("javascript:document.title");

```

```java

webView.evaluateJavascript("document.title", new ValueCallback() {

@Override

public void onReceiveValue(String value) {

String title = value;

}

});

```

5. 响应H5页面的事件

在H5页面中，我们可以通过JavaScript代码来触发事件，并且可以通过WebView的addJavascriptInterface方法来响应这些事件。我们可以在原生应用中定义一个带有JavascriptInterface注解的方法，并且可以在JavaScript代码中调用这个方法。

```java

@JavascriptInterface

public void showAlert(String message) {

AlertDialog.Builder builder = new AlertDialog.Builder(context);

builder.setTitle("提示");

builder.setMessage(message);

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

builder.show();

}

webView.addJavascriptInterface(nativeObject, "nativeObject");

```

总结

原生应用主动调用H5页面的方式可以让我们在移动应用中实现更加丰富的交互体验。在iOS平台上，我们可以通过JavaScriptCore框架来实现原生应用和H5页面的互相调用；在Android平台上，我们可以通过WebView来实现原生应用和H5页面的互相调用。无论是哪种方式，我们都需要深入了解移动应用的开发技术，才能更好地实现应用的需求。