移动互联网开发技术实验指导书WebView的工作机理

上机实验

一、实验目的

1、了解WebView的工作机理；

2、掌握WebView装载本地html文件、访问远程web页面、执行Java Script的方法、Java Script调用Java Class的方法；

3、通过WebView与模拟的微信服务端通信，实现一个模拟的微信移动端界面。

二、实验内容

1、实验准备，

（1）将“微信模拟服务端”部署到Tomcat服务器中；

（2）将“微信模拟服务端”中的html和img两个文件夹拷贝到项目工程的assets目录。

（2）在布局中放置一个WebView控件，并在Activity中初始化

2、WebView调用远程的html页面

注意：调用远程页面需要Internet访问权限

3、WebView调用本地的html页面

"

Hello Android Web!!!

"是一段标准的html代码，直接将其写在代码中，共WebView显示用。

接下来，我们通过在本地的assets文件中放置一段稍微复杂一点的代码，让WebView 显示。

如果使用代码中的”方法1”需要在list_with_js.html中有的区域加入以下语句具体ip地址和端口要根据服务的配置调整。

方法2中，html文件和img文件都在本地，可以减少用户在使用app时候的流量。软件升级时，可以根据网络状况（WiFi，蜂窝无线）决定是否需要更新相关的img和html。

4、WebView调用Java Script

分析list_with_js.html文件，可以看到其中有showContent()这个函数，其功能就是在原来预留的图片list末尾增加一行，显示"Please add the first friend."

5、WebView通过Java Script调用Java Class

（1）在MainActivity中新建一个内部类JSService

（2）在onCreate函数中将JSServer增加为Java Script可以调用的类

（3）载入包含JavaScript的html文件list_js2java

三、软件设计原理

在Android中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView 组件。WebView可以显示Web页面，并且，可以像普通的View那样应用到任何布局中。WebView提供了两个方法用于显示网页的内容：loadUrl()用于加载一个指定的URL，而loadData()则用于直接向WebView写入指定的HTML文本。此外，loadDataWithBaseURL()和loadData()类似，但是，如果写入的HTML文本包含图片、CSS等外部资源的相对链接时，WebView就会根据指定的baseURL来正确地加载这些资源。

WebView中可以载入JavaScript，CSS，通过JavaScript可以调用本地的Java Class，这种模式允许设计开发出Hybird模式的APP，即将平台相关的部分用Native的组件实现，将内容和表现相关的动态部分用WebView组件装载，这样在移动开发的时候，Web部分可以在多个平台之间复用，减低了开发和维护成本低。

四、课外任务

任务1：在JSService中增加以下成员函数，返回一个Json格式封装的字符串。通过JavaScript调用该函数，将其显示出来。