WebView开发详解

目录

一.前言
现在很多app并不是纯原生开发，而是会嵌套网页，比如一些经常会变动的页面往往会采用嵌套h5网页的形式展现。Android中就有一个专门用来加载html网页的组件，这个组件就是Webview。
二.概述
Webview是Android开发中常见的控件，内部实现是采用渲染引擎来展示内容，Android4.4以前采用Webkit渲染引擎，4.4版本及以后开始采用chromium渲染引擎来渲染。
三.使用介绍
3.1 基本使用
（1）xml布局

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

（2）activity或fragment中加载webview控件

WebView webView =(WebView) findViewById(R.id.webview);
//或者
WebView webView =new WebView(this);

（3）添加网络权限

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

（4）访问网页

webview.loadurl("https://feibendexiaoma.github.io");

Tip : 如果为了避免内存泄漏可以在xml中定义一个viewgroup,如linearLayout,然后在代码中动态创建webView

3.2 常用方法详解
3.2.1 加载url，这个url可以是网络的url,可以是手机里的html网页url,也可以是assets文件夹下的网页url

webview.loadurl("https://feibendexiaoma.github.io");
webview.loadurl("content://com.android.htmlfileprovider/sdcard/index.html");
webview.loadurl("file:///android_asset/index.html");
//加载url，并添加HTTP headers
webview.loadUrl(String url, Map<String, String> additionalHttpHeaders);

3.2.2 加载网页中的一部分代码

/**
* data:要加载的内容 e.g. 'text/html'. If null,defaults to 'text/html'.
  mimeType：data数据类型的mime类型
  encoding：data的编码格式  如果data是base64编码，则encoding必须为"base64"
*/
webview.loadData(String data, String mimeType, String encoding)

 /**
 * baseUrl 加载的base url的网页内容
   historyUrl 历史记录条目的url 如果为空默认跳转到“about :blank”,如果非null,则必须是有效的url
 */
webview.loadDataWithBaseURL(String baseUrl, String data,
            String mimeType, String encoding, String historyUrl)

3.2.3 前进后退

webview.canGoBack()//是否能后退
webview.goBack();//后退
webview.canGoForward();//是否能前进
webview.goForward();//前进
webview.goBackOrForward(int steps);//以当前的index为起始点前进或后退到历史记录中指定的steps,steps为正则为前进，steps为负则为后退

Tip : 一般常用的是后退的方法

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

   public void clickBtnReback() {
      if (mCustomWebView.canGoBack()) {//能回退时回退
            mCustomWebView.goBack();
        }else {
            ActivityStack.getInstance().closeActivity(mActivity);
        }
    }

3.2.4 清除缓存

//清除资源缓存，由于内核缓存是全局的 ，因此这里针对的是整个应用程序
public void clearCache(boolean includeDiskFiles)
//清除自动完成填充的表单数据，不会清除WebView存储到本地的数据
public void clearFormData() 
 //清除webview访问的历史记录，清除其前进后退列表里的缓存，除了当前访问记录
public void clearHistory ()

3.2.5 WebView的状态

//**webview为活跃状态，能正常执行网页的响应 在前一个页面执行完onPause()后会执行这个方法
public void onResume () 
//当前页面失去焦点被切换为不可见状态，会执行onPause,会尝试暂停所有可以安全暂停的动作，如DOM的解析、plugin的执行，注意不会暂停javascript。要想暂停javascript可以用pauseTimers
public void onPause()
//当应用程序被切换到后台时，我们使用了webview,这个方法不仅针对当前webview,而是全局应用程序的Webview,会暂停所有webview的layout,解析和JavaScript
public void pauseTimers ()
//恢复所有Webview的所有布局，解析和JavaScript计时器    
public void resumeTimers()
 //调用destroy时，必须保证Webview已经从view tree中被删除了，可以在之前调用根布局的removeView方法将webview移除
public void destroy () 

3.3 相关设置介绍
3.3.1.WebSettings设置

