虚位以待(AD)
虚位以待(AD)
首页 > 软件编程 > Android编程 > Android实现H5与Native交互的两种方式

Android实现H5与Native交互的两种方式
类别:Android编程   作者:码皇   来源:互联网   点击:

Android实现H5页面和Native页面交互的方法有两种,一种是Url拦截的方法,另一种是JavaScript注入,下面来通过这篇文章分别讲解。有需要的朋友们可以参考借鉴,下面来一起看看吧。

前言

大家都知道在Android WebView使用中,经常需要H5页面和Native页面进行交互,比如在网页上点击分享按钮,调用本地分享接口进行分享,分享成功后本地调用网页的JavaScript代码展示一条分享成功的消息。下面来看看一起看看两种实现方式是什么?

一、Url拦截的方式

重写ShouldOverrideUrl进行Url拦截,这种方式通过H5和Native协商好的Url格式来表明H5页面想要Native进行的操作,比如拨打电话,播放视频,查看某个用户的信息等操作,每种操作对应一种url格式,比如:

    “/media/image/123”代表H5要调用Native查看id为123的图片;“/webapp/close/webview”表示H5需要Native关闭当前页面;“/webapp/patient_card/?patient_id=345”表示H5要调用Native显示用户345的详情页

可以通过url的parameter传递参数,并通过Uri.parse进行解析。返回true表示截断对该Url请求的响应。

    protected WebViewClient mWebClient = new WebViewClient() {
    @Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // 添加tel链接响应 if (url.startsWith("tel:")) {
    Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url));
    startActivity(intent);
    return true;
    }
    // 添加mp4播放相应 if (url.endsWith(".mp4")) {
    viewVideo(url);
    return true;
    }
    // 添加图片链接响应 if (Pattern.compile("/media/image").matcher(url).find()) {
    viewImage(url);
    return true;
    }
    // 关闭webview if (Pattern.compile("/webapp/close/webview").matcher(url).find()) {
    onBackPressed();
    return true;
    }
    // 添加某个特殊url的响应 if(Pattern.compile("/webapp/patient_card/").matcher(url).find()) {
    Uri uri = Uri.parse(url);
    String patientId = uri.getQueryParameter("patient_id");
    viewPatientInfo(patientId);
    return true;
    }
    return super.shouldOverrideUrlLoading(view, url);
    }
    ;

二、JavaScript注入方式

相比于Url拦截的方式,JavaScript注入的方式更加直接,Native将开放给H5调用的函数注入JavaScript,H5通过JavaScript调用Native函数完成操作。

1、获取webView的WebViewSettings设置,调用setJavaScriptEnabled开启JavaScript调用。

    WebSettings settings = mWebView.getSettings();
    settings.setJavaScriptEnabled(true);

2、将需要暴露给JavaScript的函数前面添加@JavascriptInterface注解,只有添加了该注解的函数才能被JavaScript调用。

    public class WebAppInterface {
    @JavascriptInterface public boolean method1(String param1, String param2) {
    // do something }
    @JavascriptInterface public boolean method2(String param1, String param2) {
    // do something }
    }

3、通过WebView的addJavascriptInterface方法,将Native方法所在的class注入到JavaScript中。该函数的第一个参数是注入的Native对象,第二个参数是该对象的名字,JavaScript通过改名字访问该对象

    WebView webView = (WebView) findViewById(R.id.webview);
    webView.addJavascriptInterface(new WebAppInterface(), "InterfaceName");

4、这样,H5页面就可以通过下面的JavaScript调用Native的函数了

    <script type="text/javascript"> function method1(param1, param2) {
    InterfaceName.method1(param1, param2);
    }
    </script>

Native调用JavaScript

Native调用JavaScript函数的方法比较简单,通过loadUrl函数进行:

    // 无参数调用contentWebView.loadUrl("javascript:javacalljs()");
    // 有参数调用mWebView.loadUrl("javascript:test('" + param+ "')");
    // param是js的函数test()的参数

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能带来一定的帮助,如果有疑问大家可以留言交流。

相关热词搜索: h5 native 交互 android h5 native h5和na