当前位置： 移动技术网 > IT编程>移动开发>Android > android使用webwiew载入页面使用示例(Hybrid App开发)

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

亿田油烟机,娜可露露儿童摄影,东莞人才网招聘网

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/");
    }
}

还有另一种引入方式是在布局文件中添加 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/");
    }
}

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 函数中再调用摄像头、通讯录、通知提醒等设备功能。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网