Android在断网时本地化显示H5错误页
2017-10-20 本文已影响37人
肖丹晨
前言
本篇将要介绍如何在没有网络的状态下，显示本地的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">
//加载图片资源
</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");
}
}
