Android H5调用原生

在移动应用开发中，有时候我们需要在H5页面中调用原生的功能，比如调用相机、获取位置信息等。在Android平台上，我们可以通过WebView来实现H5调用原生的功能。下面将介绍如何在Android应用中实现H5调用原生功能，并提供代码示例。

1. 在Android项目中添加WebView

首先，在Android项目中添加一个WebView，用来加载H5页面。在布局文件中添加WebView：

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

然后在Activity中找到WebView，并加载H5页面：

WebView webView = findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/index.html");

2. 在H5页面中调用原生功能

在H5页面中，我们可以通过JavaScript与原生进行交互。在H5页面中添加一个按钮，点击按钮时调用原生的方法：

<button onclick="callNative()">调用原生</button>

<script>
    function callNative() {
        // 调用原生方法
        window.androidInterface.showToast("Hello from H5!");
    }
</script>

3. 在Android中实现原生方法

在Android中实现一个类，用来接收H5页面传递过来的方法调用。该类需要继承自WebView的WebChromeClient类，并实现onJsPrompt方法：

public class MyWebChromeClient extends WebChromeClient {
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        if (message.startsWith("jsbridge:")) {
            // 处理H5调用原生的方法
            String data = message.substring("jsbridge:".length());
            // 这里可以根据不同的方法，做出不同的响应
            if ("showToast".equals(data)) {
                Toast.makeText(MainActivity.this, defaultValue, Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
}

4. 注入JavaScript接口

在Activity中为WebView添加一个JavaScript接口，用于H5页面调用原生方法：

webView.addJavascriptInterface(new AndroidInterface(), "androidInterface");

定义AndroidInterface类，用来实现H5页面调用的方法：

public class AndroidInterface {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}

5. 完整代码示例

下面是一个完整的示例代码：

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        webView.loadUrl("file:///android_asset/index.html");

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.setWebChromeClient(new MyWebChromeClient());
        webView.addJavascriptInterface(new AndroidInterface(), "androidInterface");
    }

    public class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
            if (message.startsWith("jsbridge:")) {
                String data = message.substring("jsbridge:".length());
                if ("showToast".equals(data)) {
                    Toast.makeText(MainActivity.this, defaultValue, Toast.LENGTH_SHORT).show();
                }
                result.confirm();
                return true;
            }
            return super.onJsPrompt(view, url, message, defaultValue, result);
        }
    }

    public class AndroidInterface {
        @JavascriptInterface
        public void showToast(String message) {
            Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
        }
    }
}

6. 总结

通过上面的步骤，我们可以在Android应用中实现H5调用原生的功能。在实际开发中，可以根据具体需求来扩展原生方法，实现更多的功能。希望本文对你有所帮助，祝你开发顺利！