Build Cordova Environment under WIN7

Cordova Environment Construction

1 Installing the JDK

Tools folder: JDK Directory

1): http://www.oracle.com/technetwork/java/javase/downloads/index.html

Set Environment variables:

Java_home= C:\Program files\java\jdk1.6.0_45

Jre_home=c:\program Files\java\jdk1.6.0_45\jre

Classpath=.; %java_home%\lib\dt.jar;%java_home%\lib\tools.jar

Path=%ant_home%\bin;%maven_home%\bin;%java_home%\bin;%systemroot%\system32;%systemroot%;%systemroot%\system32\ Wbem;%systemroot%\system32\windowspowershell\v1.0\; C:\Program files\mysql\mysql Server 5.5\bin;d:\program files\tortoisesvn\bin;%android_home%\tools;%android_home%\ Platform-tools; C:\Program files\nodejs\

2 Installing Apache ANT

Tools folder: Apache-ant-1.9.4-bin.zip

: http://apache.fayea.com/apache-mirror/ant/binaries/

Set Environment variables:

New ant_home=e:\ant\apache-ant-1.9.4

Path added:%ant_home%\bin;

3 Installing the Android SDK

Tools folder: android-environment -64x.zip

Before you run the command-line tool, you should make sure that you have installed the required SDK for the target platform. For Android, for example, we can download an installation kit at the following URL:

Http://developer.android.com/sdk/index.html

Click "Download the SDK ADT Bundle for Windows" on the right side of the page to download the installation.

Of course you can also download and configure individually, but for beginners I recommend downloading the installation kit above, save time and effort.

For the SDK for other platforms, please refer to the official documentation:

Http://cordova.apache.org/docs/en/3.4.0/guide_platforms_index.md.html#Platform%20Guides

Attention:

Please add the path of the SDK to the system environment variable path, a total of two. Like D:\adt-bundle\sdk\tools and D:\adt-bundle\sdk\platform-tools.

4 Installing node. js

Tools folder: Nodejs.zip

: http://nodejs.org/download/

After the installation is complete, run the node. js Command Prompt

Appears: Your environment have been set up for using node. js 0.10.36 (x64) and NPM. For the environment variable being configured

Run: Node-v View the version number of node. js

5 Installing Cordova

In node. js command prompt, run NPM install-g Cordova

Run NPM install-g Cordova Install the Cordova version as the highest current version

Download the specified Cordova version, run NPM install-g [email protected], install the 4.2.0 version

6 Creating an Application project

Customizing a workspace

Enter the workspace and create an application project

Run: Cordova Create hello Com.example.hello helloworld-d

The first parameter, hello, specifies a directory name.

The second parameter Com.example.hello a C # namespace, or a Java package name. (Not quite sure, the reader self-identification, written in the original is a reversedomain-style identifier)

The third parameter specifies the display caption for the application.

You can view the Hello directory and its subdirectory structure when you are finished

7 Add feature Platform support

Note that all of the following commands are to be run under the project root directory (entered with the CD command).

First, you need to add the platforms you need to support, such as:

Cordova Platform Add Android

Cordova Platform Add iOS

Note: It seems that iOS development can only be done on Mac machines, so the add iOS above does not appear on the Windows machine.

When you are finished, run the following command to view:

Cordova Platfrom List

If you need to remove Android platform support later, you can run:

Cordova Platform RM Android

Running the platform Add or platform RM command affects the contents of the project directory. Each added platform produces a subdirectory of the corresponding platform under the platform of the project root directory. You can see that there are also WWW directories under each platform, such as platforms\android\assets\www. Because the CLI will constantly replicate the contents of www in the project root directory, you should make sure that you do not modify the contents of the WWW directory under the platform. If you really have this requirement, please refer to the "merges directory" at the end of this chapter.

Warning:

If you use the CLI to manage your project, try not to change anything in the platforms directory unless you have a clear grasp of what you are doing. This is because the contents of this directory are overwritten under some conditions.

If you want to be able to develop at this time through a platform-specific SDK (such as Eclipse), you should open the content that is located in the platforms subdirectory. This is because some of the configuration information associated with the platform is stored in a platforms specific subdirectory

8 Compiling the application

To import the generated Android project into eclipse:

Open Eclipse, right click to select Import

By default, the Cordova create script creates a very simple web-based application.

Run the following command to compile the application:

Cordova Build or Cordova build Android//compile only for Andorid platform

If the final hint: Build successful, the compilation succeeds.

The build command actually corresponds to the following two commands:

Cordova Prepare Android

Cordova Compile Android

This means that you can only execute the prepare command and then use the SDK development environment to compile it separately.

9 Testing in the emulator

Open Eclipse, choose Menu New-->project->android->androidproject from Existing Code, select Project root as Hello\platforms\android, And make sure that both Hello and hello-cordoralib two items are selected. (The Hello-corodoralib project needs to be selected because this project will replace the traditional. jar file)

