AndrWebView的详解（js和Android互调）笔记

一 ：前言

webview是Android众多控件比较特殊的一个也是比较常用和比较重要的控件，webView可以加载整个html文件，也可以加载html片段，VebView加载Html和web浏览器加载html，都是基于webkit引擎渲染网页。

二： VebView优点

1. 开发成本低。
2. 用户体验好。
3. 避免客户端更新

三 ：WebView的使用

使用之前必须添加联网权限

<uses-permission android:name="android.permission.INTERNET" />

• loadUrl()
  加载页面，可以加载网络上的页面，也可以加载本地assets文件夹下边的html文件。

     // 加载网络资源
     webview.loadUrl("https://www.baidu.com");
     //加载本地的资源
    webview.loadUrl("file:///android_asset/html/pay.html");

• loadData()
  加载一个html片段

  /*
  *加载一个html片段，
  参数一: html片段
  参数二:mime类型 
  参数三:编码
  */
 webview.loadData("<a href='http:www.baidu.com'>你好</a>", "text/html; charset=UTF-8",null);

• setWebViewClient(WebViewClient client)
  主要设置WebView处理请求资源操作。webView只要设置这个方法，打开连接就不会跳转到系统的浏览器中。

     webview.setWebViewClient(new WebViewClient())

如果我们想拦截某个网页中超链接的求情，可以重写WebViewClient中的

/*
*参数 一 WebView对象
参数 二 要拦截的url地址
返回值：true 不会显示资源，需要等待你的处理，
       false 就认为系统没有做处理，会显示资源
*/
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return false;
    }

接下来，用事实说话，加载一个百度首页，并设置WebViewClient()方法
返回false：

 webview.setWebViewClient(new WebViewClient(){

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.e("TAG", ""+url);
                Toast.makeText(MainActivity.this,"---"+url,Toast.LENGTH_SHORT).show();

                return false;
            }
        });

返回ture

 webview.setWebViewClient(new WebViewClient(){

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.e("TAG", ""+url);
                Toast.makeText(MainActivity.this,"---"+url,Toast.LENGTH_SHORT).show();

                return true;
            }
        });

在页面开始加载时候做一些提示语操作等重写WebViewClient()的

  @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                //具体业务逻辑
            }

在页面加载完成的时候做一些提示语操作等重写WebViewClient()的

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

在页面加载出错的时候做一些提示语操作等重写WebViewClient()的

 @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
            }

在页面加载htttps的时候需要做一些操作的时候重写WebViewClient

  @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                super.onReceivedSslError(view, handler, error);
               //默认调用父类的方法，不做任何处理
               // handler.proceed();//信任所有网站的证书
               /// handler.handleMessage(Message.obtain()); //自定义处理

            }

---

• WebChromeClient
  WebChromeClient主要辅助WebView处理JavaScript的对话框、网站图标、网站title、加载进度等。

 webview.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedIcon(WebView view, Bitmap icon) {
                super.onReceivedIcon(view, icon);
                //网页图标
            }

            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                //网页标题
            }

            @Override
            public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
                return super.onConsoleMessage(consoleMessage);
                //浏览器控制台打印信息
            }

            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                //加载进度条
            }
        });

---

• addJavascriptInterface(Object obj, String interfaceName) ;
  定义js调用java方法，参数一：自定义类，该类主要提供给方法调用给js，参数二：js和java共同的调用常量，也可以理解为协议，一旦规定不能更改。

 webview.addJavascriptInterface(new NativeIn(),"test");

 class NativeIn {

        @JavascriptInterface
        public void GETNAME() {

        }

    }

---

• 实现DownloadListener接口
  通常页面上有下载连接，点击连接执行的操作

@Override
    public void onDownloadStart(String url, String userAgent,
                                String contentDisposition, String mimetype, long contentLength) {

        if (url.toLowerCase().indexOf(".apk") > 0) {

            if (getSystemBasicWebViewCallback() != null) {



            }
        }

    }

• WebSetting
  webview设置一些页面属性，比如，页面字体的大小，是否支持js，支持缩小放大，支持本地存储，支持缓存等。

