前言
-
当初很多 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 必须设置反对 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 中缓存
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() {
@Override
public 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，如有侵权，请分割删除。