If the project name has a red fork, it represents an unresolved issue. At this point you can try:

1) Right click on the project name and select Properties.

2) Select Android in the left navigation bar.

3) Select the corresponding target platform on the right. Like Android4.4.

4) Click OK.

Later, launch Android SDK Manager in Eclipse. Such as:

After opening manger, click Menu Tools->manage AVDs ..., then click on the device definitions bar, such as:

Select the emulator you want, and then click Create AVD to accept the default settings. When you're done, you'll see the new emulator in the list.

Select the emulator in the list and click the Start button on the right side of the form to launch the emulator (click Launch in the boot prompt window).

Right-click on the project name, select Run as->android application, and wait patiently for the emulator to load.

If your CPU supports virtualization technology, you can set it up to improve the efficiency of the emulator by referencing the relevant documentation.

After loading you will be able to see your first Android program by operating the emulator as follows:

Alternatively, you can start the emulator by running the following command on the command line:

Cordova emulate Android

10 Add plugin Support (original: Add PLUGIN FEATURES)

As we have seen above, Cordova provides a very simple program interface and functionality by default. You can, of course, run standard web development techniques to design your pages according to your needs. But when you need to communicate with different devices, you need some plug-ins to access the core APIs provided by Cordova.

In general, the purpose of adding a plugin is to use the Cordova API to access the device. Detailed list of available plugins you can see in the community (http://plugins.cordova.io/). Of course you can also customize your own plugins.

You can use the CLI to search for available plugins, such as:

Cordova Plugin Search bar code

You can install the plugin using the following command, such as:

Cordova Plugin Add Org.apache.cordova.device//Device API

Cordova Plugin Add org.apache.cordova.network-information//Network (event)

Cordova Plugin Add org.apache.cordova.battery-status//battery (event)

Cordova Plugin Add org.apache.cordova.device-motion//Accelerator

Cordova Plugin Add org.apache.cordova.device-orientation//Compass

Cordova Plugin Add org.apache.cordova.geolocation//Positioning

Cordova Plugin Add Org.apache.cordova.camera//Webcam

Cordova Plugin Add org.apache.cordova.media-capture//media file processing

Cordova Plugin Add Org.apache.cordova.media//media file processing

Cordova Plugin Add org.apache.cordova.file//file access

Cordova Plugin Add org.apache.cordova.file-transfer//File transfer

Cordova Plugin Add org.apache.cordova.dialogs//dialog box

Cordova Plugin Add org.apache.cordova.vibration//Vibration

Cordova Plugin Add org.apache.cordova.contacts//Contact

Cordova Plugin Add org.apache.cordova.globalization//globalization

Cordova Plugin Add Org.apache.cordova.splashscreen//splash screen

Cordova Plugin Add Org.apache.cordova.inappbrowser//Open a new browser window

Cordova Plugin Add org.apache.cordova.console//debug Console

You can view all installed plugins with the following command

Cordova Plugin ls

Use the following command to remove the plugin:

Cordova Plugin RM org.apache.cordova.console

Plugin Add Advanced options

It is a very common practice to get the plug-in by ID from the Registry.cordova.io library. You can specify the version at the time of installation, such as:

Cordova plugin Add[email protected]

Cordova plugin Add[email protected]

One of the latest means getting the latest version. The middle is separated by @.

If the plug-in is not in the default library, but somewhere else, you can specify the URL:

Cordova Plugin Addhttps://github.com/apache/cordova-plugin-console.git

Of course you need to install Git first.

11MERGE Catalog

As mentioned earlier, it is generally better not to modify the files under the WWW directory under the respective platform. But what if you really need to customize some content for a platform?

There is a merges directory under the project root directory. Let's take an example to explain:

1) Modify the Index.css file in the Www\css directory, set the event.received style to red: Background-color: #FF0000;

2) Modify the Index.css file in the Platforms\android\assets\www\css, set the. event.received style to Blue: Background-color: #0000FF;

3) Create a new CSS directory under the Merges\android directory.

Copy the Index.css file in the www\css to the directory.

Modify the. event.received style in the Index.css file under this directory to be green: background-color:# 00ff00;

Emulator, you will find that the final rendering result is green. From this we know:

1) when there is no corresponding file in the merges directory, the file under platform will be overwritten with the file under directory (WWW). (i.e.: If the Index.css file does not exist in the merges directory, the final color will be red)

2) when the corresponding file exists in the merges directory, the file under platform will be overwritten by the file under merges. The visible merges directory is primarily used to customize functionality for the platform.

12 Help Commands

Use the following command to view the Help information:

Cordova Help

Update command

The following statement updates Cordova:

NPM update-g Cordova

After the Cordova update is complete, you will also need to update the project:

Cordova Platform update Android

Attention:

Because of the differences between versions, please read the official documentation carefully prior to performing the update to avoid data loss or errors

Build Cordova Environment under WIN7