美文网首页
android webview 与js互调

android webview 与js互调

作者: 若兮生生 | 来源:发表于2017-12-27 17:27 被阅读82次

项目开发中需要使用h5,且在h5页面中触发安卓事件,经过一番学习,总结如下:

1.js 调用android 方法

js代码:
代码一

<span class="icon icon-goback" @click="choiceSpe(idNo,e)"></span>

代码二

choiceSpe(idNo,e) {
    test.getAllStandard(idNo)=========>>>1
    }

代码一的点击触发代码二事件,代码二类似于android在js中声明的方法,其实现是在android代码中。
android代码:

    @JavascriptInterface
    public void getAllStandard(String id) {================>>>2
        showCarPopupWindow(id);
    }

通过 @JavascriptInterface注解,将js声明的方法与安卓实现的方法联系起来。从而将js事件传递到android代码中。
注意:方法名和参数类型要一致。
当然以上调用的前提是:

 webSettings=webview.getSettings();
        //支持js
  webSettings.setJavaScriptEnabled(true);

  webView.addJavascriptInterface(this,"test");======>>>3
  webView.loadUrl(url);

在“1”处,“test”是js随意命名,但在"3"处要与其保持一致。“3”处的第一个参数,就是"2"方法所在的类的对象。
2.android 调用js方法
js代码

  function showInfoFromJava(msg){
        document.getElementById("show").value=msg;
        alert(1);
      }

android 代码

 webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");

3.为了使 android 和ios 在调用js 时有区分可以设置userAgent

 webSettings.setUserAgentString("ANDROID");

4.为了显示加载进度条,可使用progressbar。progressbar进度条数据从WebChromeClient的onProgressChanged方法中获取

 webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
            }
        });

5.如果不想使用进度条,而使用安卓的加载提示,可以在WebViewClient的方法中,判断加载开始,加载结束,以及加载错误。

webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
            }
        });

6.可以根据自己项目对webview做一下简单封装,采用builder模式,调用时方便许多。

相关文章

网友评论

      本文标题:android webview 与js互调

      本文链接:https://www.haomeiwen.com/subject/gmiugxtx.html