WebSettings mSettings = this.getSettings();
mSettings.setJavaScriptEnabled(true);// 开启javascript 如果访问的页面中有与js交互，则必须开启
mSettings.setJavaScriptCanOpenWindowsAutomatically(true);////支持通过JS打开新窗口
mSettings.setDomStorageEnabled(true);// 开启DOM
mSettings.setDatabaseEnabled(true);//开启database
mSettings.setDefaultTextEncodingName("utf-8");// 设置字符编码
mSettings.setAllowFileAccess(true);// 设置支持文件流

//LOAD_DEFAULT默认缓存模式 根据cache-control决定是否从网络上取数据
//LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
//LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
////LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
mSettings.setCacheMode(WebSettings.LOAD_DEFAULT);// 设置缓存模式

mSettings.setSupportZoom(false);// 支持缩放
mSettings.setBuiltInZoomControls(false);// 设置内置的缩放控件

//以下两个结合使用
mSettings.setUseWideViewPort(true);// 调整图片适合webview大小
mSettings.setLoadWithOverviewMode(true);// 调整到屏幕大小

mSettings.setDefaultZoom(ZoomDensity.FAR);// 屏幕自适应网页,如果没有这个，在低分辨率的        手机上显示可能会异常
mSettings.setRenderPriority(RenderPriority.HIGH);
// 提高网页加载速度，暂时阻塞图片加载，然后网页加载好了，在进行加载图片
mSettings.setBlockNetworkImage(true);
        mSettings.setAppCacheEnabled(true);// 开启缓存机制

3.3.2 WebViewClient
用于处理请求事件，加载设置。
常用方法：

webview.setWebViewClient(new WebViewClient(){
    /**
    * 重写此方法表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边
    */
      @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
     if (url.endsWith(".apk")) {//添加下载
          WebActivity.this.startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
     } else {
         view.loadUrl(url);
     } 
     /**
         * 页面开始加载调用的方法
         *
         */
        @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 onLoadResource(WebView view, String url) {
            super.onLoadResource(view, url);
        }
         /**
         * 页面加载出错的时候调用 如404
           在这里可以自定义错误页面
         */
       @Override
        public void onReceivedError(WebView view, WebResourceRequest request,WebResourceError error) {
            super.onReceivedError(view, request, error);
        }
         /**
         *加载网页发生证书认证错误时
         */
         @Override    
        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {       
          handler.cancel();      //取消加载
         // handler.proceed();    //如果要上传到google play ,回调中使用此方法是无法通过审核的
        // handler.handleMessage(null);    //可做其他处理
        }    
 }
});

3.3.3 WebChromeClient
用于处理加载条，对话框，网站标题等
常见方法：

webview.setWebChromeClient(new WebChromeClient(){
    /**
    * 处理进度条
    */
      @Override
     public void onProgressChanged(WebView view, int newProgress) {
           if (newProgress >= 100) {
                 myProgressBar.setVisibility(View.GONE);
            } else {
                 if (View.GONE == myProgressBar.getVisibility()) {
                       myProgressBar.setVisibility(View.VISIBLE);
                 }
                 myProgressBar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
     }
    /**
    * 获取网站的标题
    */
     @Override
    public void onReceivedTitle(WebView view, String title) {
       titleview.setText(title)；
    }
    /**
    * 支持js弹alert窗处理
    */
     @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            new AlertDialog.Builder(MainActivity.this)
                    .setTitle("JsAlert")
                    .setMessage(message)
                    .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                        }
                    })
                    .setCancelable(false)
                    .show();
            return true;
        }
    /**
    *支持js 确认框处理
    */
      @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            return super.onJsConfirm(view, url, message, result);
        }
});

3.4 相关问题
3.4.1 内存泄漏
Webview为什么会发生内存泄漏?
Webview会关联一个activity,webview内部执行的操作是在新的线程中，这个线程的生命周期和activity的生命周期是不一样的，导致webview一直持有activity的引用不能回收。和匿名内部类持有外部类的引用导致外部类无法回收原理一样。

