Cordova development environment to build and create the first app

Organize your records use Cordova to create an app app and deploy it to your Android mobile device on a detailed process, as follows:

First, the pre-installation environment

1. Installing the JDK (Java SDK)

2. Installing Gradle

3. Install the Android SDK

4. Add SDK Packages

5. Setting Environment variables

Second, the installation and use of Cordova

1. Installing Cordova

2. Create an app, run, and compile with Cordova

3. Running in simulators and devices

First, the pre-installation environment

1. Installing the JDK (Java SDK)

Installing the Java Development Kit (JDK) 8 or later (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)

Remember to install the first to see whether your Windows computer is 32-bit or 64-bit, here you want to download the corresponding number of bits of the JDK, or the subsequent error.

after the Windows double-click installation is complete, you also need to set the environment variables according to your JDK installation path , without setting the environment variables on the MAC;

How to set up: computer--Properties--Advanced system settings--environment variables or directly at the beginning--Program--Search "Environment variables"

The following actions are performed under System variables:

(1) New variable name "Java_home", Variable Value "C:\Program files\java\jdk1.8.0_13 1"(i.e. JDK installation path)
(2) Edit, variable name "Path", the value of the original variable with ";%java_home%\bin;%java_home%\jre\bin" (Remember not to drop the front; ）
(3) New variable name "CLASSPATH", Variable Value ".; %java_home%\lib;%java_home%\lib\dt.jar;%java_home%\lib\tools.jar "(Note that there is a point in the front)

For example:java_home environment variable operation is as follows:

After the environment variable configuration is complete, enter the Java,javac,java-version command in the console to display the compiler information of the JDK, including information such as the syntax and parameter options for modifying the command, indicating that the environment is configured correctly.

2. Installing Gradle

Gradle Official website: https://gradle.org/

Download gradle:https://gradle.org/releases/

You can choose a newer version of the download, download it is a zip package, unzip and put to D:\Program files\,

1. New system variable Gradle_home, the variable value is GRADLE path: D:\Program files\gradle-4.1-bin\gradle-4.1

2. Modify the environment variable Path, that is, append %gradle_home%\bin;

After the configuration is complete, enter the command line in the DOS command window in the popup window: gradle-v;

3. Install the Android SDK

Install Android Studio (if you can't open please bring your own FQ ladder), download the direct installation

4. Add SDK Packages

After installing the Android SDK, you must also install a package that you want to target at the API level (if you cannot open your own FQ ladder). It is recommended that you install the highest SDK version supported by your cordova-android version. The specific installation method is as follows:

After the installation is complete, double-click SDK Manager.exe, open the SDK manager, and make sure that the following is installed:

1. (Must!) Android Platform SDK that matches your target Android version. The Android SDK platform tool contains the tools required for the Android platform

2. (Must!) ) Android SDK build-tools version 19.1.0 or higher than this release. Android SDK Builder is built to build Android apps

3. (recommended) Android support Repository, found under "Extras". Contains a local Maven repository that supports libraries, which provides a rich set of APIs that are compatible with most versions of Android. This tool is an essential tool for Android Wear, Android TV, and Google Cast products.

You can in this step can be installed only a few boxes selected, the rest of the all uncheck, because the download installation speed is too slow, if more, estimated a day is not finished, follow-up if necessary to install can also

5. Setting Environment variables

Cordova CLI Tools need to set some environment variables to work properly. The CLI will attempt to set these variables for you, but in some cases you may need to set them manually. The following variables should be updated:

(1) JAVA_HOME set the environment variable to the location of the JDK installation (this operation was set when the JDK was installed)

(2) ANDROID_HOME set the environment variable to the location of the Android SDK installation (because Android Studio is already installed on our PC, here is the installation path for Android studio, my installation path is E:\AndroidStudio)



(3) In addition, it is recommended that you add the Android SDK tools , tools/bin and platform-tools directory to yourPATH

Second, the installation and use of Cordova

1. Installing Cordova

the Cordova command-line tool is published in the form of NPM packages. to install cordova the command-line tool, follow these steps:

1. Download and install node. js

2. (optional) If you do not have a git client, please download and install it. After installation, you should be able to git invoke it on the command line.

3. Install Cordova via a domestic mirror

Because the domestic firewall may not be able to download Cordova from http://www.npmjs.org/, it is recommended that we use the domestic mirror in the actual operation of the installation of Cordova, or in the subsequent occurrence of the phenomenon can not continue. Here's how:

(Method 1) Through the Config command: (temporarily specify the image source)

$ NPM Config Set registry https://registry.npm.taobao.org $ NPM install-g Cordova

　　

(Method 2) The command line specifies: (temporarily specify a mirror source)

$ NPM--registry https://registry.npm.taobao.org Info underscore

　　

(Method 3) Edit the NPMRC file and add the following: (recommend this method, permanently specify the data source)

Registry = https://registry.npm.taobao.org

After downloading Cordova, use the following command to view the current Cordova version:

$ cordova-v

2. Create an app, run, and compile with Cordova

Go to the directory where you want to create the app, and create a Cordova project:

$ Cordova Create Hello Com.example.hello HelloWorld

(Note: If you want to see the progress of installing the app, you can add a command-line option-D.) ）

The parameters of the Cordova Create command are as follows:

• The first parameter is the file directory of the Cordova app project and is not selectable;
• The second parameter is the domain ID of the app project, optional;
• The third parameter is the app's title, which is optional. This title can also be modified later in CONFIG. The default value is Hellocordova.

Add a running platform to your app

All subsequent commands need to be run in the project's directory or in any subdirectories:

For example, I created the project in E:\cordova\hello, then use the CD command, switch to the Hello directory

$ e:$ cd cordova$ CD Hello

Add the platform you want to navigate to the application, here is a temporary explanation for adding "Android" platform, follow up need to add "IOS" platform, after the addition of the application flat need to ensure that they are saved config.xml andpackage.json。

$ cordova platform add browser

$ Cordova Platform Add Android

Check your current set of platforms:

$ Cordova Platform LS

On Mac, the platforms you can add are:

$ Cordova Platform Add ios$ Cordova Platform add amazon-fireos$ Cordova Platform add android$ Cordova Platform Add BLACKBE rry10$ Cordova Platform Add Firefoxos

　　

In Windows, the platforms you can add are:

$ Cordova Platform Add wp8$ Cordova Platform add windows$ Cordova Platform add amazon-fireos$ Cordova Platform add Android $ Cordova Platform Add blackberry10$ Cordova Platform Add Firefoxos

　

List the current Cordova running platforms:

$ Cordova Platforms LS

To delete the current running platform:

$ Cordova Platform Remove blackberry10$ Cordova Platform RM Android

　　

　

4. Run the app on a specific platform

Be sure to perform a specific platform for Cordova platform add to specify the Cordova run operation to navigate the effect on that running platform.

For example, run the MyApp program in a browser:

$ Cordova Run Browser

　　

At this point, the browser automatically access Http://localhost:8000/, you can see the following interface, the new default app is ready to run:

compiling the Cordova APP

Before you edit the app, you can check to see if you meet the requirements of the build platform:

Information all display installed as normal, if the red or hint some error, then follow the instructions Baidu continue to install

$ Cordova requirementsrequirements Check results for Android:java jdk:installed. Android sdk:installedandroid target:installed android-19,android-21,android-22,android-23,google Inc.:Google APIs : 19,google inc.:google APIs (x86 System Image): 19,google inc.:google apis:23gradle:installedrequirements Check results F or ios:apple os x:not Installedcordova tooling for iOS requires Apple OS xerror:some of requirements check failed

　　

$ Cordova Build

　　

You can also choose to compile specific run-time platform code:

$ Cordova Build iOS

The Cordova build iOS command is equivalent to the shorthand for two commands:

$ Cordova Prepare ios$ Cordova compile iOS

After the build command executes successfully, the application installation file is generated in the corresponding file

e:/cordova/hello/platforms/android/build/outputs/apk/android-debug.apk

Cordova development environment to build and create the first app