已有Android工程集成PhoneGap页面

1. 需求

工作之前, 先说说需求 - NativeApp和WebApp各有千秋, 为了各取所长, 我们需要在在已有的应用中集成H5页面, 那么如何做呢? 让我们来看看PhoneGap, 试试这个东西怎么用!

网址: http://phonegap.com/
下载: http://phonegap.com/install/

下载SDK, 当然必须下载最新的, PhoneGap 2.9.1.

新建Android的应用程序, HelloWorld即可.
我们要做的就是用一个Button跳转PhoneGap类型的Activity.

2. 配置assets

配置PhoneGap
在assets文件夹下新建www文件夹

如何配置assets目录?
默认在HelloWorld项目中不包含此目录, 在app.iml中
显示默认位置, 在此新建assets文件夹即可.

复制/phonegap-2.9.1/lib/android/cordova.js
复制/phonegap-2.9.1/lib/android/framework/res/xml/config.xml
至www文件夹.

并且新建HTML启动页, index.html, 就是一个简单的HelloWorld.

<span style="font-family:Courier New;"><!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title></title>
            <script charset="utf-8" 
                    src="cordova-2.2.0rc1.js" 
                    type="text/javascript">
            </script>
        </head>
        <body>
            <h1>Hello PhoneGrap</h1>
        </body>
    </html>
</span>

3. 生成Jar包

在libs中添加phonegap-2.9.1.jar, 这个jar包phonegap竟然没有提供, 正好我们生成一个最新的.

下载源码: https://www.apache.org/dist/cordova/platforms/
最新的是: cordova-android-4.1.1.tgz, 之后解压.
读读README, 了解一下怎么用.
示例代码在这 /package/test, 核心模块是framework.
进入test目录, gradle build一下即可.

出现错误, 按照提示添加这个就行.
lintOptions { abortOnError false}

最终的jar包就 是/framework/build/intermediates/bundles/release/classes.jar, 改个名字就OK, 比如phonegap-2.9.1.jar.

如果想看看这个代码, Import Project调用test工程即可.

4. 代码

最后在MainActivity中加一个按钮, 跳转PhoneGap的Activity即可.
PhoneGapActivity的代码如下, 简单加载了一个HTML5的页面.

package www.wangchenlong.me.test_js;

import android.os.Bundle;

import org.apache.cordova.CordovaActivity;

/**
 * PhoneGap的HelloWorld
 * <p/>
 * Created by wangchenlong on 15/10/20.
 */
public class PhoneGapActivity extends CordovaActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 更换一下载入形式
        //setContentView(R.layout.activity_main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

注: android_asset就是我们的assets目录, 由app.iml注明.

最终的工程目录:

工程目录

OK, 现在可以根据PhoneGap的内容, 随便的玩耍了, Nice!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ElminsterAumar

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值