android webview与H5混合开发,webview自定义缓存
公司开发的一个项目为Android+H5混合开发,虽然开发量对于原生来说不大,但是针对于H5与android结合的各种坑让初次接手这种开发模式的新手简直不可描述可怜,同样的功能在iOS上面运行的好好的,在Android上面各种问题,这种适配简直烦到极点,真的想竖起中指对着天空大喊一声 太阳你大爷。。。发火废话就不说了,下面记录开发中遇到的一些问题,新手第一次写博文,写的不好不对的地方敬请指教,谢谢!
附上webview缓存demo下载地址---------->>>>>>demo地址
一· 混合开发
混合开发中,原生所做的工作很简单,在布局方便,逻辑方面几乎不做什么,只有在H5实现麻烦的时候,或者android特定的时候再去做一些逻辑的判断,主要解决的就是一些H5的交互,混合开发中的BUG之类的。混合开发现在越来越多,其好处就是跨平台,维护方便,在IOS与android两种平台中都可以顺利运行,维护方便,大大降低了开发成本,但是如果细节处理不到位,体验就会很差,下面看细文。
二. 项目大体流程
1.布局方面,以下是我的项目布局,可以看出几乎没什么东西,一个简单的imageview,用来设置APP的启动页,一个webview用来展示H5。当然如果更简单的话,xml里面一个单纯的linearlayout嵌套一个webview就可以了。
4
三.activity方面
因为是混合开发,所以在activity中代码也不繁琐。
package cn.Arthur.Test.WebTest;import android.app.Activity;import android.graphics.Bitmap;import android.os.Bundle;import android.view.KeyEvent;import android.webkit.WebResourceResponse;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;public class MainActivity extends Activity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);webView = (WebView) findViewById(R.id.webView);//支持JswebView.getSettings().setJavaScriptEnabled(true);//设置是否开启DOM存储API权限,默认false,未开启,设置为true,WebView能够使用DOM storage APIwebView.getSettings().setDomStorageEnabled(true);//设置默认编码webView.getSettings().setDefaultTextEncodingName("UTF-8");//开启数据库功能webView.getSettings().setDatabaseEnabled(true);//开启web缓存功能webView.getSettings().setAppCacheEnabled(true);// 设置缓冲大小,我设的是8MwebView.getSettings().setAppCacheMaxSize(1024 * 1024 * 8);//设置数据库db文件目录webView.getSettings().setDatabasePath(extStorageAppBasePath.toString()); // API 19 deprecated//设置缓存路径webView.getSettings().setAppCachePath(extStorageAppCachePath.toString());//设置在WebView内部是否允许访问文件,默认允许访问。webView.getSettings().setAllowFileAccess(true);//设置缓存模式webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//设置WebView是否使用viewport,当该属性被设置为false时,加载页面的宽度总是适应WebView控件宽度;//当被设置为true,当前页面包含viewport属性标签,在标签中指定宽度值生效,如果页面不包含viewport标签,//无法提供一个宽度值,这个时候该方法将被使用。webView.getSettings().setUseWideViewPort(true);//必须设置setWebviewclient 自定义的继承于webviewclient的类就是用来拦截url处理一些与H5交互的时候的逻辑 webView.setWebViewClient(new MyWebViewClient());}//监听手机物理返回键并设置public boolean onKeyDown(int keyCode, KeyEvent event) {if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {//webview调用goback后会返回到上一次的浏览页面,跟PC端浏览器的后腿是一样的道理webView.goBack();return true;}return super.onKeyDown(keyCode, event);}//自定义的webviewclient,用来拦截url处理一些与H5交互的时候的逻辑等class MyWebViewClient extends WebViewClient {//此方法可以使H5在webview中显示,而不是手机浏览器public boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}//访问url开始时候触发public void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);}//访问url结束时候触发public void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);}//重写该方法可以加载一些手机本地资源等,文章下面会对该方法有详细介绍@Overridepublic WebResourceResponse shouldInterceptRequest(WebView view,String url) {// TODO Auto-generated method stubreturn super.shouldInterceptRequest(view, url);}//与上方法一样,以下会有介绍@Override public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return super.shouldInterceptRequest(view, request); }}}
四. webview的各种设置
在这种混合开发中,必定用的就是webview来加载H5的页面(这里推荐腾讯的X5,可以自己在百度上搜,个人感觉封装的很齐全,集成也简单,关键是jar包小到不可思议,只有区区的200多K),既然是混合开发,那么注定与H5的交互就不可避免了,当然也需要设置各种属性来支持webview,除了针对于webview的设置外,我们还需要获取websetting这个类来帮助我们进行一些辅助设置,很必要哈。。。
//支持JS,此项必不可少webSetting.setJavaScriptEnabled(true);//1.网上说是设置此选项提高渲染的优先级,webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);//2.首先阻塞图片,让图片不显示webSetting..setBlockNetworkImage(true); //3.页面加载好以后,在放开图片:webSetting.setBlockNetworkImage(false);// 设置缓存模式(下面会详细介绍缓存)webSetting.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);// 开启 DOM storage API 功能webSetting.setDomStorageEnabled(true); webSetting.setAllowFileAccess(true);//开启 database storage API 功能webSetting.setDatabaseEnabled(true);//开启 Application Caches 功能webSetting.setAppCacheEnabled(true);//设置db文件缓存路径,但是在API4.4之后webview内核改为chrome后发现并没有什么卵用,4.4之前的确是有缓存的db文件,亲测webSetting.setDatabasePath(MyApplication.extStorageAppDatabase.toString());//设置加载的缓存路径,4.4之后在制定路径后,的确有缓存文件webSetting.setAppCachePath(myApplication.getCacheDir().toString());//此设置是否保存H5表单数据,发现一个蛋疼的问题,在小米手机上当H5 input框设置为search后,当点击input框的时候//竟然会有历史的搜索记录,而且样式十分难看,设置此属性可以取消历史搜索记录webSetting.setSaveFormData(false);//webviewClient类设置webview,重写该类可以通过其中的方法设置你想要的信息,以下会有详细记录web.setWebViewClient(new MyWebViewClient(this));//同上web.setWebChromeClient(new MyWebChromeClient());//此设置为添加JS对象,以下会有详细解释web.addJavascriptInterface(new setApp(), "setting");
五.详细介绍web.addJavaScriptInterface()此方法
在混合开发中,免不了与H5进行通信,传值使APP运行,此方法可以使H5的js与原生进行通信,进行传值的操作,
首先,我们需要声明一个
web.addJavascriptInterface(new TrueName(MainActivity.this),"personName");
括号中,第一个参数是一个类,后面是这个类所对应的对象,如上方,personName就是用来与H5进行交互的对象,这个对象是原生与H5进行商量好后敲定的,双方都需要使用,而TureName类如下方,这个类当初是我原生方面需要点击H5然后弹出自己的activity所做的,当然我的是对应的功能实现对应的类,在开发中,也可以只声明一个对象,然后对应的类中实现所有的与H5交互的方法,这样更简单,需要注意的是声明的发放必须带有@JavascriptInterface注解,否则不会生效,这个是有版本控制的,好像是在4.4之前的话是没这个注解的,具体的我也没有深究,这个注解很重要。
/** * 与JS交互的弹出实名认证页面 */ public class TrueNameC { Context context; public TrueNameC(Context context) { this.context = context; } @JavascriptInterface public void trueName() { startActivity(new Intent(context, IdCardActivity.class)); } /** * 跳转身份证页面 * String flag就是H5给原生传的参数,H5在JS中写入personName.trueName("小明"),原生就可以接收到信息 */ @JavascriptInterface public void trueName(String flag) { Log.i("cpf", "flag====" + flag); Intent intent = new Intent(); intent.setClass(MainActivity.this, IdCardActivity.class); intent.putExtra("infoFlag", flag); intent.putExtra("userId", ConStants.USERID); startActivity(intent); } }
六.webviewclient详解
在开发过程中,虽然为混合开发,但是不可能什么逻辑,都是H5来写的,原生总得处理一些逻辑,如url的截取,判断webview显示当前的url是你想要的url的时候做一些代码逻辑,这个也挺重要,此时就要用到webviewclient了,于此同时还有webchromeclient,就不在此赘述了。
在重写webviewclient中的方法中,有如下方法是常用的
1.shouldOverrideUrlLoading并不是每次都在onPageStarted之前开始调用的,就是说一个新的URL不是每次都经过shouldOverrideUrlLoading的,只有在调用webview.loadURL的时候才会调用。若此方法的返回值 return super.shouldOverrideUrlLoading(view, url);则会跳到手机浏览器,return false代表webview处理url是在webview内部执行的,return true代表webview处理url是根据程序来执行的。
2.OnReceivedError(),这个方法是加载出错的时候响应,因为我们可以用来加载出错页面
3.OnLoadResource(),这个方法是在加载网络资源的时候触发,无论是图片,json,还要是网络资源,都会触发此方法。
4.onPageStarted(),当webview开始加载url的时候,会进入这个方法。
5.OnPageFinished(),当url加载完成后,触发次方法,我的项目中就是用这个方法进行拦截的,举个例子,如我要判断当前url如果是index的话,我要进行一个toast,如下方,就可以触发toast。
// 在加载页面完成后响应
@Override
public void onPageFinished(WebView view, final String url) {
pdUrl = url.substring(url.lastIndexOf("/") + 1);
if (pdUrl.equals("index")) {
Toast.ma,keText(MainActivity.this, pdUrl + "~~", 0).show();
} }
6.shouldInterceptRequest(WebView view, WebResourceRequest request) ,这个方法我们可以用来加载一些本地资源,如混合开发中,基本所有的页面都是由H5进行实现的,而H5页面中的一些图片肯定也是对应的一个url,因此在此方法中,我们可以通过request拿到这个图片你的url,当判断是这个url的时候我们就可以加载本地资源,替换要加载的url,这样做不仅加快了响应速度,显示速度,而且省流量,也因此我们可以使用这个来做自定义缓存,文章下方会详细介绍。
7.shouldInterceptRequest(WebView view, String url),这个方法与上方的方法基本没有什么不同,功能是一样的,String参数被后来的WebResourceRequest参数所替代,这样可以拿到请求是post还是get,header等诸多信息,区别就是这个方法是4.4之前的,而上面的方法是4.4之后的(好像是4.4)这个方法已经被废弃,但是楼主观察过,在执行顺序上是这个方法先执行,而当我们做自定义缓存的时候,4.4之前是没有上面那个方法的,为了适配,所以建议还是使用此方法。
七.webview自定义缓存
重点来了,因为4.4之后,google更改了webview内核,使用chrome。而当我们在指定了APP的缓存目录后就可以发现由chrome缓存下来的文件,但是却无法控制,而且在我的项目中,由于H5框架的原因,我的webview取到缓存后断网情况下都无法正常显示,这就非常蛋疼了,因此结合网上资料自定义了缓存,在自定义缓存的过程中,我们需要判断当前的url指向的是图片,json,html,还是js,以下是代码,方便摘抄,先看我的webviewclient中的缓存方法,在判断url的后缀是那种类型后,设置文件的type,然后再交给缓存类DVDUrlCache。
@Override public WebResourceResponse shouldInterceptRequest(WebView view, String url) { //读取当前webview正准备加载URL资源 if (url.indexOf("?") != -1) { url = url.substring(0, url.lastIndexOf("?")); } try { //根据资源url获取一个你要缓存到本地的文件名,一般是URL的MD5 resFileName = getResourcesFileName(url); if (TextUtils.isEmpty(resFileName)) { return null; } if (url.lastIndexOf("html") != -1) { isType = "text/html"; } else if (url.lastIndexOf("png") != -1) { isType = "image/png"; } else if (url.lastIndexOf("js") != -1) { isType = "text/javascript"; } else if (url.lastIndexOf("css") != -1) { isType = "text/css"; } else if (url.lastIndexOf("ico") != -1) { isType = "image/ico"; } else if (url.lastIndexOf("jpg") != -1) { isType = "image/jpg"; } else { isType = "application/json"; } if (isNetworkConnected(MainActivity.this)) { if (url.indexOf("getgoodsSkuLists") != -1) { url = url + "?pageNow=1&pageSize=1000"; dvdUrlCache.register(url, resFileName, isType, "UTF-8", dvdUrlCache.ONE_DAY); dvdUrlCache.load(url); return null; } else if (url.indexOf("getUserShoppingCar") != -1//购物车 ) { return null; } else if (url.indexOf("getGoodsSkuDetail") != -1) {//商品详情图片 return null; } else if (url.indexOf("getIsSkuExist") != -1) { return null; } } //url包含以下这些路径的时候不对其进行缓存 if (url.indexOf("getRandKey") != -1//密码键盘 || url.indexOf("getMappingAarry") != -1//密码键盘 || url.indexOf("getByParentIdAndType") != -1//新建地址 || url.indexOf("getIsentReadCount") != -1 || url.indexOf("svg") != -1//密码键盘资源 || url.indexOf("getUserShoppingCar") != -1//购物车 || url.indexOf("getuserinfo") != -1//获取用户是否认证 || url.indexOf("getGoodSkuProp") != -1//过去商品详 || url.indexOf("newsManagement") != -1 || url.indexOf("getUserMessages") != -1 || url.indexOf("getAllMessageType") != -1 ) { return null; } //这里是处理本地缓存的URL,缓存到本地,或者已经缓存过的就直接返回而不去网络进行加载 dvdUrlCache.register(url, resFileName, isType, "UTF-8", dvdUrlCache.ONE_DAY); Log.i("whj", url + "====" + resFileName + "===" + isType); if (isNetworkConnected(MainActivity.this)) { dvdUrlCache.load(url); return null; } else { return dvdUrlCache.load(url); } } catch (Exception e) { } return null; }同时用到了一个转换MD5名字的方法,如下public static String getResourcesFileName(String content) { byte[] hash; try { hash = MessageDigest.getInstance("MD5").digest(content.getBytes("UTF-8")); } catch (NoSuchAlgorithmException e) { throw new RuntimeException("NoSuchAlgorithmException", e); } catch (UnsupportedEncodingException e) { throw new RuntimeException("UnsupportedEncodingException", e); } StringBuilder hex = new StringBuilder(hash.length * 2); for (byte b : hash) { if ((b & 0xFF) < 0x10) { hex.append("0"); } hex.append(Integer.toHexString(b & 0xFF)); } return hex.toString(); }接下来缓存所要使用到的类,用来缓存数据,保存下来ThreadPoolManager类import android.util.Log;import java.util.concurrent.Callable;import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;import java.util.concurrent.FutureTask;/** * 线程池 * * Created by hongminghuangfu on 16/9/9. */public class ThreadPoolManager { private static final String LOG_TAG = "ThreadPoolManager"; private static final ThreadPoolManager instance = new ThreadPoolManager(); private ExecutorService threadPool = Executors.newFixedThreadPool(100); public static ThreadPoolManager getInstance() { return instance; } /** * @param runnable 不返回执行结果的异步任务 */ public void addTask(Runnable runnable) { try { if (runnable != null) { threadPool.execute(runnable); } } catch (Exception e) { Log.e(LOG_TAG, "", e); } } /** * @param callback 异步任务 * @return 你可以获取相应的执行结果 */ public FutureTask addTaskCallback(Callable callback) { if (callback == null) { return null; } else { FutureTask futureTask = new FutureTask<>(callback); threadPool.submit(futureTask); return futureTask; } }// 这是一个demo,如果你看不懂,可以打开跑一下// public static void main(String args[]) {// FutureTask ft = ThreadPoolManager.getInstance().addTaskCallback(new Callable
更多相关文章
- Fatal signal 11 (SIGSEGV), code 1, fault addr 0x34 in tid 75
- [Android]用架构师角度看插件化(2)-Replugin 唯一hook点
- 【Android自定义View】 仿照腾讯漫画自定义Toast的实现
- Kotlin在Android端的基本用法详解
- [置顶] android下调试3G之自动拨号
- Android绘图机制(一)——自定义View的基础属性和方法
- Android中使用SAX对XMl文件进行解析
- Android优雅地处理按钮重复点击
- Android(安卓)ContentProvider数据共享全解析