1、Android中WebView的使用,加载H5
2、Android原生和H5、JS交互，使用JsBridge

1、WebView简介

WebView是Android用于显示Web网页的一种控件；WebView内部实现是采用渲染引擎来展示view的内容，提供网页前进后退，网页放大，缩小，搜索；在低版本和高版本采用了不同的webkit版本内核，andoid 4.4后直接使用Chrome。

现在很多APP（Hybrid App）都内置了Web网页，比如说很多电商平台，淘宝、天猫、京东、聚划算等等。 WebView比较灵活，不需要升级客户端，只需要修改网页代码即可。一些经常变化的页面可以用WebView这种方式去加载网页。例如中秋节跟国庆节打开的页面不一样，如果是用WebView显示的话，只修改修改html页面就行，而不需要升级客户端。

2、使用介绍

2.1、加载HTML方式

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

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

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

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

  //方式5 使用webview显示html代码
  webView.loadDataWithBaseURL(null," 欢迎您 " +
        "使用webview显示 html代码", "text/html" , "utf-8", null);

2.2、WebView常用方法

//激活WebView为活跃状态，能正常执行网页的响应
webView.onResume() ；

//当页面被失去焦点被切换到后台不可见状态，需要执行onPause
//通过onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。
webView.onPause()；



//是否可以后退
Webview.canGoBack() 
//后退网页
Webview.goBack()
//是否可以前进                     
Webview.canGoForward()
//前进网页
Webview.goForward()
//以当前的index为起始点前进或者后退到历史记录中指定的steps
//如果steps为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps)


//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);
//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；
//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

2.3、工具类WebSetting

WebSetting用于配置和管理WebView

@SuppressLint("SetJavaScriptEnabled")
    private fun initWebSetting() {
        //声明WebSettings子类
        val webSettings = mWebView.settings

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

        //设置自适应屏幕，两者合用
        webSettings.useWideViewPort = true //将图片调整到适合webView的大小
        webSettings.loadWithOverviewMode = true // 缩放至屏幕的大小

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

        //其他细节操作
        webSettings.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK //关闭webView中缓存
        webSettings.allowFileAccess = true //设置可以访问文件
        webSettings.javaScriptCanOpenWindowsAutomatically = true //支持通过JS打开新窗口
        webSettings.loadsImagesAutomatically = true //支持自动加载图片
        webSettings.defaultTextEncodingName = "utf-8"//设置编码格式

        // 特别注意：5.1以上默认禁止了https和http混用，以下方式是开启
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
        }
    }

2.4、WebViewClient

WebViewClient主要帮助WebView处理各种通知、请求事件的，有以下常用方法：

onPageFinished 页面请求完成
onPageStarted 页面开始加载
onLoadResource 资源加载，每一个资源（如图片）的加载都会调用一次
shouldOverrideUrlLoading 拦截url
onReceivedError 访问错误时回调，例如访问网页时报错404，在这个方法回调的时候可以加载错误页面。
onReceivedSslError HTTPS证书认证错误

  //使得打开网页时不调用系统浏览器， 而是在本WebView中显示
        mWebView.webViewClient = object : CompatWebViewClient() {


            override fun onLoadResource(view: WebView?, url: String?) {
                Log.i(TAG, "Resource  $url")
            }

            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                Log.i(TAG, "开始加载:  $url")
            }

            override fun onPageFinished(view: WebView?, url: String?) {
                Log.i(TAG, "结束加载:  $url")
            }
            override fun onReceivedError(view: WebView?, errorCode: Int, description: String?, failingUrl: String?) {
                //加载失败，显示本地网页
                Log.i(TAG, "errorCode: $errorCode   $failingUrl")
            }
           
            override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) {
                // 如果实现调用了handler.proceed()来忽略该证书错误，则会受到中间人攻击的威胁，可能导致隐私泄露
                //修复方式：
                //【1】不调用android.webkit.SslErrorHandler的proceed方法
                //【2】当发生证书认证错误时，采用默认的处理方法SslErrorHandler.cancel()，停止加载问题页面
            }

            override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
                return super.shouldOverrideUrlLoading(view, url)
            }
        }

2.5、WebChromeClient

WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等，有以下常用方法。

onJsAlert webview不支持javascript的alert弹窗，需要自己监听然后通过dialog弹窗
onJsConfirm javascript的确认框
onJsPrompt javascript的输入框
onReceivedTitle 获取网页标题
onReceivedIcon 获取网页图标icon
onProgressChanged 加载进度回调

 mWebView.webChromeClient = object : WebChromeClient() {
            override fun onReceivedTitle(view: WebView?, title: String?) {
                Log.i(TAG, "title: $title   ${view?.url}")
            }

            override fun onReceivedIcon(view: WebView?, icon: Bitmap?) {
                
            }

            override fun onProgressChanged(view: WebView?, newProgress: Int) {
                Log.i(TAG, "progress: $newProgress   ${view?.url}")
            }

            override fun onJsAlert(view: WebView?, url: String?, message: String?, result: JsResult?): Boolean {
                //警告框
                    AlertDialog.Builder(this@MainActivity)
                        .setTitle("JsAlert")
                        .setMessage(message)
                        .setPositiveButton("OK") { _, _ -> result?.confirm() }
                        .setCancelable(false)
                        .show()
                return true
            }

            override fun onJsConfirm(view: WebView?, url: String?, message: String?, result: JsResult?): Boolean {
                //确认框
                AlertDialog.Builder(this@MainActivity)
                    .setTitle("JsConfirm")
                    .setMessage(message)
                    .setPositiveButton("OK") { _, _ -> result?.confirm() }
                    .setNegativeButton("Cancel") { _, _ -> result?.cancel() }
                    .setCancelable(false)
                    .show()
                return true
            }

            override fun onJsPrompt(
                view: WebView?, url: String?, message: String?, defaultValue: String?,
                result: JsPromptResult?
            ): Boolean {
                 //输入框
                AlertDialog.Builder(this@MainActivity)
                    .setTitle(message)
                    .setView(EditText(this@MainActivity))
                    .setPositiveButton("OK") { _, _ -> result?.confirm() }
                    .setNegativeButton("Cancel") { _, _ -> result?.cancel() }
                    .setCancelable(false)
                    .show()
                return true
            }

        }

2.6、防止内存泄漏

1、不在布局文件xml中设置布局，通过代码的方式new一个WebView对象，然后添加到布局中

val mWebView=WebView(applicationContext)
mLinLayout.addView(mWebView,params)

2、Activity退出时销毁WebView

 protected fun onDestroy() {
        if (mWebView != null) {
            // 如果先调用destroy()方法，则会命中if (isDestroyed()) return;这一行代码，
            //需要先onDetachedFromWindow()，再destory()
            val parent = mWebView.parent
            if (parent != null) {
                (parent as ViewGroup).removeView(mWebView)
            }
            mWebView.stopLoading()
            // 退出时调用此方法，移除绑定的服务，否则某些特定系统会报错
            mWebView.settings.javaScriptEnabled = false
            mWebView.clearHistory()
            mWebView.removeAllViews()
            mWebView.destroy()

        }
        super.onDestroy()
    }

参考：https://www.jianshu.com/p/3c94ae673e2a

Android中WebView的使用,加载H5