首次体验phonegap实现的Android APP

偏执的太偏执、 2022-06-18 12:15 338阅读 0赞

之前就听说过phonegap的存在，但是就是一直没有时间去接触它，对他很迷糊。然后最近一时兴起，就去百度了一下phonegap是什么？

**以下是百度百科的解释：**  
PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用IOS，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，Phonegap是一款开源的开发框架，旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动应用程序。原本由Nitobi公司开发，现在由Adobe拥有。

**而我自己的理解就是：**  
一套运行在安卓软件的中的网页，这套网页集合起来实现一个APP的功能。由于我也是刚才接触，可能理解的不太好。所以，想更加了解的这个phonegap的小伙伴，就得自己上网查资料了。

好了，大概的介绍就做到了这里了，下面就开始实现我的第一个phonegap做的APP了。

**提示：** ***实现本文中的工程，需要有一定的Android开发基础，并且使用过eclipse！***

首先呢，我们当然是需要拥有一份phonegap开发框架啦，在这里我就给大家提供我自己下载phonegap的下载地址：  
[前往下载phonegap][phonegap]

在这篇文章中，我使用的是Adobe PhoneGap 2.0 官方正式版，也就是上面那个网址下载回来的phonegap框架。

我们拿到框架后，解压，里面的文件目录是这样子的：  
![文件类型][SouthEast]

在这里我就简单介绍一下那两个文件夹，doc文件夹里面的文件是phonegap的各个系统版本的使用说明。这个文件夹暂时不理会，我们主要看lib文件夹

**打开如下图所示：**  
![文件类型][SouthEast 1]

从图中可以看出，这个lib文件夹里面包含了各个平台的phonegap，而我在这里主要是做Android的APP，所以，我们将会使用安卓版本的phonegap。

打开android文件夹：  
![这里写图片描述][SouthEast 2]  
我们主要用到的是里面的js文件，jar文件，xml整个目录，其中js文件将会放在我们安卓项目中的assets目录中的www目录下（这个www目录是自己在assets下新建的），jar文件将会放在项目中的libs目录下，xml目录将会放在res目录里。

了解了文件结构以后，我们开始打开eclipse新建一个安卓项目，然后依照上面所说的，把phonegap的相应文件放到项目的相应工程目录中。

（新建的项目如果没有libs目录和assets目录，则需要自己手动新建）

然后在assets中再新建一个目录并且命名为www(名字可以任意取，建议取名规范化！)

**效果如图：**  
![文件放置位置][SouthEast 3]

所有文件放置好以后，我们需要回去找到jar文件，鼠标右键，选择**Build Path->Configure Build Path**,把jar文件配置到工程中。

把配置文件布置好以后，我们就要打开**AndroidManifest**文件，做一些文件配置：  
把以下代码配置到文件中

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />

再把下面这段代码配置到**activity**中：

android:configChanges="orientation|keyboardHidden"

**配置后的整体效果：**

<?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.phonegapproject" android:versionCode="1" android:versionName="1.0" >
    
        <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="19" />
            <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> 
        <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
            <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>

主文件配置好以后，我们就要修改**src**下的**MainActivity**的代码了，  
首先导包，把下面的代码添加到**MainActivity**中

import org.apache.cordova.DroidGap;
    import com.phonegap.*;

然后把`import android.app.Activity;`删除。

接着重新继承**DroidGap**

public class MainActivity extends DroidGap{ 
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            super.loadUrl("file:///android_asset/www/index.html");
        }

配置完后，我们需要新建一个**HTML**文件，命名为**index**  
文件结构如下：

<!DOCTYPE HTML> 
    <html>
        <head>
            <title>PhoneGap</title>
            <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
        </head>
        <body>
            <h1>Hello World</h1>
        </body>
    </html>

新建好HTML文件后，我们把它放进assets中的www目录中，和js文件同级目录

**如图所示：**

![html文件放置位置][html]

最后，我们回到`MainActivity` 这个类中，把里面的setContentView  
改为 super.loadUrl(“file:///android\_asset/www/index1.html”);

到此为止，整个工程就已经完成了。

**运行的效果如下：**

![运行效果][SouthEast 4]  
我们运行出来后就可以看到html网页中的Hello World  
这样就成功了！

[phonegap]: http://dl.pconline.com.cn/download/163837.html
[SouthEast]: /images/20220618/986278c727bd4578bc2846a5dc8b2929.png
[SouthEast 1]: /images/20220618/7c351631dfe943ba96a9549bc4fd8652.png
[SouthEast 2]: /images/20220618/9ec187952ba74b6684df3147159702b0.png
[SouthEast 3]: /images/20220618/119bf5fc54444ba182eff814fa8ef2c7.png
[html]: /images/20220618/45e5c9efd7b149b086bdea774048e039.png
[SouthEast 4]: /images/20220618/3ec34cdc5e9146898d665478de79efdb.png