前言
当初很多App里都内置了Web网页（Hyprid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图
- 那么这种该如何实现呢？其实这是Android里一个叫WebView的组件实现的。明天我将全面介绍WebView的罕用用法。
目录
[外链图片转存失败,源站可能有防盗链机制,倡议将图片保留下来间接上传(img-sNTzdRBr-1640421131904)(https://p1-jj.byteimg.com/tos...)]
1. 简介
WebView是一个基于webkit引擎、展示web页面的控件。
Android的Webview在低版本和高版本采纳了不同的webkit版本内核，4.4后间接应用了Chrome。
2. 作用
- 显示和渲染Web页面
- 间接应用html文件（网络上或本地assets中）作布局
- 可和JavaScript交互调用
WebView控件功能强大，除了具备个别View的属性和设置外，还能够对url申请、页面加载、渲染、页面交互进行弱小的解决。
3. 应用介绍
一般来说Webview可独自应用，可联结其子类一起应用，所以接下来，我会介绍：
- Webview本身的常见办法；
- Webview的最罕用的子类 （WebSettings类、WebViewClient类、WebChromeClient类)
- Android和Js的交互
3.1 Webview罕用办法
3.1.1 加载url
加载形式依据资源分为三种
//形式1. 加载一个网页： webView.loadUrl("http://www.google.com/"); //形式2：加载apk包中的html页面 webView.loadUrl("file:///android_asset/test.html"); //形式3：加载手机本地的html页面 webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html"); // 形式4： 加载 HTML 页面的一小段内容 WebView.loadData(String data, String mimeType, String encoding)// 参数阐明：// 参数1：须要截取展现的内容// 内容里不能呈现 ’#’, ‘%’, ‘\’ , ‘?’ 这四个字符，若呈现了需用 %23, %25, %27, %3f 对应来代替，否则会出现异常// 参数2：展现内容的类型// 参数3：字节码3.1.1 WebView的状态
//激活WebView为沉闷状态，能失常执行网页的响应webView.onResume() ；//当页面被失去焦点被切换到后盾不可见状态，须要执行onPause//通过onPause动作告诉内核暂停所有的动作，比方DOM的解析、plugin的执行、JavaScript执行。webView.onPause()；//当应用程序(存在webview)被切换到后盾时，这个办法不仅仅针对以后的webview而是全局的全应用程序的webview//它会暂停所有webview的layout，parsing，javascripttimer。升高CPU功耗。webView.pauseTimers()//复原pauseTimers状态webView.resumeTimers()；//销毁Webview//在敞开了Activity时，如果Webview的音乐或视频，还在播放。就必须销毁Webview//然而留神：webview调用destory时,webview仍绑定在Activity上//这是因为自定义webview构建时传入了该Activity的context对象//因而须要先从父容器中移除webview,而后再销毁webview:rootLayout.removeView(webView); webView.destroy();3.1.2 对于后退 / 后退网页
//是否能够后退Webview.canGoBack() //后退网页Webview.goBack()//是否能够后退 Webview.canGoForward()//后退网页Webview.goForward()//以以后的index为起始点后退或者后退到历史记录中指定的steps//如果steps为正数则为后退，负数则为后退Webview.goBackOrForward(intsteps) 常见用法：Back键管制网页后退
- 问题：在不做任何解决前提下 ，浏览网页时点击零碎的“Back”键,整个 Browser 会调用 finish()而完结本身
- 指标：点击返回后，是网页回退而不是推出浏览器
- 解决方案：在以后Activity中解决并生产掉该 Back 事件
public boolean onKeyDown(int keyCode, KeyEvent event) { if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { mWebView.goBack(); return true; } return super.onKeyDown(keyCode, event);}3.1.3 革除缓存数据
//革除网页拜访留下的缓存//因为内核缓存是全局的因而这个办法不仅仅针对webview而是针对整个应用程序.Webview.clearCache(true);//革除以后webview拜访的历史记录//只会webview拜访历史记录里的所有记录除了以后拜访记录Webview.clearHistory()；//这个api仅仅革除主动实现填充的表单数据，并不会革除WebView存储到本地的数据Webview.clearFormData()；3.2 罕用类
3.2.1 WebSettings类
- 作用：对WebView进行配置和治理
- 配置步骤 & 常见办法：
配置步骤1：增加拜访网络权限（AndroidManifest.xml）
这是前提！这是前提！这是前提！
<uses-permission android:name="android.permission.INTERNET"/>配置步骤2：生成一个WebView组件（有两种形式）
//形式1：间接在在Activity中生成WebView webView = new WebView(this)//办法2：在Activity的layout文件里增加webview控件：WebView webview = (WebView) findViewById(R.id.webView1);配置步骤3：进行配置-利用WebSettings子类（常见办法）
//申明WebSettings子类WebSettings webSettings = webView.getSettings();//如果拜访的页面中要与Javascript交互，则webview必须设置反对JavascriptwebSettings.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中缓存 webSettings.setAllowFileAccess(true); //设置能够拜访文件 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //反对通过JS关上新窗口 webSettings.setLoadsImagesAutomatically(true); //反对主动加载图片webSettings.setDefaultTextEncodingName("utf-8");//设置编码格局常见用法：设置WebView缓存
- 当加载 html 页面时，WebView会在/data/data/包名目录下生成 database 与 cache 两个文件夹
- 申请的 URL记录保留在 WebViewCache.db，而 URL的内容是保留在 WebViewCache 文件夹下
- 是否启用缓存：
//优先应用缓存: WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //缓存模式如下： //LOAD_CACHE_ONLY: 不应用网络，只读取本地缓存数据 //LOAD_DEFAULT: （默认）依据cache-control决定是否从网络上取数据。 //LOAD_NO_CACHE: 不应用缓存，只从网络获取数据. //LOAD_CACHE_ELSE_NETWORK，只有本地有，无论是否过期，或者no-cache，都应用缓存中的数据。 //不应用缓存: WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);- 联合应用（离线加载）
if (NetStatusUtil.isConnected(getApplicationContext())) { webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//依据cache-control决定是否从网络上取数据。} else { webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//没网，则从本地获取，即离线加载}webSettings.setDomStorageEnabled(true); // 开启 DOM storage API 性能webSettings.setDatabaseEnabled(true); //开启 database storage API 性能webSettings.setAppCacheEnabled(true);//开启 Application Caches 性能String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;webSettings.setAppCachePath(cacheDirPath); //设置 Application Caches 缓存目录留神： 每个 Application 只调用一次 WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()
3.2.2 WebViewClient类
- 作用：解决各种告诉 & 申请事件
- 常见办法：
常见办法1：shouldOverrideUrlLoading()
- 作用：关上网页时不调用零碎浏览器， 而是在本WebView中显示；在网页上的所有加载都通过这个办法,这个函数咱们能够做很多操作。
//步骤1. 定义Webview组件Webview webview = (WebView) findViewById(R.id.webView1);//步骤2. 抉择加载形式 //形式1. 加载一个网页： webView.loadUrl("http://www.google.com/"); //形式2：加载apk包中的html页面 webView.loadUrl("file:///android_asset/test.html"); //形式3：加载手机本地的html页面 webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");//步骤3. 复写shouldOverrideUrlLoading()办法，使得关上网页时不调用零碎浏览器， 而是在本WebView中显示 webView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } });常见办法2：onPageStarted()
- 作用：开始载入页面调用的，咱们能够设定一个loading的页面，通知用户程序在期待网络响应。
webView.setWebViewClient(new WebViewClient(){ @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { //设定加载开始的操作 } });常见办法3：onPageFinished()
- 作用：在页面加载完结时调用。咱们能够敞开loading 条，切换程序动作。
webView.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { //设定加载完结的操作 } });常见办法4：onLoadResource()
- 作用：在加载页面资源时会调用，每一个资源（比方图片）的加载都会调用一次。
webView.setWebViewClient(new WebViewClient(){ @Override public boolean onLoadResource(WebView view, String url) { //设定加载资源的操作 } });常见办法5：onReceivedError（）
- 作用：加载页面的服务器呈现谬误时（如404）调用。
App外面应用webview控件的时候遇到了诸如404这类的谬误的时候，若也显示浏览器外面的那种谬误提醒页面就显得很俊俏了，那么这个时候咱们的app就须要加载一个本地的谬误提醒页面，即webview如何加载一个本地的页面
//步骤1：写一个html文件（error_handle.html），用于出错时展现给用户看的提醒页面//步骤2：将该html文件搁置到代码根目录的assets文件夹下//步骤3：复写WebViewClient的onRecievedError办法//该办法传回了错误码，依据谬误类型能够进行不同的谬误分类解决 webView.setWebViewClient(new WebViewClient(){ @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){switch(errorCode) { case HttpStatus.SC_NOT_FOUND: view.loadUrl("file:///android_assets/error_handle.html"); break; } } });常见办法6：onReceivedSslError()
- 作用：解决https申请
webView默认是不解决https申请的，页面显示空白，须要进行如下设置：
webView.setWebViewClient(new WebViewClient() { @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); //示意期待证书响应 // handler.cancel(); //示意挂起连贯，为默认形式 // handler.handleMessage(null); //可做其余解决 } }); 3.2.3 WebChromeClient类
- 作用：辅助 WebView 解决 Javascript 的对话框,网站图标,网站题目等等。
- 常见应用：
常见办法1： onProgressChanged（）
- 作用：取得网页的加载进度并显示
webview.setWebChromeClient(new WebChromeClient(){ @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress < 100) { String progress = newProgress + "%"; progress.setText(progress); } else { } });常见办法2： onReceivedTitle（）
- 作用：获取Web页中的题目
每个网页的页面都有一个题目，比方www.baidu.com这个页面的题目即“百度一下，你就晓得”，那么如何晓得以后webview正在加载的页面的title并进行设置呢？
webview.setWebChromeClient(new WebChromeClient(){ @Override public void onReceivedTitle(WebView view, String title) { titleview.setText(title)； }常见办法3： onJsAlert（）
- 作用：反对javascript的正告框
个别状况下在 Android 中为 Toast，在文本外面退出\n就能够换行
webview.setWebChromeClient(new WebChromeClient() { @Override 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; }常见办法4： onJsConfirm（）
- 作用：反对javascript的确认框
webview.setWebChromeClient(new WebChromeClient() { @Overridepublic boolean onJsConfirm(WebView view, String url, String message, final JsResult result) { new AlertDialog.Builder(MainActivity.this) .setTitle("JsConfirm") .setMessage(message) .setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { result.confirm(); } }) .setNegativeButton("Cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { result.cancel(); } }) .setCancelable(false) .show();// 返回布尔值：判断点击时确认还是勾销// true示意点击了确认；false示意点击了勾销； return true;} 常见办法5： onJsPrompt（）
- 作用：反对javascript输入框
点击确认返回输入框中的值，点击勾销返回 null。
webview.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) { final EditText et = new EditText(MainActivity.this); et.setText(defaultValue); new AlertDialog.Builder(MainActivity.this) .setTitle(message) .setView(et) .setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { result.confirm(et.getText().toString()); } }) .setNegativeButton("Cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { result.cancel(); } }) .setCancelable(false) .show(); return true;} 3.3 WebView与JavaScript的交互
3.4 注意事项：如何防止WebView内存泄露？
3.4.1 不在xml中定义 Webview ，而是在须要的时候在Activity中创立，并且Context应用 getApplicationgContext()
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); mWebView = new WebView(getApplicationContext()); mWebView.setLayoutParams(params); mLayout.addView(mWebView);3.4.2 在 Activity 销毁（ WebView ）的时候，先让 WebView 加载null内容，而后移除 WebView，再销毁 WebView，最初置空。
@Override protected void onDestroy() { if (mWebView != null) { mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null); mWebView.clearHistory(); ((ViewGroup) mWebView.getParent()).removeView(mWebView); mWebView.destroy(); mWebView = null; } super.onDestroy(); }4. 实例
- 指标：实现显示“www.baidu.com”、获取其题目、提醒加载开始 & 完结和获取加载进度
- 具体实现：
步骤1：增加拜访网络权限
这是前提！这是前提！这是前提！
AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>步骤2：主布局 activity\_main.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.carson_ho.webview_demo.MainActivity"> <!-- 获取网站的题目--> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=""/> <!--开始加载提醒--> <TextView android:id="@+id/text_beginLoading" android:layout_below="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=""/> <!--获取加载进度--> <TextView android:layout_below="@+id/text_beginLoading" android:id="@+id/text_Loading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=""/> <!--完结加载提醒--> <TextView android:layout_below="@+id/text_Loading" android:id="@+id/text_endLoading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=""/> <!--显示网页区域--> <WebView android:id="@+id/webView1" android:layout_below="@+id/text_endLoading" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginTop="10dp" /></RelativeLayout>步骤3：依据须要实现的性能从而应用相应的子类及其办法（正文很分明了） MainActivity.java
package com.example.carson_ho.webview_demo;import android.graphics.Bitmap;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.KeyEvent;import android.view.ViewGroup;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.TextView;public class MainActivity extends AppCompatActivity { WebView mWebview; WebSettings mWebSettings; TextView beginLoading,endLoading,loading,mtitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebview = (WebView) findViewById(R.id.webView1); beginLoading = (TextView) findViewById(R.id.text_beginLoading); endLoading = (TextView) findViewById(R.id.text_endLoading); loading = (TextView) findViewById(R.id.text_Loading); mtitle = (TextView) findViewById(R.id.title); mWebSettings = mWebview.getSettings(); mWebview.loadUrl("http://www.baidu.com/"); //设置不必零碎浏览器关上,间接显示在以后Webview mWebview.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); //设置WebChromeClient类 mWebview.setWebChromeClient(new WebChromeClient() { //获取网站题目 @Override public void onReceivedTitle(WebView view, String title) { System.out.println("题目在这里"); mtitle.setText(title); } //获取加载进度 @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress < 100) { String progress = newProgress + "%"; loading.setText(progress); } else if (newProgress == 100) { String progress = newProgress + "%"; loading.setText(progress); } } }); //设置WebViewClient类 mWebview.setWebViewClient(new WebViewClient() { //设置加载前的函数 @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { System.out.println("开始加载了"); beginLoading.setText("开始加载了"); } //设置完结加载函数 @Override public void onPageFinished(WebView view, String url) { endLoading.setText("完结加载了"); } }); } //点击返回上一页面而不是退出浏览器 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK && mWebview.canGoBack()) { mWebview.goBack(); return true; } return super.onKeyDown(keyCode, event); } //销毁Webview @Override protected void onDestroy() { if (mWebview != null) { mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null); mWebview.clearHistory(); ((ViewGroup) mWebview.getParent()).removeView(mWebview); mWebview.destroy(); mWebview = null; } super.onDestroy(); }}5. 总结
本文次要对Webview进行了全面介绍
相干教程
Android根底系列教程：
Android根底课程U-小结_哔哩哔哩_bilibili
Android根底课程UI-布局_哔哩哔哩_bilibili
Android根底课程UI-控件_哔哩哔哩_bilibili
Android根底课程UI-动画_哔哩哔哩_bilibili
Android根底课程-activity的应用_哔哩哔哩_bilibili
Android根底课程-Fragment应用办法_哔哩哔哩_bilibili
Android根底课程-热修复/热更新技术原理_哔哩哔哩_bilibili
本文转自 https://juejin.cn/post/6844903479136223240，如有侵权，请分割删除。