//获取websetting
   mWebSetting.getSettings()；
//设置默认为utf-8
 mWebSetting.getSettings().setDefaultTextEncodingName("UTF-8");
 //设置支持js
 mWebSetting.setJavaScriptEnabled(true);

//支持H5本地存储localStorage
        mWebSetting.setDomStorageEnabled(true);
        mWebSetting.setJavaScriptCanOpenWindowsAutomatically(true);
        //支持内容重新布局
        mWebSetting.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
        //多窗口
        mWebSetting.supportMultipleWindows();

        this.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

        //设置此属性，可任意比例缩放
        mWebSetting.setUseWideViewPort(true);
        mWebSetting.setLoadWithOverviewMode(true);

        //页面支持缩放
        mWebSetting.setBuiltInZoomControls(true);
        mWebSetting.setSupportZoom(true);
        mWebSetting.setDisplayZoomControls(false);

        //设置缓存机制
        mWebSetting.setAppCacheMaxSize(1024*1024*8);
        //设置缓冲大小，我设的是8M
        String appCacheDir = mContext.getDir("cache", Context.MODE_PRIVATE).getPath();
        mWebSetting.setAppCachePath(appCacheDir);
        mWebSetting.setAllowFileAccess(false);
        mWebSetting.setAppCacheEnabled(true);

• goback()
  当点击回系统返回键的时候，返回webview的上个页面，而不是直接退出系统。

 @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && webview.canGoBack()) {
            webview.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

笔记写到这里，开发中常见的系统设置和回调，都介绍的差不多了，这里我在梳理下webview的简单使用流程。

1. webview控件的定义和初始化。
2. 获取WebSetting对象，设置webview的配置，比如，是否缩放，支持js，字体大小等等。
3. 设置WebViewClient 主要设置一些，网页url的拦截处理，网页开始加载，网页加载完成，等等的一些回调操作。
4. 设置WebChromeClient，主要是：获取浏览器控制台信息，获取网页加载进度，获取网站的标题，网站的图标等等。
5. 实现DownloadListener接口，主要处理一些网页中有需要下载文件。
6. 添加addJavascriptInterface ，主要是用于js和java的调用。

四：js和Java的互调

以上内容都是webview的一些简单配置和系统回调方法，最终的目的就是要js和java的互调。现在越来越多的app开发，都采用了混合开发这种主流的模式，不仅仅是他的开发成本低，更多的是因为他比较灵活，如果我想过修改一些界面的，我只需要修改我的html和js就可以，不用整个的去更新客户端。但是在混合开发的过程中，必定会用到js和本地java方法互调的技术。接下来我们就来举例子来学习下互调技术。

---

• js调用源生java的方法。
  首先，我需要设置websetting的setJavaScriptEnabled，让webview支持js。

    mWebSetting.setJavaScriptEnabled(true);

• addJavascriptInterface

  webview.addJavascriptInterface(new NativeIn(), "test");

• 定义NativeIn类，里边具体编写方法给js调用。

   class NativeIn {

        @JavascriptInterface
        public void GETNAME() {
            Toast.makeText(MainActivity.this,"调用支付功能",Toast.LENGTH_SHORT).show();
        }

    }

• js定义方法去调用java方法。点击确认支付按钮去调用java方法。

 $(function(){
      $('.payment').click(function(){
            window.test.GETNAME();
        });
    });

效果图：

接下来我们来学习下java调用源生的方法，一般java调用源生的方法比较少，一般都是调用一些上啦加载更多，下拉刷新等方法。
这里我们就做下简单的示范，上图我们的 德玛西亚之翼 是28欧，我们利用webview的页面加载完成的时候把28修改为8欧，这样我就能买的起了哈哈，来吧

• 页面加载完成调用js方法

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

                //调用js方法
                webview.loadUrl("javascript:settitle(8)");


            }

这里js方法的定义，就是修改购买的价格

  function settitle(prices){
        alert("即将要修改价格了");
          $('.num ,.cr').text(prices);
        }

项目的源码地址：https://github.com/sdsjk/WbView_One/tree/master