首先应该做的就是不能在xml中定义webview节点，而是在需要的时候动态生成。即：可以在使用WebView的地方放置一个LinearLayout类似ViewGroup的节点，然后在要使用WebView的时候，动态生成. new WebView(getApplicationContext()) ;必须传入ApplicationContext如果传入Activity的Context的话，对内存的引用会一直被保持着。

LinearLayout.LayoutParams params =new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);
WebView mWebView = new WebView(getApplicationContext());
mWebView.setLayoutParams(params);
mLayout.addView(mWebView);

在onDestroy()中将webview移除

@Override
    protected void onDestroy() {
        if(mWebView!=null){
           ((ViewGroup) mWebView.getParent()).removeView(mWebView);
            mWebView.destroy();
            mWebView = null;
        }
        super.onDestroy();
    }

3.4.2 微信支付问题
我在开发时遇到这样的问题：当网页中有支付时，android自带的webview不能响应支付的相关协议,而ios的就可以，搜索网上的方法及开发者文档，解释是ios内置浏览器中只要输入相关协议都可以调起相关app，比如输入weixin://就可以调起微信，输入alipay://可以调起支付宝。
查看微信支付的开发者文档(https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1)知道：
H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付。
主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。
微信支付的案例介绍给出了一个体验链接：http://wxpay.wxutil.com/mch/pay/h5.v2.php，在微信外浏览器打开，是可以调起微信支付的，看来微信是支持浏览器调起微信支付的。
解决方案
方案一
由于微信的H5支付协议可以在浏览器中调起微信，那么如果我们的app打开第三方网页的是手机浏览器的话，就不用我们做什么，就可以直接调起微信支付了。但是我们一般是在webview中调起微信支付，而直接在浏览器中打开的非常少，所以这种方法作为参考
方案二
由于以前的微信支付的协议为weixin://wap/pay?，后来改版之后url中就没有这个了，替换为https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?
这个开头的url了，其实方案二也是参考的方案一，可以通过判断支付前一步的网页地址，在支付的前一步就跳到手机浏览器内，通过浏览器调起微信支付。

public boolean shouldOverrideUrlLoading(WebView view, String url) {
               try {
                    if (url.startsWith("http://dh.xxx.cn/index/order/pay")) {//在支付的前一个网页就跳转出去用浏览器调支付
                        Intent intent = new Intent();
                        intent.setAction(Intent.ACTION_VIEW);
                        intent.setData(Uri.parse(url));
                        startActivity(intent);
                        return true;
                    }

因涉及到公司网址，就以xxx代表了，亲测这样是可以通过手机浏览器调起微信支付的。
3.5 与Js交互
3.5.1 Android调用js
（1）首先要想调用网页上js脚本，webview必须支持java script

mWebView.getSettings().setJavaScriptEnabled(true);//支持javascript
// 设置允许JS弹窗 测试使用
mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

（2）js代码 test.html 放到src\main\assets下

<!DOCTYPE html>
<html>
    <script type="text/javascript">

      //android 要调用的方法
       function helloworld(){
         alert("helloworld")
       }

       function alertMsg(msg){
         alert(msg)
       }

       function toastMsg(msg){
          window.web2app.toastMsg(msg)
       }

       function add(num1,num2){
          window.web2app.add(num1+num2)
       }
    </script>
     java-js in Android
</html>

（3）java 调用js的方法，注意这里的方法名要和test.html里的名称对应

String method ="javascript:helloworld()";//无参数调用
      method ="javascript:alertMsg(\""+ "content" +"\")";//有参数调用 注意对于字符串作为参数值需要进行转义双引号
   mWebView.loadUrl(method);

（4）调用setWebChromeClient处理弹窗，这一步只为测试时用

mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder ad = new AlertDialog.Builder(WebTestActivity.this);
                ad.setTitle("Java 调用了JS方法");
                ad.setMessage(message);
                ad.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                ad.setCancelable(false);
                ad.create().show();
                return true;
            }
        });

java整体代码

