安卓webView开发使用及加载html标签乱码处理

安卓webView开发使用

webView加载网页或html段落的方式有以下三种：

  //方式1. 加载一个网页：
  webView.loadUrl("http://www.baidu.com");

  //方式2：加载assets中的html页面
  webView.loadUrl("file:///android_asset/hello.html");

  //方式3：加载手机本地的html页面
   webView.loadUrl("content://com.android.htmlfileprovider/sdcard/hello.html");

   // 方式4： 加载 HTML 页面的一小段内容 会乱码
  WebView.loadData(String data, String mimeType, String encoding)
// 参数说明：
// 参数1：需要截取展示的内容
// 内容里不能出现 ’#’, ‘%’, ‘\’ , ‘?’ 这四个字符，若出现了需用 %23, %25, %27, %3f 对应来替代，否则会出现异常
// 参数2：展示内容的类型
// 参数3：字节码
// 使用该方法加载html段落不会乱码       
// mWebView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);

基本设置

//声明WebSettings子类
WebSettings webSettings = webView.getSettings();

//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);  
// 若加载的 html 里有JS 在执行动画等操作，会造成资源浪费（CPU、电量）
// 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可

//支持插件
webSettings.setPluginsEnabled(true); 

//设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

//缩放操作
webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

//其他细节操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 
//缓存模式：
//LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
//LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
//LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
//LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
webSettings.setAllowFileAccess(true); //设置可以访问文件 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
webSettings.setAppCachePath(cacheDirPath); //设置缓存目录

常用方法

        webView.setWebChromeClient(new WebChromeClient() {
            @Override  // js里弹框
            public boolean onJsAlert(WebView view, String url, String message, final 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;
            }

            //获取网站标题
            @Override
            public void onReceivedTitle(WebView view, String title) {
                System.out.println("标题在这里");
            }


            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);


            }
        });

        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // 点击链接不打开新界面
                view.loadUrl(url);
                return true;
            }

            @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);
            }
        });
    //销毁Webview
    @Override
    protected void onDestroy() {
        if (webView != null) {
            webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            webView.clearHistory();

            webView.stopLoading();
            ((ViewGroup) webView.getParent()).removeView(webView);
            webView.destroy();
            webView = null;
        }
        super.onDestroy();
    }

与js通信

调用js的函数

webView.loadUrl("javascript:javaCallJs()");
webView.loadUrl("javascript:javaCallJsWithArgs("+"'哈哈哈',"+2+")");
`
    <script type="text/javascript">
        function javaCallJs() {
            document.getElementById("content").innerHTML += "<br\>java调用了js函数";
        }
        function javaCallJsWithArgs(arg,num) {
            document.getElementById("content").innerHTML += ("<br\>"+arg+num);
        }
    </script>
`

js调用安卓端方法

    webView.addJavascriptInterface(new JavaInterface(),"dahai");

    private class JavaInterface{

        @JavascriptInterface
        public void startFunction() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {

                }
            });
        }
        @JavascriptInterface
        public void startFunction(final String msg) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {

                }
            });
        }
    }
`
<a onclick="window.dahai.startFunction()">点击调用java代码</a><br>
<a onclick="window.dahai.startFunction('hello world')">点击调用java代码并传递参数</a><br>
`