这篇文章主要是说一下自己在实践过程中遇到的问题,以及解决方案。从以下2点开始阐述。
1.如何与后台交互
2.title和回退箭头的设置
首先,我们不可能只加载一个静态的h5页面,必须要与后台交互,才能更好的展现我们要展现的东西,下面开始说我的做法。
第一步当然是要加载我们的页面
mWebView.loadUrl(mWebUrl);
第二步是设置webview的属性(根据需求来设置,不过一般也没什么问题)
mWebView.getSettings().setJavaScriptEnabled(true);//设置可以识别JavaScript
mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
//mWebView.getSettings().setPluginsEnabled(true);
//mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setSupportZoom(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.clearCache(true);
//这里是进度条(在导航栏和webview之间可以加一个rogressBar)
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
mProgressBar.setProgress(newProgress);
if (newProgress == 100) {
mProgressBar.setVisibility(View.GONE);
} else {
mProgressBar.setProgress(newProgress);
mProgressBar.postInvalidate();
}
super.onProgressChanged(view, newProgress);
}
});
第三步就是重点了,咱们要开始和后台交互了,那到底要怎么交互呢?大家仔细看会发现我设置webview的时候有一句代码
mWebView.getSettings().setJavaScriptEnabled(true);//设置可以识别JavaScript
对!没错,这仅仅是可以识别js代码,但是js要调用我们的java代码还得再加一句
mWebView.addJavascriptInterface(new JsInterface(getActivity()), "AndroidWebView");
好,我们对网页开启了我们的权限之后,接下来就要开始通信了,我们先让js调用我们的方法,下面是我JsInterface的类。
private class JsInterface {
private Context mContext;
public JsInterface(Context context) {
this.mContext = context;
}
//在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。
@JavascriptInterface
public void showInfoFromJs(final String biaoti, final String url, final String description){
Toast.makeText(mContext, title+"~~~~"+url, Toast.LENGTH_SHORT).show();
}
}
接下来我们调用js的方法:
//在java中调用js代码
public void sendInfoToJs() {
//调用js中的函数:showInfoFromJava(msg)
String name="lalala";
mWebView.loadUrl("javascript:showInfoFromJava('" + name + "')");
}
到这里为止,我们已经可以和js通信了。但是又会出来新的问题,就是当我们在h5页面里多次点击,跳转多次页面之后,我们该如何控制导航栏的title名称以及是否加入回退键呢?这就是我们要解决的第二个问题。
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
back.setVisibility(View.VISIBLE);
view.loadUrl(url);
return false;
}
});
根据使用这个方法的经历,它在加载下一个h5页面的时候会执行,也就是说只要这个方法执行,那我们就可以给导航栏加一个回退箭头。话是这样没错,但是我还遇到了一个小插曲,就是h5前端没有做防刷新的处理,界面刷新了以后也是会执行,但是并没有进入下一个页面,出现回退箭头就很尴尬了,这一点一定要注意!
然后我发现WebViewClient还有一个方法,就是页面加载完成的方法,这样我们可以设置导航栏的title。
@Override
public void onPageFinished(WebView view, String url) {
tv_title.setText(view.getTitle());
}
对,没错,在这里我们就设置好了我们的头部。不过这里也有一个大坑存在!大家请注意,这个方法貌似会执行2次,一次是已经加载好的页面,一次是要进入的下一个界面,我本来想在这里隐藏和显示回退箭头的,但是执行2次到了最顶层的时候箭头会出现一种情况,“回退图标隐藏闪烁”,这个效果就很差了。我们只能用取巧的方式来解决,但是这里一定要注意。
接下来就是回退箭头的处理了,我给回退箭头加了一个事件来处理这层逻辑。
switch (v.getId()){
case R.id.back:
if(mWebView.canGoBack()){
mWebView.goBack();
if(!mWebView.canGoBack()){
back.setVisibility(View.GONE);
}
}
break;
}
简单说一下这里的逻辑,canGoBack方法是判断能否返回上一页,GoBack的意思也就很清楚了。这段代码的逻辑就是:当我能回退的时候我先返回上一页,返回以后我再查看webview是否能再返回,如果没有上一页了就隐藏回退箭头,到这里为止,我们已经大概能满足我们的需求了。
不过在网上查资料的过程中,貌似webview的问题很多,这里分享一个别人的博客供大家学习。
http://blog.csdn.net/t12x3456/article/details/13769731/