private void initView() {
        mWebView = (WebView)findViewById(R.id.webview);
        btnJava = (Button)findViewById(R.id.btn_java_to_js);
        WebSettings mWebSettings = mWebView.getSettings();
        mWebSettings.setJavaScriptEnabled(true);//开启支持js
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);//支持弹窗
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                //处理弹窗后的样式
                AlertDialog.Builder ad = new AlertDialog.Builder(WebTestActivity.this);
                ad.setTitle("Java 调用了JS方法");
                ad.setMessage(message);
                ad.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                ad.setCancelable(false);
                ad.create().show();
                return true;
            }
        });
        btnJava.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //调用js方法
                        javaToJsMethod();
            }
        });
        mWebView.loadUrl("file:///android_asset/test.html");
    }

    private void javaToJsMethod() {
        String method ="javascript:helloworld()";
         method ="javascript:alertMsg(\""+ "content" +"\")";
        mWebView.loadUrl(method);
    }

效果：

Android4.4以后处理
另外在Android4.4之后引入了一个方法evaluateJavascript，因为该方法的执行不会使页面刷新，比loadurl更高效，但是只能用于4.4以后版本。

private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("helloworld()", new ValueCallback<String>() {

  @Override
  public void onReceiveValue(String value) {
      //处理js 返回的结果
  }});
}

在使用时可以通过判断版本号，根据版本号是4.4以下的话使用loadurl,4.4以上版本可以使用evaluateJavascript

3.5.2 Js 调用Android的方法
（1）添加webview的addJavascriptInterface方法，并使用web2app作为注入接口名称，这个名称可以自定义，但是要和html中的名称一致
（2）定义一个与js对象映射关系的android 类 jsToJavaInteration，里面定义js要调用的方法

public class jsToJavaInteration{
        @JavascriptInterface
        public void toastMsg(String msg){
            Toast.makeText(getApplicationContext(),msg,Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void add(String result){
            Toast.makeText(getApplicationContext(),result,Toast.LENGTH_SHORT).show();
        }

    }

（3）加载js方法 ，这里的方法要和test.html中的方法名一致

 private void javaToJsMethod() {
        String method ="javascript:helloworld()";
//         method ="javascript:alertMsg(\""+ "content" +"\")";
        method = "javascript:toastMsg(\"" + "content" + "\")";//有参调用
        method = "javascript:add(2,3)";//
        mWebView.loadUrl(method);
    }

（4）同上第四步
整体java类

private void initView() {
        mWebView = (WebView)findViewById(R.id.webview);
        btnJava = (Button)findViewById(R.id.btn_java_to_js);
        WebSettings mWebSettings = mWebView.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new jsToJavaInteration(),"web2app");
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder ad = new AlertDialog.Builder(WebTestActivity.this);
                ad.setTitle("Java 调用了JS方法");
                ad.setMessage(message);
                ad.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                ad.setCancelable(false);
                ad.create().show();
                return true;
            }
        });
        btnJava.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                        javaToJsMethod();
            }
        });
        mWebView.loadUrl("file:///android_asset/test.html");
    }

    private void javaToJsMethod() {
         String method="";
 //        method ="javascript:helloworld()";
//         method ="javascript:alertMsg(\""+ "content" +"\")";
        method = "javascript:toastMsg(\"" + "content" + "\")";
        method = "javascript:add(2,3)";
        mWebView.loadUrl(method);
    }

    //js 调用java 类方法
    public class jsToJavaInteration{
        @JavascriptInterface
        public void toastMsg(String msg){
            Toast.makeText(getApplicationContext(),msg,Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void add(String result){
            Toast.makeText(getApplicationContext(),result,Toast.LENGTH_SHORT).show();
        }

    }

效果：

四.使用示例参照上面代码
五.总结
本节写了一些关于webview的知识，包括webview的概述，基本使用，常用方法介绍，相关设置，内存泄漏，webview遇到的问题，java与js的交互，并用一些代码做了说明，希望对你对我都有帮助，有不完善的后续补充哦。