Android中混合式开发的过程中,加载html页面的时候,如果该页面加载的资源比较多,比如css,js,公用的图片资源等,就会导致该页面加载缓慢,耗费大量的流量,这对流量限制的客户端来说,用户体验非常不好,所以就需要将这些资源存放在APP中,待APP启动的时候,直接从本地加载这些公用的资源。(本方法只针对html文件从网络上获取)

方式一:使用loadDataBaseUrl的方式

当从网络上加载的html页面中包含“file:///……”或者“content://packagename/……”(content://……这种需要重写Provider)这样的路径时,可以直接使用loadDataWithBaseURL("file:///",htmlSource,"text/html;charset=utf-8",null,null)重新加载,其中htmlSource为网页源代码。

参考"stackoverflow" Load HTML data into WebView, referencing local images?

activity中示例代码
/**
* 加载html文件
* @param path 文件路径
*/
private void loadHtml(final String path){
new Thread(new Runnable() {
@Override
public void run() {
try {
URL url = new URL(path.trim());
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setDoInput(true); //允许输入流,即允许下载
conn.setDoOutput(true); //允许输出流,即允许上传
conn.setUseCaches(false); //不使用缓冲
conn.setRequestMethod("GET"); //使用get请求
if (conn.getResponseCode() == 200){
InputStream inputStream = conn.getInputStream();
ByteArrayOutputStream baos = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
int length = -1;
while((length = inputStream.read(buffer))!=-1){
baos.write(buffer,0,length);
baos.flush();
}
final String htmlSource = baos.toString();
runOnUiThread(new Runnable(){
@Override
public void run() {
//重写
mWebView.loadDataWithBaseURL("file:///",htmlSource,"text/html;charset=utf-8",null,null);
}
});
}
} catch (Exception e) {
e.printStackTrace();
}
}
}).start();
}

H5示例代码(该h5页面是放在服务器上面的)

H5调用Native“获取地理位置”与“拍照上传“的功能


H5调用安卓“拍照上传“的功能:

css文件内容如下

.text-left{background-color:#f00}

IMG_20161214_163615.jpg

正常结果如上所示。

方式二:使用ContentProvider的方式

使用content://方式访问本地资源的时候,需要重写ContentProvider,简单代码如下:

public class LoadPicProvider extends ContentProvider {
@Override
public boolean onCreate() {
return false;
}
@Nullable
@Override
public Cursor query(Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder) {
return null;
}
@Nullable
@Override
public String getType(Uri uri) {
return null;
}
@Nullable
@Override
public Uri insert(Uri uri, ContentValues values) {
return null;
}
@Override
public int delete(Uri uri, String selection, String[] selectionArgs) {
return 0;
}
@Override
public int update(Uri uri, ContentValues values, String selection, String[] selectionArgs) {
return 0;
}
@Nullable
@Override
public ParcelFileDescriptor openFile(Uri uri, String mode) throws FileNotFoundException {
URI filePath = URI.create( "file://" + uri.getPath() );
File file = new File( filePath );
ParcelFileDescriptor parcel = null;
try {
parcel = ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return parcel;
}
}

然后在mainfest中进行注册

方式三:使用Base64的方式

ByteArrayOutputStream out = new ByteArrayOutputStream();
//TODO 文件读取需要线程操作
FileInputStream fis = new FileInputStream(imageCropUri.toString());
byte buff[] = new byte[1024];
int length = -1;
while((length = fis.read(buff))!= -1){
out.write(buff,0,length);
out.flush();
}
String fileBase64 = Base64.encodeToString(out.toByteArray(),Base64.NO_WRAP);
//将当前的fileBase64传到h5页面中,并设置到img上

js代码

方式四:使用shouldInterceptRequest进行文件资源的拦截

从API 11(Android 3.0)开始引入这个方法。shouldInterceptRequest这个回调可以通知主程序WebView处理的资源(css,js,image等)请求,并允许主程序进行处理后返回数据。如果主程序返回的数据为null,WebView会自行请求网络加载资源,否则使用主程序提供的数据。注意这个回调发生在非UI线程中,所以进行UI系统相关的操作是不可以的。

shouldInterceptRequest有两种重载。

public WebResourceResponse shouldInterceptRequest (WebView view, String url) 从API 11开始引入,API 21弃用

public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request) 从API 21开始引入

所以在使用的时候,最好两者都要进行重写。

测试代码如下

mWebView.setWebViewClient(new WebViewClient() {
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
String key = "http://localhost/";
WebResourceResponse response = null;
if (url.contains(key)) {
try {
String imgPath = url.replace(key,"");
imgPath = Uri.parse(imgPath).getPath();
InputStream localCopy = new FileInputStream(imgPath);
//当前只针对图片
response = new WebResourceResponse("image/png", "UTF-8", localCopy);
} catch (IOException e) {
e.printStackTrace();
}
}
return response;
}
});

注意:当从本地相册拍照完成后,图片的uri可能是这样的file:///storage/emulated/0/newCrop.jpg,如果这个url回调给 js是显示不出来的。因为webview根本不会自动加载。所以这个时候可以考虑在当前地址上面添加http://……这样这个url设置完成之后,才能够正常的发出。

例如我得拍照产生的image的uri如下

用拦截的方式显示不出来,然后后我改为

这样在http请求发生的时候,会被shouldInterceptRequest方法拦截