android webview与h5交互时所遇到的坑

现在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交互的面纱，真正的“容貌”，也就是重头戏——它们之间的交互，我们下一篇再讲。

更多相关文章

随机推荐