看过很多金融类和购物类的app,不少应用为了能够快速开发,都采用了webview配合html js完成页面功能的展示,虽然实现此功能的代码量比较少,但是鉴于目前网上没有完整的实现步骤,在此把此步骤写下,当然这东西在面试的时候大多数可能会问到,所以在这公开给大家
1.简述你对webview的认识
webview主要用于android手机应用中的对页面展示的功能,大大简化了客户端的开发工作。该控件常用loadUrl()方法直接加载一个网页或者本地的文件(本地文件放在assets文件夹中),也可以用loadDataWithBaseURL方法加载一个字符串。不过需要注意的是在使用webview加载网页时需要在清单文件中加入访问网络的权限。
下边是webview的基本属性设置
webview.getSettings().setJavaScriptEnabled(布尔值) 表示是否支持js
webview.getSettings().setSupportZoom(布尔值)表示是否支持缩放,默认是ture 也就是支持的
webview.getSettings().setBuildInZoomControls(布尔值) 设置是否显示缩放工具,默认是false 也就是不显示的
webview.getSettings().setDefaultFontSize(int size)设置默认的字体大小,默认是16,有效值区间是1到72之间
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN)设置网页内容重新布局的模式,用于设置网页自适应屏幕的规则
需要注意的是,面试中可以提到:比方说面试官问:“使用webview遇到什么问题了吗”
我们可以这么回答:
在webview控件上点击链接打开很多页面之后,如果不做任何处理,单击系统后退按键,整个浏览器会调用finish()方法介乎自身。如果希望浏览的网页回退而不是推出浏览器,则需要在当前Activity中处理并消费掉该Back事件,同时覆盖Activity类的onKeyDown()方法。
如果点击webview控件上的链接由该空间自己来处理。则需要给webview控件添加一个事件监听对象:WebViewClient,并重写其中的shouldOverideUrlLoading()方法,对网页中的超链接按钮进行响应。当按下某个链接时。webviewclient会调用shouldOverideUrlLoading()方法,并将暗笑的url作为参数传递给该方法。
如果面试官问 webview与js如何进行交互的呀?
我们应该这样回答:
webview控件最重要的应用是与js进行互调,在android 4.2之后js的的注入需要加入注解"@javascriptInterface"
那么既然是互调,就就先说下android调用js
很简单,android端只需要在初始化webview控件时候,先开启对js的支持,然后先调用loadUrl()方法加载HTML文件,然后再次调用该方法完成对js代码的调用:比如在一个名为test的html网页中定义一个js方法
function javaCallJs(){}
document.getElementById("content").innerHTML+="java调用了js函数"
在android端我们需要做的是
1.mWebView.getSettings().getJavaScriptEnabled(true);//启用js
2.mWebView.loadUrl("file:///android_asset.test.html");//加载HTML文件
3.mWebView.loadUrl("javascript:javaCallJs()");//调用html页面中的javaCallJs()方法
搞定!
那么如何在js中调用Android中的代码呢?
首先未webview绑定一个JavascriptInterface类,JavaScript脚本通过该类对Java代码进行调用,定义一个JavascriptInterface类,具体代码如下:
1.
@JavascriptInterface//因为安全问题在android4.2之后 js只能访问带有该注解的java函数
public void startFunction(){
Toast.makeText(MainActivity.this,"js调用了java函数",Toast.LENGTH_SHORT).show();
}
2.初始化webview控件时需要绑定这个JavascriptInterface,代码如下
mWebView.addJavascriptInterface(new TestInterface(),"testInterface");
通过在绑定JavascriptInterface时设置的别名,可以使JavaScript调用Java代码,HTML中的具体代码如下
<body>
this is my html<br/>
<a onClick="window.testInterface.startFunction()">点击调用Java代码</a><br/>
</body>
搞定!!!