Installation Configuration PhoneGap development Environment (II)--Create a project with Cordova instead of PhoneGap

1 who is Cordova?

    PhoneGapthe official documentationthat's very clear. Cordovais aPhoneGapengine, the relationship between the two is similar toWebKitwith theChromethe browser's relationship. So some core basic operations areCordovawith thePhoneGapare interlinked. Sometimes usePhoneGapCreate the project will appear some inexplicable problems, recommend the use ofCordova created .

2 Downloads phonegap and Cordova

a little. See "Installation Configuration PhoneGap development environment (i)".

3 Creating a PhoneGap project using Cordova

to view the Cordova version of the current platform:

cordova-version

to create a project:

Cordova Create My_project "Org.yhd.helloworld" "HelloWorld"

    

Enter the project:

CD my_project

add Android platform support:

Cordova Platform add Android

to build the project:

Cordova Build

A bunch of messages are printed later, and the last hint:

Ok! It worked. You can then use the emulator to run:

Cordova emulate Android

Note that the default emulator is used at this time, and if you want to specify the emulator to run the project, you need to first locate the emulate.exeandthen start the developed emulator:

emulator.exe-avd "Moniqi"

Note that you must wait until the simulator is started, and then run the project:

Cordova emulate Android

After success, there are hints:

    

You can see the effect in the simulator:

    

Notice the cue screen? The Project tip information createdwith CORDOVA is "APACHE CORDOVA", and if you create a project tipusing PHONEGAP, the "PHONEGAP The picture also changed from PhoneGap 's flying robot to Cordova 's small box. Welcome information is slightly different, but the results are the same.

4 building Eclipse Projects4.1 Importing projects to eclipse

In Eclipse, click:

Import, File

Select Select:

Android--Existing Android Code into WorkSpace:

Appear:

After selecting the project path, the project information appears, keep all selected, click "Finish":

one of the "HelloWorld" is our main project.

4.2 Changing Folders

Open the "HelloWorld" Project catalog and you can see:

Watch the folder "www ", this folder is not actually located in the project directory, but from another directory link, right-click ->properties :

Click "Edit" to appear:

You can see the location in:

${parent-2-project_loc}\www

here we explain in detail the location of this "www" folder , assuming that the project we created with the "Cordova" command is located at:

D:\Studying\phonegap\my_project

When we added Android support for this project and compiled it, this android project is actually located at :

D:\Studying\phonegap\my_project\platforms\android

This is also the actual path of our Eclipse Project "HelloWorld", which can be right-click Engineering ->properties:

This is the actual path of the project. Well, what I saw earlier:

${parent-2-project_loc}\www

What does that mean?

In fact, "${parent-2-project_loc}" indicates that the project goes to the top two directory , that is:

D:\Studying\phonegap\my_project

so the "www" folder above is located at:

D:\Studying\phonegap\my_project\www

Open the project look, there really is a "www" folder under this path:

   

Note, however, that when we run this Android Project and successfully see the Welcome screen,the files in the "www" folder are actually displayed:

Index.html

and this "index.html", but not in the path just now, but in:

D:\Studying\phonegap\my_project\platforms\android\assets\www

Below, take a look inside the content:

See, with just the folder content slightly different, this is the "true", the project "www" folder, in fact, the call should be the resources here, so we need to change the original "WWW" folder link in the project:

${parent-2-project_loc}\platforms\android\assets\www

Pointing to the "true", we can develop more accurately in eclipse!

4.3 Setting the encoding

Theworkspace encoding must be set to "UTF-8" Before importing the project,or the import project may be problematic. You can open the Preferences by window-> Preferences:

Once setup is complete, let's test to add JavaScript fragments to the index.html file:

Document.addeventlistener ("Deviceready", Ondeviceready, false);        function Ondeviceready () {      alert ("This is the PhoneGap test program");}

If you find that there are garbled characters in the post-run project:

You also need to add the encoding parsing information to the tag in the page:

    <meta charset= "Utf-8" >

Run a look at the effect:

Can see the text display information is normal. The use of Cordova to build a basic PhoneGap development environment is finished.

Installation Configuration PhoneGap development Environment (II)--Create a project with Cordova instead of PhoneGap