Android在断网时本地化显示H5错误页

前言

本篇将要介绍如何在没有网络的状态下，显示本地的H5界面,并跳回上级原生界面。
欢迎加入学习小组QQ群: 193765960。

版权归作者所有，如有转发，请注明文章出处：https://xiaodanchen.github.io/archives/

实现本地化H5界面：

本地化HTML文件，CSS文件，JS文件，图片资源等：

//在Android工程assets目录下保存H5界面相关资源和文件，例如：
|assets-----
       |
       |--error.html
       |--css\error_style.css
       |--js\error.js（由于功能简单，我的demo中就没有单独写成js文件，直接在HTML中实现）
       |--img\error.png
       |

//error.html资源的引用
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
  <title>抱歉，信息加载失败</title>
    //加载css样式
    <link rel="stylesheet" type="text/css" href="file:///android_asset/css/error_style.css" />
    
    //js接口定义:也可以写成单独的js文件，目录如CSS资源加载目录
    <script type="text/javascript">
        function back() {
            window.location.href = "activity:finish";//使用重定向，在webActivity中去捕获,"activity:finish"可自行定义
        }
    </script>
</head>
<body class="ww">
-->
<div class="yyyy">
  //加载图片资源
  <img src="file:///android_asset/img/error.png">
</div>
<div class="aaaa">抱歉，信息加载失败</div>
<div class="bbbb"><a href="javascript:back();">返回</a></div>
</body>
</html>

点击返回，跳转到上级原生界面：

//WebActivity中捕获重定向url
mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(url.length() != 0 && url.startsWith("activity:finish")){
        	finish();
        }else{
        	view.loadUrl(url);
        }
        return true;
    }
}

如何使用：

//在需要使用该本地资源的地方重新复制URL：
//XXXActivity：
url = "file:///android_asset/error.html";
 
//WebActivity:
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
	super.onReceivedError(mWebView, errorCode, description, failingUrl);
	//判断网络状态的代码请自行实现
	if(NetWorkUtil.getNetWorkState(WebPageActivity.this) == -1){
		view.loadUrl("file:///android_asset/error.html");
	}
}