本文的合集已經(jīng)編著成書(shū)，高級(jí)Android開(kāi)發(fā)強(qiáng)化實(shí)戰(zhàn)檀何，歡迎各位讀友的建議和指導(dǎo)蝇裤。在京東即可購(gòu)買(mǎi)：https://item.jd.com/12385680.html
1. 需求
工作之前, 先說(shuō)說(shuō)需求 - NativeApp和WebApp各有千秋, 為了各取所長(zhǎng), 我們需要在在已有的應(yīng)用中集成H5頁(yè)面, 那么如何做呢? 讓我們來(lái)看看PhoneGap, 試試這個(gè)東西怎么用!
網(wǎng)址: http://phonegap.com/
下載: http://phonegap.com/install/
下載SDK, 當(dāng)然必須下載最新的, PhoneGap 2.9.1.
新建Android的應(yīng)用程序, HelloWorld即可.
我們要做的就是用一個(gè)Button跳轉(zhuǎn)PhoneGap類(lèi)型的Activity.
2. 配置assets
配置PhoneGap
在assets文件夾下新建www文件夾
如何配置assets目錄?
默認(rèn)在HelloWorld項(xiàng)目中不包含此目錄, 在app.iml中
<option name="ASSETS_FOLDER_RELATIVE_PATH" value="/src/main/assets" />顯示默認(rèn)位置, 在此新建assets文件夾即可.
復(fù)制/phonegap-2.9.1/lib/android/cordova.js
復(fù)制/phonegap-2.9.1/lib/android/framework/res/xml/config.xml
至www文件夾.
并且新建HTML啟動(dòng)頁(yè), index.html, 就是一個(gè)簡(jiǎn)單的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, 這個(gè)jar包phonegap竟然沒(méi)有提供, 正好我們生成一個(gè)最新的.
下載源碼: https://www.apache.org/dist/cordova/platforms/
最新的是: cordova-android-4.1.1.tgz, 之后解壓.
讀讀README, 了解一下怎么用.
示例代碼在這 /package/test, 核心模塊是framework.
進(jìn)入test目錄, gradle build一下即可.
出現(xiàn)錯(cuò)誤, 按照提示添加這個(gè)就行.
lintOptions { abortOnError false}
最終的jar包就 是/framework/build/intermediates/bundles/release/classes.jar, 改個(gè)名字就OK, 比如phonegap-2.9.1.jar.
如果想看看這個(gè)代碼, Import Project調(diào)用test工程即可.
4. 代碼
最后在MainActivity中加一個(gè)按鈕, 跳轉(zhuǎn)PhoneGap的Activity即可.
PhoneGapActivity的代碼如下, 簡(jiǎn)單加載了一個(gè)HTML5的頁(yè)面.
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, 現(xiàn)在可以根據(jù)PhoneGap的內(nèi)容, 隨便的玩耍了, Nice!
