• WebView具体介绍


    PART_0    侃在前面的话

    WebView是Android提供给我们用来载入网页的控件。功能非常强大。我们经常使用的手机淘宝。手机京东的Androidclient里面大量使用到了WebView。可是使用WebView比使用其它是更加耗电的,那为什么淘宝和京东还是要使用WebView作为APP里的部分,首先大家知道,淘宝,京东等在移动技术还不热的时候就有了一套完好的网页系统,所以使用WebView能够直接使用之前的逻辑。省时省力省钱。并且作为电商,每天的内容都是不同的。所以大家要及时更新。放在我们client来做肯定是不行的,你不能让用户一天下一个版本号吧?并且也不能拿我们程序当狗使啊,一天一个版本号。谁受得了?



    PART_1    WebView基本使用

    使用WebView非常easy。接下来我们就细细道来。

    1. 得到WebView能够通过findViewById()的方法得到,也能够使用new WebView()的方式得到。所以得到WebView是第一步(废话,不得到WebView。你上哪去显示?)


    2. 得到了WebView后,那就简单了,随便找个能够载入的链比方“http://www.baidu.com”,使用webView.loadUrl("http://www.baidu.com");就得到我们想要载入的界面。假设想载入我们存放在本地的html文件,比方assets里面。能够使用这个路径:file:///android_asset/xxx.html。


    3. 得到了我们想要的界面后,发现假设我们点击当中的button并没不论什么效果,由于默认情况下WebView是不支持javascript的。所以我们要在代码里设置:getSettings().setJavaScriptEnabled(true);

    设置了这个以后,页面是不能缩放的。加入这个能够是页面缩放:getSettings().setBuiltInZoomControls(true);


    4. 上面点击有效果了,可是发现点击之后,并非在我们当前的WebView视图中进行转跳,事实上这个也好理解。你让人家转跳,可是你又拿着当前的WebView,那它能怎么转跳?所以人家就跟系统请求浏览器去跳转了。假设你的功能刚好是这个。那一切OK。功能实现了。可是假设你的功能不是这,所以得想办法解决啊,怎么解决?看以下:

    wv.setWebViewClient(new WebViewClient() {
    	@Override
    	public boolean shouldOverrideUrlLoading(WebView view, String url) {
    		// TODO Auto-generated method stub
    		view.loadUrl(url);
    		return true;
    	}
    });
    代码非常easy懂。view.loadUrl(url)就是让WebView载入新的url。以下呢?以下返回true的意思是我就在当前的webView中转跳。


    PART_2    WebView返回和获取网页标题

    经过上面的那些,事实上我们发现了一个问题,如何回退到我们上个页面?由于我们发现,仅仅要转跳后,按返回键是回不到我们上个url的,仅仅会结束掉当前的Activity,所以这里我们就要复写按键事件了,例如以下:

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
    	if (keyCode == KeyEvent.KEYCODE_BACK) {
    		if (wv.canGoBack()) {
    			wv.goBack();
    			return true;
    		}
    	}
    	return super.onKeyDown(keyCode, event);
    }
    (注解:wv就是WebView的实例)

    好。上面的返回也写好了,可是有个问题。怎么样获取到当前页面的标题?这里事实上谷歌早就提供了方法,例如以下:

    wv.setWebChromeClient(new WebChromeClient() {
    	@Override
    	public void onReceivedTitle(WebView view, String title) {
    		MainActivity.this.setTitle(title);
    		super.onReceivedTitle(view, title);
    	}
    });
    获取到标题以后,我这里是将标题设置到ActionBar上面去了,非常easy。可是非常有用


    次奥,看完你一定会说,MD,回退的时候标题根本没有换回来啊?是的。怎样解决呢?看以下:

    wv.setWebViewClient(new WebViewClient() {
    	@Override
    	public boolean shouldOverrideUrlLoading(WebView view, String url) {
    		// TODO Auto-generated method stub
    		view.loadUrl(url);
    		return false;
    	}
    	
    	@Override
    	public void onPageFinished(WebView view, String url) {
    		setTitle(view.getTitle());
    		super.onPageFinished(view, url);
    	}
    });
    看到onPageFinished这种方法了么,看完以后,你一定会跳起来说一句。原来获取title,能够这样。那我事实上全然能够不用上面的方法setWebChromeClient()的方法。

    推荐篇文章看了你就大致知道为什么了:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=542884


    PART 3     js与android交互

    首先写一个简单的html页面:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
      <title>互调JS</title> 
      <script type="text/javascript">
      	function test() {
    		try {
    			window.external.callApp("afterChosen", 1059);
    		} catch(e) {
    			document.getElementById("content").innerHTML = "call fail!"
    		}
    	}
    
    	function afterChosen(){
    		document.getElementById("content").innerHTML = "callback success!";
    	}
    	</script> 
     </head> 
     <body> 
      <p id="content">最開始的数据</p> 
      <input type="button" value="点击调用app" onclick="test()" />  
     </body>
    </html>

    非常easy,就是点击了button以后调用test()方法,然后在test()方法中在调用android中的callApp函数。可是为了使得js里面的代码可以正确调用到我们的方法,我们须要加一段这种代码:

    wv.addJavascriptInterface(this, "external");

    这里的this代表的是MainActivity.this,然后后面的參数跟我们js代码里写的window.external.callApp()要一致。然后我们在实现callApp方法:

    @JavascriptInterface
    public void callApp(final String funcName, final int n) {
    	wv.post(new Runnable() {
    		public void run() {
    			wv.loadUrl("javascript:" + funcName + "()");
    		}
    	});
    }


    这块要注意,我们的webview是一个单独的线程中运行的,假设你直接在UI线程中调用wv.loadUrl("javascript:" + funcName + "()")是会抛异常的,不信你能够试试。。

    。wv.post就是将以下运行的代码post到webview所在的线程中,这样就能够顺利的运行了。

    回调js函数是要遵循一定的格式的。否则是调不动的,格式非常easy就是在我们要调用的函数前面加上: javascript:

    看看最后的效果:



    OK。 这篇文章就介绍到这里!

    期待我的下一篇文章。绝对会让你大吃一惊。





  • 相关阅读:
    适配器模式
    控制器的显示注入
    自定义过滤器
    配置路由
    JavaScript判断浏览器类型及版本(新增IE11)
    路径别名
    判断是否是IE浏览器和是否是IE11
    页面视图中的按钮操作指向
    安卓开发环境搭建与环境变量设置
    html中iframe子页面与父页面元素的访问以及js变量的访问
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5383087.html
Copyright © 2020-2023  润新知