android使用webwiew载入页面使用示例(Hybrid App开发)
hybrid app 是混合模式应用的简称，兼具 native app 和 web app 两种模式应用的优势，开发成本低，拥有 web 技术跨平台特性。目前大家所知道的基于中间件的移动开发框架都是采用的 hybrid 开发模式，例如国外的 phonegap、titanium、sencha，还有国内的 appcan、rexsee 等等。hybrid app 开发模式正在被越来越多的公司和开发者所认同，相信将来会成为主流的移动应用开发模式。
hybrid app 融合 web app 的原理就是嵌入一个webview组件，可以在这个组件中载入页面，相当于内嵌的浏览器，代码如下：
import android.app.activity;
import android.os.bundle;
import android.webkit.websettings;
import android.webkit.webview;
public class aactivity extends activity{
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
// 创建webview
webview webview= new webview(this);
// 切换到内容视图
setcontentview(webview);
// 获取webview配置
websettings ws = webview.getsettings();
// 启用javascript
ws.setjavascriptenabled(true);
// 载入assets目录下的一个页面
webview.loadurl("file:///android_asset/www/bobox/index.html");
}
}
还有另一种引入方式是在布局文件中添加 webview 组件，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<webview
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/webview"
/>
</linearlayout>
import android.app.activity;
import android.os.bundle;
import android.webkit.websettings;
import android.webkit.webview;
public class bactivity extends activity{
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.webview);
// 查找webview
webview webview = (webview) findviewbyid(r.id.webview);
// 获取webview配置
websettings ws = webview.getsettings();
// 启用javascript
ws.setjavascriptenabled(true);
// 在载入assets目录下的一个页面
webview.loadurl("file:///android_asset/www/index.html");
}
}
webview 还有一个非常重要的方法——addjavascriptinterface，可以用来实现 java 程序和 javascript 程序的相互调用，代码如下：
webview.addjavascriptinterface(new object(){
public void clickonandroid(){
mhandler.post(new runnable(){
public void run(){
webview.loadurl("javascript:wave()");
}
});
}
}, "demo");
页面代码如下：
<script>
function wave() {
document.getelementbyid("id").innerhtml = "hello world!";
}
</script>
</head>
<body>
<div>
<a href="#" id="demo" onclick="window.demo.clickonandroid()">click me</a>
</div>
</body>
</html>
这样，当你点击页面上 click me 按钮的时候就会调用 java 代码中的 clickonandroid 函数，clickonandroid 函数中又调用页面中的 wave 方法。需要注意的是：这个接口在 android 2.3 版本的模拟器中运行会导致 webview 崩溃，目前还没有修复。这是一个非常简单的演示 java 和 javascript 相互调用的例子，在实际应用中可以在页面调用的 clickonandroid 函数中再调用摄像头、通讯录、通知提醒等设备功能。
上一篇： 笔记本内存升级需要注意的一些问题