已有Android工程集成PhoneGap頁面

1. 需求

工作之前, 先說說需求 - NativeApp和WebApp各有千秋, 為了各取所長, 我們需要在在已有的應用中集成H5頁面, 那麼如何做呢? 讓我們來看看PhoneGap, 試試這個東西怎麼用!

 

新建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.

<script charset=utf-8 src=cordova-2.2.0rc1.js type=text/javascript> </script>

Hello PhoneGrap

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
 * 

* 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!