Use the Cordova framework to encapsulate WebApp into hybrid app practice--android

The company does not have iOS and no Android developers, Front end is need to play their own days before the technical manager said there is a need to webapp package into the hybrid App, is now complete. Document the problems encountered and the configuration of the development environment you need to use

Package WebApp into the hybrid app with the following steps

1. Download the JDK to install 1.8, and configure the environment variables (Note: The latest version of Cordova, you must download 1.8 of the JDK will be an error)

2. Download and install the Ant build tool and configure environment variables (note: The ant directory cannot be Chinese, otherwise the compilation is unsuccessful)

3. Download and install Android and configure the development environment

4. Download and install node. js

5. Installing the Cordova Global environment with NPM

6. Create a Cordova project using Cordova

7. Compiling Cordova as an Android project

8. Install the. apk file

9.Eclipse Installing the Ant plugin

10. Import the Created Android project

11. Download Install connection Third Party simulator (note: This has abandoned the Android emulator to use third-party, because Android comes with the simulator half a day to open, and does not support window System download x86)

The 1.JDK configuration environment is as follows:

In the environment variable new system variable name: Java_home Variable Value: The root directory of the installation path (C:\Program files\java\jdk1.8.0_111)

2. Install the Ant build tool as follows:

1. New system variable variable name: Ant_home Variable Value: The root directory of the installation path (D:\phonegap\apache-ant-1.9.8) adds the path to the bin directory to path

Add the following to path:

After completing the above two points, open the cmd input java-version and ant-version appear below if the installation succeeds, otherwise check the configured environment variable path

3. Install the Android development environment configuration as follows:

The extracted directories are as follows:

1. Add the: platform-tools, tools in the SDK directory to the path of the environment variable

2. After the installation is complete, CMD runs adb is installed successfully,

4. Download and install node. js

Download it with the node. JS installation package installed directly, without configuring the environment

5. Installing the Cordova Global environment with NPM

1. Run cmd

2. Enter this command: NPM install-g Cordova Carriage return here it will take a while to indicate that the installation was successful because I have installed

You can run cordova-v to see if the installation was successful, as shown in 6.4.0 version of Cordova

6. Create a Cordova project using Cordova

1. Switch to any path input command: Cordova Create MyApp enter

2. Enter the project Input command: CD MyApp return

7. Compiling Cordova as an Android project(note: How to report a android-24 error, modify two files when adding a platform1. D:\phonegap\myapp\platforms\a The Project.Properties file in the Ndroid directory changes 24 to2. D:\phonegap\myapp\platforms\a Project.Properties file in Ndroid\cordovalib directory will change 24 to 25)

1. Add the Android Platform Input command: Cordova Platform add Android Enter

Add the following success:

Check if the environment is configured well: Enter the command: Cordova requirements Enter the following to appear OK

8. Install the. apk file

If all of the above is done, start building Android. apk

Input command: Cordova build Android Enter if build succeeded

Now that your D:\phonegap\myapp\platforms\android\build\outputs\apk has an apk file here, OK, that means you've done it.

The current directory structure is:

Now copy the WebApp Mobile project to the WWW directory, delete the original file, and the main program entry is configured in config (suffix cannot be. jsp)

(note: So the request must be an absolute path)

9.Eclipse Installing the Ant plugin

Open Eclipse--->help--->install New software---The following

Restart Eclipse-----> Add the directory where the SDK is located after the ant plugin is successfully installed

10. Import the Created Android project

File--->new--->project-->

Select the above created Android project tick two. Cordovalib, mainactivity

11. Download the Installation Connection third party simulator

Download and install the third-party emulator first (note: The emulator needs to be opened to connect successfully)

Run cmd connection after download installation complete third-party emulator input command adb connect 127.0.0.1:26944 Enter---26944 is the port number of the third-party emulator

When you enter eclipse---Window---show view-->devices appears with

Running mainactivity---Run as---The following interface is selected to select a third-party emulator OK (android-application)

The emulator appears as if it was running successfully ok

Send the APK installation package to your phone to install the following effect:

Hope to be helpful to everyone

Have a problem can add QQ exchange---969351680

Use Cordova framework to encapsulate WebApp into hybrid app--android article