eclipse下搭建phonegap的开发环境

最新推荐文章于 2021-05-30 19:38:19 发布

原创最新推荐文章于 2021-05-30 19:38:19 发布 · 440 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

android 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用PhoneGap框架进行跨平台移动应用开发，包括下载、配置环境、添加包、修改代码以及运行效果等内容。通过实例演示，帮助开发者轻松上手PhoneGap，实现高效开发。

1、PhoneGap移动开发框架简介

PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等。使用给框架最大的好处是可以实现跨平台开发，并简单方便。

2、下载PhoneGap

可以直接到官网上下载：http://phonegap.com/ 现在的版本都到了1.9.0
将下载的zip包解压，在lib文件夹中可以看到很多手机操作平台，下面以android为例解说。

3、在eclipse中配置好android的开发环境，新建android工程

4、添加phonegap包

1）新建libs文件夹，存放 PhoneGap压缩包中android文件夹下的cordova-1.7.0rc1.jar
在assets下新建www文件夹，将cordova-1.7.0rc1.js复制到其下

2）右击libs文件夹下的cordova-1.7.0rc1.js，选择build path->configure build path...

在Libraries下，选择右边的Add JARs,选择libs下的cordova-1.7.0rc1.jar，点击ok

3）把解压出来的android目录下的xml包放到/res下

5、修改代码

1）修改AndroidMainfest.xml

如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:windowSoftInputMode="adjustPan"
      package="com.phonegap"
      android:versionName="1.1"
      android:versionCode="5">
    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="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.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <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" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />


    <application android:icon="@drawable/icon" android:label="@string/app_name"
        android:debuggable="true">
        <activity android:name="helloActivity" 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>

    <uses-sdk android:minSdkVersion="5" />
</manifest>

2）修改helloActivity类

package org.apache.cordova.example;


import android.app.Activity;

import android.os.Bundle;

import org.apache.cordova.*;


public class helloActivity extends DroidGap
{

    @Override

    public void onCreate(Bundle savedInstanceState)
    {

        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html");

    }

}

3）创建index.html

编辑assets/www/index.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
      <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
      <script type="text/javascript" charset="utf-8" src="cordova-1.7.0rc1.js"></script>
      <script type="text/javascript" charset="utf-8" src="main.js"></script>

  </head>
  <body onload="init();" id="stage" class="theme">
    <h1>Welcome to Cordova!</h1>
    <h2>this file is located at assets/www/index.html</h2>
    <div id="info">
        <h4>Platform: <span id="platform">  </span>,   Version: <span id="version"> </span></h4>
        <h4>UUID: <span id="uuid">  </span>,   Name: <span id="name"> </span></h4>
        <h4>Width: <span id="width">  </span>,   Height: <span id="height"> 
                   </span>, Color Depth: <span id="colorDepth"></span></h4>
     </div>
    <dl id="accel-data">
      <dt>X:</dt><dd id="x"> </dd>
      <dt>Y:</dt><dd id="y"> </dd>
      <dt>Z:</dt><dd id="z"> </dd>
    </dl>
    <a href="#" class="btn large" onclick="toggleAccel();">Toggle Accelerometer</a>
    <a href="#" class="btn large" onclick="getLocation();">Get Location</a>
    <a href="tel:411" class="btn large">Call 411</a>
    <a href="#" class="btn large" onclick="beep();">Beep</a>
    <a href="#" class="btn large" onclick="vibrate();">Vibrate</a>
    <a href="#" class="btn large" onclick="show_pic();">Get a Picture</a>
    <a href="#" class="btn large" onclick="get_contacts();return false;">Get Phone's Contacts</a>
    <a href="#" class="btn large" onclick="check_network();return false;">Check Network</a>
    <dl>
    <dt>Compass Heading:</dt><dd id="h">Off</dd>
    </dl>
    <a href="#" class="btn large" onclick="toggleCompass();return false;">Toggle Compass</a>
    <div id="viewport" class="viewport" style="display: none;">
      <img style="width:60px;height:60px" id="test_img" src="" />
    </div>
  </body>
</html>