提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

android使用webwiew载入页面使用示例(HybridApp开发)

Android开发 使用 示例 页面 载入
2023-06-13 09:15:19 时间

HybridApp是混合模式应用的简称，兼具NativeApp和WebApp两种模式应用的优势，开发成本低，拥有Web技术跨平台特性。目前大家所知道的基于中间件的移动开发框架都是采用的Hybrid开发模式，例如国外的PhoneGap、Titanium、Sencha，还有国内的AppCan、Rexsee等等。HybridApp开发模式正在被越来越多的公司和开发者所认同，相信将来会成为主流的移动应用开发模式。

HybridApp融合WebApp的原理就是嵌入一个WebView组件，可以在这个组件中载入页面，相当于内嵌的浏览器，代码如下：

复制代码代码如下:


importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.webkit.WebSettings;
importandroid.webkit.WebView;

publicclassAActivityextendsActivity{

    @Override
    publicvoidonCreate(BundlesavedInstanceState){
        super.onCreate(savedInstanceState);
        //创建WebView
        WebViewwebView=newWebView(this);
        //切换到内容视图
        setContentView(webView);
        //获取WebView配置
        WebSettingsws=webView.getSettings();
        //启用JavaScript
        ws.setJavaScriptEnabled(true);
        //载入assets目录下的一个页面
        webView.loadUrl("file:///android_asset/www/BoBox/index.html");
    }
}

还有另一种引入方式是在布局文件中添加WebView组件，代码如下：

复制代码代码如下:


<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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>

复制代码代码如下:
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.webkit.WebSettings;
importandroid.webkit.WebView;

publicclassBActivityextendsActivity{

    @Override
    publicvoidonCreate(BundlesavedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);
        //查找WebView
        WebViewwebView=(WebView)findViewById(R.id.webview);
        //获取WebView配置
        WebSettingsws=webView.getSettings();
        //启用JavaScript
        ws.setJavaScriptEnabled(true);
        //在载入assets目录下的一个页面
        webView.loadUrl("file:///android_asset/www/index.html");
    }
}

WebView还有一个非常重要的方法——addJavascriptInterface，可以用来实现Java程序和JavaScript程序的相互调用，代码如下：

复制代码代码如下:
webView.addJavascriptInterface(newObject(){
    publicvoidclickOnAndroid(){
        mHandler.post(newRunnable(){
            publicvoidrun(){
                webView.loadUrl("javascript:wave()");
            }
        });
    }
},"demo");

页面代码如下：

复制代码代码如下:
<script>
    functionwave(){
        document.getElementById("id").innerHTML="HelloWorld!";
    }
</script>
</head>
<body>
    <div>
        <ahref="#"id="demo"onclick="window.demo.clickOnAndroid()">ClickMe</a>
    </div>
</body>
</html>

这样，当你点击页面上ClickMe按钮的时候就会调用Java代码中的clickOnAndroid函数，clickOnAndroid函数中又调用页面中的wave方法。需要注意的是：这个接口在Android2.3版本的模拟器中运行会导致WebView崩溃，目前还没有修复。这是一个非常简单的演示Java和JavaScript相互调用的例子，在实际应用中可以在页面调用的clickOnAndroid函数中再调用摄像头、通讯录、通知提醒等设备功能。

相关文章