关闭

Android WebView 浅谈

标签: android解决方案webview
810人阅读 评论(0) 收藏 举报
分类:

这篇文章主要是说一下自己在实践过程中遇到的问题,以及解决方案。从以下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/

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6599次
    • 积分:193
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    andorid学习交流群
    杭州android studio讨论群 534840925 自己建的一个小群,大家可以交流学习。
    文章分类