android h5 调用原生

在移动应用开发中，有时需要在H5页面中调用原生的功能，比如获取设备信息、调用摄像头等。而Android提供了WebView组件来支持H5页面的展示和交互，同时也提供了一种方式来让H5页面调用原生功能。

实现原理

Android中的WebView组件内置了一个JavaScript引擎，可以通过JavaScript与WebView交互。因此，我们可以在H5页面中通过JavaScript代码调用原生的方法，然后在Android中实现对应的方法。

具体实现步骤如下：

1. 在Android中创建一个WebView，并加载H5页面。

2. 在H5页面中编写JavaScript代码，调用原生方法。

3. 在Android中实现对应的原生方法，并将其暴露给JavaScript调用。

4. 在JavaScript中通过WebView的接口调用原生方法。

详细介绍

1. 创建WebView并加载H5页面

在Android中，我们可以通过代码创建一个WebView，并使用loadUrl方法来加载H5页面。具体代码如下：

```java

WebView webView = new WebView(context);

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

```

2. 编写JavaScript代码，调用原生方法

在H5页面中，我们可以编写JavaScript代码，调用原生方法。具体代码如下：

```javascript

// 调用原生方法获取设备信息

function getDeviceInfo() {

window.android.getDeviceInfo();

}

```

在上述代码中，我们通过window.android来调用原生方法getDeviceInfo。

3. 实现原生方法，并暴露给JavaScript调用

在Android中，我们需要实现对应的原生方法，并将其暴露给JavaScript调用。具体步骤如下：

首先，我们需要创建一个Java类，并将其继承自WebViewClient。然后，我们需要覆写shouldOverrideUrlLoading方法，在该方法中实现对应的原生方法。

```java

public class MyWebViewClient extends WebViewClient {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if (url.startsWith("jsbridge://")) {

String methodName = url.replace("jsbridge://", "");

if ("getDeviceInfo".equals(methodName)) {

getDeviceInfo();

}

return true;

}

return super.shouldOverrideUrlLoading(view, url);

}

// 原生方法：获取设备信息

public void getDeviceInfo() {

String deviceInfo = "Android " + Build.VERSION.RELEASE;

webView.loadUrl("javascript:getDeviceInfoCallback('" + deviceInfo + "')");

}

}

```

在上述代码中，我们首先判断URL是否以"jsbridge://"开头，如果是则说明该URL是由JavaScript调用的原生方法，我们需要解析出方法名，并根据方法名调用对应的原生方法。

在getDeviceInfo方法中，我们获取设备信息，并通过webView的loadUrl方法调用H5页面中的回调函数getDeviceInfoCallback，并将设备信息作为参数传递给该回调函数。

最后，我们需要将MyWebViewClient设置为WebView的客户端。

```java

webView.setWebViewClient(new MyWebViewClient());

```

4. 在JavaScript中调用原生方法

在JavaScript中，我们可以通过WebView的接口调用原生方法。具体代码如下：

```javascript

// 注册回调函数

function getDeviceInfoCallback(deviceInfo) {

console.log(deviceInfo);

}

// 调用原生方法获取设备信息

function getDeviceInfo() {

window.location.href = "jsbridge://getDeviceInfo";

}

```

在上述代码中，我们首先注册了回调函数getDeviceInfoCallback，用于接收原生方法getDeviceInfo的返回值。

然后，在getDeviceInfo方法中，我们通过window.location.href来调用原生方法getDeviceInfo。

总结

通过上述步骤，我们可以实现H5页面调用原生方法的功能。在实际开发中，我们可以根据需求实现对应的原生方法，并将其暴露给JavaScript调用，从而实现更加丰富的功能。同时，我们也需要注意安全问题，防止JavaScript注入攻击。