Hi,欢迎来到中国嵌入式培训高端品牌 - 华清远见嵌入式学院<北京总部官网>,专注嵌入式工程师培养13年!
当前位置: > 嵌入式学院 > 嵌入式学习 > 讲师博文 > WebView的简单使用
WebView的简单使用
时间:2016-12-29作者:华清远见

有时候我们可能会碰到一些比较特殊的需求,比如说要求在应用程序里展示一些网页。相信每个人都知道,加载和显示网页通常都是浏览器的任务,但是需求里又明确指出,不允许打开系统浏览器,而我们当然也不可能自己去编写一个浏览器出来,这时应该怎么办呢?

不用担心,Android 早就已经考虑到了这种需求,并提供了一个 WebView控件,借助它我们就可以在自己的应用程序里嵌入一个浏览器,从而非常轻松地展示各种各样的网页。

一、WebView通过Url加载网页

WebView是View的子类,能够让一个网页内容看起来像是你应用程序的一部分一样。它只提供页面显示的功能,默认情况下不提供浏览器应具备的导航等功能。

首先我们来看一下WebView的简单使用:

1、获得WebView的实例;

2、调用WebView类中的loadUrl(String url)方法,加载指定的网址;

3、在工程的清单文件中添加上网权限

清单文件中的上网权限:

Java代码:

public class MainActivity extends Activity {

WebView vb;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

vb = (WebView) findViewById(R.id.webView1);

vb.loadUrl("http://www.baidu.com");

}

}

当运行上面的代码后你会发现,程序会启动默认的浏览器来打开我们指定的网址,但是我们所希望的是在当前的应用中显示网页,那下面给大家介绍WebViewClient这个类以及其中的一些常用方法。WebViewClient类主要是用来帮助WebView处理各种通知、请求事件的,这其中有一些常用方法:

(1) shouldOverrideUrlLoading(WebView view, String url),当加载的网页需要重定向的时候就会回调这个函数。

参数1:WebView对象

参数2:需要加载的url地址

返回值:return true意味着主程序接管网页加载,让我们自己操作,如果返回false让webview自己处理。

(2) onPageStarted(WebView view, String url, Bitmap favicon), 开始加载页面的回调;

(3) onPageFinished(WebView view, String url), 加载完成的回调。

当我们需要重写上述方法时需要调用WebView中setWebViewClient (WebViewClient client)方法,下面在原来代码更改为用Webview控件显示网页,代码如下:

public class MainActivity extends Activity {

WebView vb;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

vb = (WebView) findViewById(R.id.webView1);

//设置Webview

vb.setWebViewClient(new WebViewClient(){

@Override

//重写shouldOverrideUrlLoading方法

public boolean shouldOverrideUrlLoading(WebView view, String url) {

return false;

}

});

vb.loadUrl("http://www.baidu.com");

}

}

运行效果如下:

二、WebView加载HTML字符串

有时候我们的webview可能只是html片段,而不是一个完整的网页,事实上绝大多数时候都是如此,完整的网页无需做成应用,而直接在浏览器访问。

这种情况我们使用 LoadData 或者 loadDataWithBaseURL方法,后者用的最多,这里需要调用WebView中的loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方法:

参数1:作为该网页的base page。可设置为null。

参数2:html字符串

参数3:类型,html数据需要设置为“text/html”

参数4:字符集,如果有中文需要设置为“utf-8”

参数5:历史网页的url,可设置为null。

下面是一个简单的实例,代码如下:

public class MainActivity extends ActionBarActivity {

WebView wb;

String data = "" +

"" +

"敢问路在何方,路就在脚下" +

"";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

wb = (WebView) findViewById(R.id.webView1);

wb.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);

}

}

运行结果如下:

三、WebView中JavaScript与Andorid中java方法互调

随着h5在移动端的普及,移动端对webview的使用越来越平凡,有的界面也不仅仅局限于网页的显示,很多时候就要涉及到webview与javascript代码之间的交互,这对于移动端工程师和web端工程师都是一个挑战,下面来总结下它们之间的交互和注意事项。

先说JavaScript中调用android代码,默认情况下,从WebView的界面中无法触发html中的JavaScript脚本,我们需要使能JavaScript功能,这样WebView才有能力处理html中的JavaScript脚本。使能JavaScript对应的方法为setJavaScriptEnabled(boolean flag),该方法并不是WebView类中方法,它的使用过程如下:

(1)调用WebView中getSettings()方法获取WebSettings对象;

(2)调用WebSettings对象的实例方法setJavaScriptEnabled。

当参数设置为true时,表示使能JavaScript。

要想完成JavaScript调用android代码,还需介绍一个方法,WebView类中的addJavascriptInterface(Object object, String name),

参数1:供JavaScript调用的对象

参数2:在JavaScript中使用的名字

该方法是这里的重点,将一个java对象绑定到一个javascript对象中,javascript对象名就是interfaceName,作用域是Global。

我们可以在JavaScript中调用Java中的函数的步骤如下:

(1)创建WebView对象

(2)使能WebView对象的JavaScript功能

(3)创建类,该类作为JavaScript调用Java代码的接口

(4)在该类中暴露方法,供JavaScript调用,注意:API 17之后的版本需 要添加注解@JavascriptInterface。

(5)将接口类对象添加给WebView

addJavascriptInterface(Object, String)

(6)在html中添加JavaScript代码,调用Java对象中暴露的方法。

具体代码如下:

MainActivity:

public class MainActivity extends ActionBarActivity {

WebView wb;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

wb = (WebView) findViewById(R.id.webView1);

//使能JavaScript

wb.getSettings().setJavaScriptEnabled(true);

//绑定对应java对象到JavaScript

wb.addJavascriptInterface(new MyJavaScript(this), "MyJavaScript");

//加载本地文件

wb.loadUrl("file:///android_asset/my.html");

}

}

本地文件放在asset目录下,调用时路径格式为file:///android_asset/xx。

自定义JavaScript调用java的类:

public class MyJavaScript {

Context context;

public MyJavaScript(Context context) {

super();

this.context = context;

}

//供JavaScript调用的java方法,此处须与JavaScript中script标签中调用的方法名一致

public void ShowToast(String str){

Toast.makeText(context, str, Toast.LENGTH_SHORT).show();

}

}

本地HTML文件:

//输出内容有中文时加上

type="button" id="button1" onclick="callAndroid();" >

点击js调用java代码

该HTML文件显示的页面只有一个“点击js调用java代码”的按钮,点击该按钮后会触发script中定义的点击事件方法callAndroid(),该方法会调用java代码中相对应的方法,从而实现JavaScript中调用android代码。运行效果如下,点击按钮后会弹出一个Toast:


发表评论

全国咨询电话:400-611-6270,双休日及节假日请致电值班手机:15010390966

在线咨询: 曹老师QQ(3337544669), 徐老师QQ(1462495461), 刘老师 QQ(3108687497)

企业培训洽谈专线:010-82600901,院校合作洽谈专线:010-82600350,在线咨询:QQ(248856300)

Copyright 2004-2017 华清远见教育集团 版权所有 ,沪ICP备10038863号,京公海网安备110108001117号