Mobile WebApp development-phoneGap + android Environment

With the rapid development of HTML5 and the desire for cross-platform mobile App development, there will be more and more demands for using PhoneGap for development. Based on the information on the network and combined with your own practices, we have established a phoneGap-based android development environment, sorted out the steps, and persisted them to the blog to avoid forgetting!

I. Environment Introduction

(1) phoneGap 2.9.0: http://phonegap.com/install/

(2) Eclipse 3.7

(3) android-sdk-windows4.0.3

Ii. Setup steps

(1) Create an android project using Eclipse as follows:

Next step:

Enter the project name PhoneGapForAndroid and click Next:

Select Android2.2 and click Next:

Enter the package name and click Finish. The project directory is as follows:

(2) Create the libs folder under the root directory of the project.

(3) create a www folder under the assets Directory of the project.

(4) copy the content from the phonegap-2.9.0 \ lib \ android by following the steps below:

A) Copy ordova. js to the assets/www directory.

B) copy the ordova-2.9.0.jar TO THE libs directory

C) copy the xml file to the res directory.

The directory structure is as follows:

(5) EDIT AndroidManifest. xml and add the following content:

(6) Create the file index.html in the "assets/wwwsets" directory. The content is as follows:

(7) Modify PhoneGapForAndroidActivity. java

A) change the class inheritance class from Activity to DroidGap.

B) Replace the setContentView () line with super. loadUrl ( File: // android_asset/www/index.html );

(8) run the program. The following interface is displayed. You can build the program successfully!