现在h5与原生的混合开发越来越多,身为一名移动端开发人员,必须要跟随潮流步伐,掌握基本的与h5的交互技能。

手头正好有个demo,算是为开始准备混合开发的android伙伴们准备的开胃菜。

也许有同学该有疑问了,android显示html页面的不就一个webview加载url搞定了吗?有何难点。。。(我只想说,童鞋,你把webview想的太智能,太牛逼了)好吧,具体有何难点咱们往下看。

在加载html之前,我们先了解一下我们这里html的来源。

一般来说,有两种情况。1.资源文件已经部署到服务器上,直接请求服务器内的资源。此种情况大家普遍认知。2.项目中的资源(也叫本地资源),html的展示所需资源基本都在本地的资源文件夹中。as一般放置于assete内。我的项目内摆放如图:


好了,切入正题,首先,都知道一点!如何放置一个html界面,没错就是它,我们今天的主角--webview。

api里的方法:webview.loadUrl(xxxxxxx)。以为这就结束了吗兄弟们?         其实才刚刚开始

下面我们一起看一下,在交互过程中我们可能遇见的坑!

要完成的功能也很简单,就是一个记录的展示页

                            

看似很简单的两个展示页,左图为展示的条目,右图为点进去的详情

好!所有的资源文件部署到项目当中去,webview.loadUrl(xxxx);  正当悠哉悠哉的准备出结果时,发现出现的只是个架子!完全没有数据!数据哪里去了?浏览器中展示的是好好的呀!what?why?h5代码问题?检查一遍,没有呀?js问题?js。。。。。我的天,js难道不是h5里面配置的吗?直到我看到api里冒出这么一个方法:

WebSettings webSettings = webview.getSettings();webSettings.setJavaScriptEnabled(true);
嗯,大家应该都知道个大概了,h5在webview中展示时需要这么个设置才能将js使能!

好!设置完后再次编译运行,结果出来了,有数据了,点击其中一个条目,旋转陀螺式黑屏退出,什么鬼!!!

难道是点击的时候代码有问题,好,我慢慢调试,点击时我弹出个alert,观察一下。什么alert也弹不出来?

没办法了,请教一下强大的度娘,很快出来结果:

webview.setWebChromeClient(new WebChromeClient());WebChromeClient是辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等
当然,还有一些别的方法也可以,比如:
setJavaScriptCanOpenWindowsAutomatically(true);//允许js弹出窗口
不过现在普遍使用第一种。功能更多更强,具体的下篇再讨论。

ok,再调试,出数据,点击,跳转。。。画风一转,怎么跑到浏览器中去了?

原因在此:

在使用 WebView 当加载网页时,默认会调用系统的默认外部浏览器来加载页面,原因是因为 WebViewClient 中的 shouldOverrideUrlLoading 方法默认返回为false。
要使用内部的 WebView 加网页就要重写 shouldOverrideUrlLoading 方法,使其返回 true。

webView.setWebViewClient(new WebViewClient(){    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        view.loadUrl(url);        return true;        }});
至此为止,我们终于完成了一个简单的数据展示。看似简单的任务,如果没有做过的话却还要碰到这么多问题,可想而知,h5页面的加载并不是我们想象的那么简单的,尤其是复杂的页面,带有定位或者交互频繁的页面,更是处处踩雷。

这篇文章先稍稍揭开h5与webview交互的面纱,真正的“容貌”,也就是重头戏——它们之间的交互,我们下一篇再讲。




更多相关文章

  1. Android(安卓)Studio增加assets目录、raw目录
  2. 记录WebView从开始加载到渲染结束的时间
  3. 又优化了一下Android(安卓)ListView 异步加载图片(续)
  4. Android异步加载全解析之引入二级缓存
  5. Android中的WebView的使用
  6. Android加载图片防止OOM
  7. Android中WebView加载本地Html,与JavaScript与Android方法相互传
  8. Android(安卓)AndroidProgressLayout:加载页面遮挡耗时操作任务页
  9. Android图片开源库:最全面、详细的Picasso讲解

随机推荐

  1. Android反射机制实现与原理
  2. android怎么用APK调用JNI简单实例
  3. Android用Ant管理项目
  4. android DDMS 连接真机(己ROOT),用file exp
  5. Android之Searchable
  6. SQLCipher加解密Android(安卓)sqlite
  7. Android创建快捷方式
  8. fastlane实现Android自动化打包
  9. bitmap设置图片尺寸缩小,避免内存溢出/Out
  10. Building System之编译前的准备工作