PPT
【文档说明】Android应用开发WebView组件课件.pptx，共(39)页，558.837 KB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-92574.html
以下为本文档部分文字说明：
移动应用技术开发网络编程--WebView组件主要内容WebView组件WebView进阶主要目标理解WebKit引擎与WebView组件的作用能够用WebView呈现网络、本地的资源数据。能够实现WebView中
Java与JS的数据通讯。会使用JSON数据格式规范数据格式。搭建模拟器测试网络环境模拟器启用3G网络设置：主界面菜单项设置更多…移动网络"勾选"已启用数据流量并重启模拟器。提示:设置中文界面的方法
：主界面菜单项设置语言与输入法语言选择中文（简体）测试模拟网络设置：测试Internet主界面点击浏览器输入http://www.weibo.com呈现新浪WAP界面表示成功。测试本机服务端访问启动Tomca
t服务器在浏览器中输入http://10.0.2.2Android模拟器将10.0.2.2模拟为本机IP地址Android模拟器中切勿使用127.0.0.1呈现Tomcat首页表示成功。WebView组件知识点预览#知识点重点难点应用说
明1WebKit引擎√讲解WebKit引擎的作用、优势与运用场合2WebView组件√讲解WebView的作用、优势与运用场合3加载Web页面√√讲解如何利用WebView加载网络HTML资源4加载本地资源√√讲解如
何利用WebView加载本地资源5加载网络资源√√讲解如何利用WebView定位网络连接WebKit引擎什么是浏览器内核（引擎）?浏览器最重要或者说核心的部分是“RenderingEngine”，可大概译为“解释
引擎”或者“渲染引擎”。一般习惯称之为“内核”。它负责对网页语法解释（如HTML、JavaScript）并渲染（显示）。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。主流
浏览器引擎：Trident:IE以Trident作为内核引擎;Gecko:Firefox是基于Gecko开发的;WebKit:Safari,GoogleChrome，Android浏览器是基于WebKit开发的。遨游3,360
急速浏览器,QQ浏览器也是基于WebKit开发的。Presto:Opera的内核。WebKit引擎什么是WebKit引擎?WebKit引擎是一个开源项目，主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。KDE：K桌面环
境的缩写。一种著名的运行于Linux、Unix等操作系统上面自由图形工作环境。KHTML：基于KDE环境的HTML网页排版引擎，目前支持HTML5,CSS3,DOM3,JavaScript1.5等标准。WebKit引擎包含：网页引擎WebCore用于处理：是
KDE的KHTML脚本引擎JavaScriptCore，用于处理KJS（一种JS解析器）。Android系统自带的浏览器使用WebKit引擎WebView组件什么是WebView?在Android手机中内置了一款高性能WebKit内核浏览器，SDK中封装为一个叫做Web
View组件。WebView类是WebKit模块Java层的视图类。所有需要使用Web浏览功能的Android应用程序都要创建该视图对象显示和处理请求的网络资源。目前，WebView支持HTTP、HTTPS、FTP以及JavaScri
pt请求。WebView作为应用程序的UI接口，为用户提供了一系列的网页浏览、用户交互接口，客户程序通过这些接口访问WebKit核心代码。WebView组件何时使用WebView?研发基于WebKit的浏览器，往往比A
ndroid自带浏览器功能更丰富。WebView组件何时使用WebView?作为应用程序的界面。目前大量的Android应用提供商正在试图通过WebView提供应用界面。摒弃以往使用Layout+View提供应用界面的的模式。目前HTML5+WebView作为应用界面已经被越来越多应用的采
纳。这样做的优势是：跨平台成本更低。应用更新更方便。可视化效果更好。目前有待改进的问题：基于网络的人机交互性能。自动匹配不同密度与大小的屏幕。目前使用WebView作为应用界面的Android应用还比较有限。但是GoogleAndroid用户体验总监M
atiasDuarte表示：“这将是未来发展的一个不可回避的趋势”。WebView组件如何使用WebView?WebView继承了View类型，因此可以直接被定义在布局文件中。WebView基于WebKit引擎展现web页面的控件。使用前需要在AndroidManife
stfile中配置internet访问权限。<LinearLayout><TextViewandroid:id="@+id/llTitle"></TextView><!--创建一个WebView对象--><WebViewandroid:id="@+id/wvExplorer"a
ndroid:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout><uses-permissionandroid:name="andr
oid.permission.INTERNET"/>加载Web页面如何在WebView中显示网页?利用loadUrl加载Web页面：//url:需要加载的Web网页的URL路径publicvoidloadUrl(Stringur
l)protectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main
);wvExplorer=(WebView)findViewById(R.id.wvExplorer);wvExplorer.loadUrl(“http://www.baidu.com”);}wvExplorer.lo
adUrl(“http://img7.uutuu.com/data7/a/ph/1.png”);加载Web网页案例加载Web网页加载本地资源如何在WebView中显示本地网页资源?利用loadData加载We
b页面：//data:需要加载的数据，来自于本地文件或者网络上的数据//mimeType:MIME类型，用于指明data的数据类型（例如：text/html）//encoding:data数据的编码格式publicvoidloadData(Stringdata,Stringmim
eType,Stringencoding)//从assets文件夹中读取list.html文件InputStreamlist=getAssets().open("html/list.html");byte[]bytes=newbyte
[list.available()];list.read(bytes);Stringhtml=newString(bytes);list.close();wv.loadData(html,"text/html","utf-8");wv.loadData("<H1>HelloWebView</H
1>","text/html","utf-8");加载本地资源案例2:加载本地资源加载网络资源处理网页中需要访问网络资源的链接方法1：利用loadDataWithBaseURL加载资源，并定位网络资源。//b
aseUrl:加载数据后，如果数据中包含链接则以它为定位标准。//data:需要加载的数据，来自于本地文件或者网络上的数据//mimeType:MIME类型，用于指明data的数据类型（例如：text/html）//encoding:data数据的编码格式//failUrl
:如果无法定位到需要的资源，则访问failUrlpublicvoidloadDataWithBaseURL(StringbaseUrl,Stringdata,StringmimeType,Stringencoding
,StringfailUrl)<styletype="text/css">@importurl("css/common.css");</style><imgid="pyq"src="img/pyq.png"/><
imgid="tjhy"src="img/tjhy.png"style="padding-bottom:30px"/>wv.loadDataWithBaseURL("http://10.0.2.2/WeiXin/",html,"text/html","utf-8",nul
l);加载网络资源处理网页中需要访问网络资源的链接方法2：如果加载的数据是HTML格式，则可以考虑使用。<basehref=“url”/>标签设置路径定位基准。尽可能使用方法2，访问本地资源数据。方法1：当baseURL访问受限或无法访问时，方法1
会不断尝试访问，直到访问超时为止，在这一过程中资源数据始终无法显示。方法2：由于baseURL没有设置，所以WebView会立刻加载需要显示的资源数据不会判断baseURL是否无法访问。<head><basehref="http://1
0.0.2.2/WeiXin/"/><styletype="text/css">@importurl("css/common.css");@importurl("css/201307.css");</style>wv.loadDataWithBaseURL(null,html,"text/
html","utf-8",null);加载网络资源案例2:加载网络资源WebView进阶知识点预览#知识点重点难点应用说明1WebSettings对象√√能够通过WebSettings设置WebView参数。2WebChromeClient
对象√√√能够通过ChromeClient管理UI交互流程。3WebViewClient对象√√√能通过ViewClient管理WebView渲染过程。4应用访问JS√√√能够实现应用中Java代码对于JS的调用。5JS访问应用代码√√√能够实现应用中JS代码对于Java的调用。6JSON数据
通讯√√√能够利用JSON数据格式规范通讯数据。WebSettings对象为WebView定制参数任何一种浏览器都具有大量参数可供定制，WebView同样也可以。WebSettings用来配置和管理WebView各种浏览器参数，例如：是否可以
进行文件操作、缓存的设置、页面是否支持放大和缩小。是否允许使用数据库api、字体及文字编码设置。是否允许JS脚本运行。是否允许图片自动加载。是否允许数据及密码保存等等。WebSettings对象如何更改WebView的参数？从WebView中获取
WebSettings，并通过相应的属性进行设置//获得WebView的参数设定对象WebSettingssettings=wv.getSettings();//设置当前应用程序是否保存HTML5应用缓存synchronizedvoidsetAppCacheEnabled(
boolean)//设置应用程序HTML5的最大缓存容量synchronizedvoidsetAppCacheMaxSize(long)//设置应用程序HTML5的缓存的保存路径（一般是SD卡目录）synchron
izedvoidsetAppCachePath(String)//注意：浏览器普通缓存保存在应用程序安装目录下的cache文件夹//是否支持表单数据自动保存（默认：false）voidsetSaveFormData(booleansave)//是否支
持密码数据自动保存（默认：false）voidsetSavePassword(booleansave)WebSettings对象如何更改WebView的参数？从WebView中获取WebSettings
，并通过相应的属性进行设置获取更多方法的帮助与说明：AndroidDocumentReferences:android.webkit.WebSettings//获得WebView的参数设定对象WebSe
ttingssettings=wv.getSettings();//设置WebView是否支持利用JS打开新窗体（默认：false）voidsetJavaScriptCanOpenWindowsAutomatically(boolean)//设置We
bView是否支持JS（默认：flase）synchronizedvoidsetJavaScriptEnabled(boolean)//设置WebView是否支持图片自动载入（默认：true）synchronizedvoidse
tLoadsImagesAutomatically(boolean)//设置WebView是否支持高亮选中（默认：true）voidsetLightTouchEnabled(boolean)WebSettings经典案例2:设置WebSettings（支持JS）WebChromeClient对象
如何参与到WebView的工作中？AndroidWebView允许研发人员修改其默认的工作行为。AndroidWebView提供了两个组件帮助研发人员参与WebView的处理过程。WebChromeCl
ient:会在一些用户与浏览器实现交互动作时被调用WebView关闭和隐藏。页面加载进展。JS确认框和警告框、JS加载前、JS操作超时。WebView获得焦点等等。如需修改WebView在以上行为中的默认执行方式，需要继承W
ebChromeClient，并重写WebChromeClient中的相关方法。//当一个WebView被创建时触发booleanonCreateWindow()//当一个WebView正在加载网络或本地资源时触发voidonProgressChanged()//当一个WebView获得焦点时
触发voidonRequestFocus()WebChromeClient对象如何参与到WebView的工作中？获取更多方法的帮助与说明：AndroidDocumentReferences:android.webkit.WebCh
romeClient//当WebView解析JS代码，遇到Alert对话框时触发booleanonJsAlert()//当WebView解析JS代码，遇到Confirm对话框时触发booleanonJsConfirm()//当WebVi
ew解析JS代码，遇到Prompt对话框时触发booleanonJsPrompt()//关于返回值：true:表示WebView侦测到JS后，处理权交给研发人员重写的回调函数，WebView无权继续执行默认操作行为。f
alse:表示当回调函数执行完毕后，WebView有权继续执行默认操作行为。使用WebChromeClient经典案例2:使用WebChromeClient（添加进度条）WebChromeClient对象经典案例2:使用WebChromeClient（更改对话框）W
ebViewClient对象如何参与到WebView的工作中？AndroidWebView允许研发人员修改其默认的工作行为。AndroidWebView提供了两个组件帮助研发人员参与WebView的处理过程。
WebViewClient:会在内容加载（渲染）的动作发生时被调用页面开始加载及加载完成。资源加载中。接收到HTTP认证需要处理页面键盘响应、正在处理页面中的URL等等。如需修改WebView在以上行为中的
默认执行方式，需要继承WebViewClient，并重写WebViewClient中的相关方法。//正在加载资源（例如：从服务器上下载JS、CSS、Image时触发）voidonLoadResource(WebViewview,Stringurl)//WebView解
析当前页面完成时触发voidonPageFinished(WebViewview,Stringurl)WebViewClient对象如何参与到WebView的工作中？获取更多方法的帮助与说明：AndroidDocumentReferenc
es:android.webkit.WebViewClient//WebView中的用户点击了软键盘上的按键时触发booleanshouldOverrideKeyEvent(WebView,KeyEvent)//WebView中的一个新url需要加载时触发booleansh
ouldOverrideUrlLoading(WebViewview,Stringurl)//用户修改了WebView的显示范围时触发voidonScaleChanged(WebView,float,float)//服务器端返回了一个错误信息给WebView时触发(例如：404)voidon
ReceivedError(WebView,int,String,String)//当服务器端需要客户端发送认证信息时触发voidonReceivedHttpAuthRequest(WebView,Htt
pAuthHandlerhandler,Stringhost,Stringrealm)WebViewClient对象经典案例2:使用WebViewClient（屏蔽回退键）WebViewClient对象案例2:使用WebViewClient（URL在一个WebView中）应用
访问JSWebView允许直接在应用代码中访问网页的JS：利用WebView的loadUrl实现应用代码访问HTML的JSbtnInvokeJS.setOnClickListener(newOnClickListener(){public
voidonClick(Viewv){//调用HTML中的JS必须使用“javascript:”前缀wv.loadUrl("javascript:sayHello()");}});应用访问JS案例2:实现应用访问JSJS访问应用
代码WebView允许JS调用应用中的方法：这种方法极其重要，在实际项目研发中运用广泛。应用的AndroidJava代码往往用来从服务器端获取数据与资源。获取后的数据与资源需要在HTML中呈现。为了保证数据能从Java代码中传递给JS，WebView允许JS直接访问应用程序中的Ja
va代码：步骤1：创建一个普通Java处理类。//值得注意的是：需要被JS访问Java代码必须设置//@JavascriptInterface标记符publicclassDemoService{//
注意：方法返回类型任意，但是不能为数组@JavascriptInterfacepublicStringgetName(){return“oracle-csg”;}}JS访问应用代码WebView允许JS调用应用中的方法：为了保证数据能从Java
代码中传递给JS，WebView允许JS直接访问应用程序中的Java代码：步骤2：利用WebView的addJavascriptInterface加载Java处理对象。步骤3：HTML中编写JS代码访问应用代码：//参数1：编写在DemoService中
的所有方法都可以在HTML中以JS的方式呈现并运行，当WebView解析到JS代码后，DemoService中的方法立刻会被执行。//参数2：为HTML中的JS创建一个调用对象名wv.addJavascriptInterface(newDemoService
(),“javaobj");<scripttype="text/javascript"><!–window.java对象名.对象方法-->varname=window.javaobj.getName();window.document
.getElementById(„data‟).innerHTML=name;</script>JS访问Java代码经典案例2:JS访问Java代码JSON数据通讯规范Java与JS之间的数据通讯格式：实际项目研发过程中，Java代码往往
需要传递大量数据给HTML。因此，必须设计一个数据格式以方便JS理解数据的意义。目前主流的Java-JS通讯格式为JSON数据。应用代码中创建JSON格式的方法：@JavascriptInter
facepublicStringgetDatas(){JSONArraydatas=newJSONArray();//创建一个JSON数组JSONObjectdata=newJSONObject();//创建一
个JSON对象data.put("id","001");data.put("name",“Frank");datas.put(data);data=newJSONObject();//创建一个JSON对象data.put("id","002"
);data.put("name",“Rose");datas.put(data);//格式:[{id:‟001‟,name:‟Frank‟},{id:‟001‟,name:‟Rose‟}]returndatas.toString();}JSON数据通讯规范Java与JS之间的数据通讯格式
：HTML中JS解析JSON数据格式的方法：vardata=window.javaobj.getDatas();//eval解析js对象时必须使用括号vardataObj=eval("("+data+")");//转换为js
on对象for(vari=0;i<dataObj.length;i++){varid=dataObj[i].id;varname=dataObj[i].name;}JSON通讯案例2:实现JSON通讯
辽公网安备 21102102000191号
营业执照
