PhoneGap對比html5寫android應用程序【android進化三十八】

原創

2020-02-22 07:53

什麼是PhoneGap，其實就是在手機中可以寫html代碼的插件，下面一段話來源網摘“PhoneGap是一個開放源代碼的，跨平臺的構建移動應用程序的框架。在PhoneGap中，完全通過HTML，CSS和JavaScript構建應用程序，但是它們卻可以像本地程序一樣使用iPhone 、iPad，Android，blackberry，Symbian，Palm等硬件功能。PhoneGap的目標就是通過標準的Web方式（如HTML，CSS和JavaScript的）調用設備的原生功能，這樣開發人員可以專注於他們正在構建的應用程序，而不是爲複雜的平臺兼容性層編碼。”

轉載請標明出處：http://blog.csdn.net/wdaming1986/article/details/7832852

自從上次參加ios/android訓練營，當時凡客移動應用的專家講的是Android+HTML5的技術應用，他們凡客用的是android的webview來展示網頁的效果，其他和本地相互調用，相當於中間部分用webView來展示，這樣就實現了動態，只要服務器的數據更新，手機端的數據相應的跟着更新，這是有的電商app採取的策略，先來看一下凡客誠品的構架圖：

上面用的是android控件，一個logo，一個搜索功能，底部是一排按鈕，有首頁，分類，購物車，我的凡客，更多，這些按鈕，前面幾個按鈕都是加載uri，加載相應的網頁，通過javascript，webview來實現網頁和本地間的交互。當加載網頁的時候，還沒有完全加載上來的時候，凡客用一個滾動的對話框來處理的，一直在轉圈圈。呵呵，這個有時候效果有點差，轉的時間稍微有點長。我用wifi連網，鏈接新的網頁有的大約需要30秒，我測試幾個新的網頁，在15秒到30秒之間，這個和網頁內容的長短有關。看來用webview還得做一些特殊的處理，個人感覺用戶體驗欠缺。但是加載上來以後，滾動效果做的還是不錯的。

PhoneGap就是在手機端寫入html和js語言，讓手機的支持自己的html，這樣不依賴網絡，本地瀏覽html網頁，但是有個缺點，就是工程師對html和js掌握的要多，而android相對來說不這麼重要，無論是ios，andoid，黑莓，只要熟練掌握html和js就可以在手機上開發應用了，而且跨平臺性太強悍了，相對於現在的手機來說，內存，cpu，都已經不是問題，對這些語言的解析支持的程度已經大大提高了，android4.0的手機帶來了手機高配的行情。

下面來看看我自己搭建的簡單的PhoneGap的Demo：

Step 1：下載PhoneGap的插件，如圖：

Step 2：新建項目後，在工程中加入兩個文件lib和assets/www，對應的目錄爲:

Step 3：在AndroidManifest.xml中加入相應的權限：

 <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Step 4：修改HelloPhoneGapActivity.java這個入口類，修改爲---->

package com.cn.daming.phonegap;

import com.phonegap.DroidGap;

import android.os.Bundle;

public class HelloPhoneGapActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

Step 5:在新加的assets/www目錄下加入新的index.html文件，內容如下：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
<html>
This is daming`s blog ---> 下面是我的csdn博客，歡迎大家訪問：
<br>
<a href="http://blog.csdn.net/wdaming1986?viewmode=contents"><font color="red">http://blog.csdn.net/wdaming1986?viewmode=contents
</font></a>
<br>
</html>
</body>
</html>

Step 6：運行項目，效果圖如下：