WebView介绍
webView 是一个可以显示网页的控件,
webView加载内容
loadUrl()方法webView加载页面,可以是url = "http://192.168.1.33:8080/" 或 本地页面"file:///android_asset/index.html" webView1.loadUrl(url);
webView的常用设置
当webView对象构造生成时,便会生成一个默认的webset对象,里面包含了默认的设置,可以用webSet = webView.getSettings();取得webset的引用,并对其进行修改。
由此可见:webViewClient的作用就是获得我们webview页面返回来的信息,进而决定是否给与处理。
在webView中打开新连接
用setWebViewClient方法设置webView客户端,用于接收webView发出的请求,通常的用法是覆盖其中的方法,自己处理相关的事件,如:shouldOverrideUrlLoading(WebView view, String url);在自身webView中打开新的超链接。
webView中后退键和前进的处理
覆盖Activity中onKeyDown()方法,监听后退按键,并检测当前webView是否可以后退。如果可以后退,调用webView.goBack()方法。同理前进用 webView.goForward()方法。
webView页面刷新
webView页面需要刷新时,调用reload()方法即可。
webView页面加载事件
当页面开始加载时和页面加载完成时如果要处理事件,只需覆盖webViewClient对象的 onPageStra
webView页面加载进度
为webView设置一个浏览器客户端webView.setWebChromeClient(new WebChromeClient()),并覆盖onProgressChanged方法,就可以获得当前网页的加载进度
webView中页面的优化
当点击页面时,隐藏地址栏和工具按钮,当点击menu按键时,显示地址栏和工具按钮。
1、为webView设置onTouch监听,但要注意 返回值要为false,将此事件继续向下传递。否则会出现问题如超链接不起作用。
2、覆盖Activity中的onPrepareOptionsMenu方法,此方法在每次点击menu键时,都会执行,在此处显示地址栏和工具按钮。
*发现一个bug,当点击webView时,有时候不会触发onTouch事件,由于之前:webView.getSettings().setBuiltInZoomControls(true);//设置出现缩放工具 ,而这个缩放工具,也是响应onTouch事件的,所以会覆盖掉我们自己设置的onTouhc监听。
解决办法:不使用webView提供的缩放工具,自己定义按钮,可以用 webView.setInitialScale(50);来设置网页的缩放比例。
java和javaScript相互调用
java代码调用javaScript代码
确保当前已经加载html页面,然后用webView.loadUrl("javascript:callFromJava()");即可调用页面中的callFromJava方法。
javaScript代码调用java代码
首先要为webView添加javaScript接口对象webView.addJavascriptInterface(Object ,String);然后,就可以在网页中以这个String为名字,来调用这个对象,这个对象中的方法,
javascript中控制台和alert、confirm、prompt方法的实现
要实现控制台打印和这几个方法只需覆盖WebChromeClient中的相关方法即可。如控制台对应的方法是:onConsoleMessage();alert()对应的是onJsAlert()方法;confirm()对应的是onJsConfirm()方法;prompt()对应的是onJsPrompt()方法
Html5:
用于媒介播放的 video 和 audio 元素
对本地离线存储的更好的支持
用于绘画的 canvas 元素
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
支持音频播放
audio 元素能够播放声音文件或者音频流。 当前,audio 元素支持三种音频格式Ogg Vorbis,mp3,Wav
示例代码一:
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:
示例代码二:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<audio> 标签的属性
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL。
上面就是我们在页面中实现播放音乐
视频播放
支付的视频格式有ogg,mpeg4,webm。但不是每种浏览器都支付这三种视频格式的,推荐使用mpeg4。
示例代码:
<video src="movie.mpeg4" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
其中:<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的
示例二:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
视频和音乐类似
<video> 标签的属性
属性 值 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
HTML 5 Web 存储
在客户端存储数据,HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储。
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
1、localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
如何创建和访问 localStorage:
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
2、sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
HTML 5 -GeoLocation
HTML5 Geolocation API 封装在 navigator.geolocation 属性里,各种接口即是 navigator.geolocation 对象的方法
1、 getCurrentPosition 用来获取用户当前的位置信息,该方法带有三个参数:
1、successCallback:成功获取用户位置信息后的回调函数 2、errorCallback:获取用户位置信息失败时的回调函数 3、positionOptions:可选。获取用户位置信息的配置参数
2、watchPosition() watchPosition 的三个参数和 getCurrentPosition 完全一样,不同的是 watchPosition 是设计用来实时获取\检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置,只要发生变化,浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ,否则触发 errorCallback。
3、clearWatch()
接受一个 watchPosition 返回的 ID,功能是清除对用户位置的循环监视。
1、getCurrentPosition()
getCurrentPosition 用来获取用户当前的位置信息,该方法带有三个参数:
1、successCallback:成功获取用户位置信息后的回调函数 2、errorCallback:获取用户位置信息失败时的回调函数 3、positionOptions:可选。获取用户位置信息的配置参数
i)、successCallback
successCallback 函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值: 1、accuracy:精确度 2、latitude:纬度 3、longitude:经度 4、altitude:海拔 5、altitudeAcuracy:海拔高度的精确度 6、heading:朝向 7、speed:
ii)、errorCallback
和 successCallback 函数一样带有一个参数,对象字面量格式,表示返回的错误代码。它包含以下两个属性: 1、message:错误信息 2、code:错误代码。 其中错误代码包括以下四个值: 0 — UNKNOW_ERROR:表示不包括在其它错误代码中的错误,这里可以在 message 中查找错误信息 1 — PERMISSION_DENIED:表示用户拒绝获取位置信息的请求 2 — POSITION_UNAVALIABLE:表示网络不可用或者连接不到卫星 3 — TIMEOUT:表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误
iii)、positionOptions
positionOptions 的数据格式为JSON,有三个可选的属性: 1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。 2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。 3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。
2、watchPosition()
watchPosition 的三个参数和 getCurrentPosition 完全一样,不同的是 watchPosition 是设计用来实时获取\检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置,只要发生变化,浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ,否则触发 errorCallback。
另外和 getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数(setTimeout/setInterval)那样,返回一个 ID ,可以被清除掉。这里是用接下来介绍的 clearWatch 清除。
3、clearWatch()
接受一个 watchPosition 返回的 ID,功能是清除对用户位置的循环监视。
HTML 5 Canvas
canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:通过Canvas对象的getContext(‘2d’);获得 CanvasRenderingContext2D 对象。由上下文对象,来具体进行绘图工作。
phoneGap介绍
在webView中,java代码和javascript代码的相互调用中单向的,用这种方法开发的应用,在扩展和维护的时候会非常麻烦,为了解决这个麻烦phoneGap诞生了,phoneGap是建立在webView之上的一个开源框架,使用phoneGap来开发web应用,可以使用java代码和javascript代码完全分开,互不打扰,只要尊守共同的接口文档即可以开发出功能完善的应用。
由于phoneGap的这些优越性,以及html的兴起,phoneGap被adobe公司收获,并捐献给了Apache开源项目组织。
phoneGap现在最新版本是1.8,从1.5开始,phoneGap改名为cordova,
phoneGap的使用步聚
一、java代码部分:
1、导入phoneGap.jar
2、添加相应的权限
3、修改主Activity为继承自类DroidGap
4、在主类中用super.loadUrl(),加载网页
5、添加xml 配置文件
二、网页代码部分:
1、引入phoneGap.js
2、编写html页面。确保phoneGap加载完成后,才使用。
document.addEventListener("deviceready", onDeviceReady, false);
定义javascript接口文档
js文档的编写可以参考phoneGap源代码中的示例来写。
js接口文档中定义的内容有:
1、service名字和与之对应的对象
2、每个方法对应的action
3、每个方法的参数的类型
4、方法返回值的类型
在文档中先要判断该文档是否已经加载,并在最后,确保PhoneGap加载此文档。