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,"<html><head><title> 欢迎您 </title></head>" +
"<body><h2>使用webview显示 html代码</h2></body></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，在这个方法回调的时候可以加载错误页面。 -
onReceivedSslErrorHTTPS证书认证错误
//使得打开网页时不调用系统浏览器， 而是在本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、加载进度等，有以下常用方法。
-
onJsAlertwebview不支持javascript的alert弹窗，需要自己监听然后通过dialog弹窗 -
onJsConfirmjavascript的确认框 -
onJsPromptjavascript的输入框 -
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()
}
网友评论