How to use PhoneGap to package a Web App

Recently made a small game, positioning is mobile access, reasoning finally chose the most framework of jquery mobile, making almost later, whether it can be packaged into an app, just before the PhoneGap have heard, then want to use this to do packaging, which can be difficult twists and turns I want to give up the mood, The official offer, for those of me who have not used it, is very silent, and has written a record of the configuration environment and the packaging process.

Because I only have the andriod environment, so I only take andriod as an example.

The overall steps for building an Android project using PhoneGap are as follows:

1. Install the Java environment.
2. Install the ant build tool.

3. Install the Android development environment and configure environment variables.

4. Install the node. JS Environment and configure environment variables.

5. Install Git

6. Use NPM to install the PHONEGAP Global environment.

7. Use the PhoneGap command to create a PHONEGAP project.

8. Compile PhoneGap as an Android project.

9. Import the above project into ADT for follow-up development.

10. Install the. apk file

In fact, the installation process given by the official website ignores a lot of steps (because here is the andriod environment, so it will be more than the example of the official website more steps), such as my front-end developers, computers, but even Java are not installed, the following detailed explanation of these steps, and eventually generate the APK file.

Installing the Java Environment

This does not need me to say, online a search a lot of, and a lot of programmers computer inside have Java environment, need to emphasize is to install Java environment and download ANDRIOD development environment consistent, otherwise will error, to ensure that are 32 or 64 bit, the author installed a 64-bit JDK and then, The Android environment is 32-bit and is not running successfully.

Resources

JDK Download: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Configuring the Java Environment: HTTP://ZHIDAO.BAIDU.COM/LINK?URL=OY0OVYGYUBGSCU-ASGWOY2V1SH0W5R0YPGPNDOJA1C_ Cvaqunbgv3rwgvzgivseaeuxpn39pg6kuztgizeuoyq

Installing the Ant build tool

Adobe has put PhoneGap in Apache's name for open source, and has changed its name, Ant can build tools under Apache, so ... Need to install ant before you can, the installation process is very simple, the first is to download, choose the appropriate version, because my environment is win7 so download the zip format can be.

Then unzip the zip file into any directory and add the environment variable, as you can see here

1. Add the bin directory to the path
2. Add Ant_home variable to ant's root directory
3. Make sure the JDK is installed and configured Java_home

Then save the environment variable, open the command line input ant-version you should see the output similar to the following, that congratulations success, you can proceed to the next step, if not successful, can Baidu under the wrong reason:

Download the ANDRIOD development environment and configure environment variables

The first is to come here to download the environment, and then install, in fact, extract to any directory, you can see here, next need to add environment variables, the SDK directory of Platform-tools and tools to add to path.

Then you need to set the AVD, open the AVD Manager, click New, then set some parameters, because I am not engaged in Android, so you want to learn in-depth needs to study.

Install Git

Git is my favorite version control tool, My computer comes with GitHub for Windows, just add its git command to path, if you don't have Git installed I recommend you install Mysygit, remember to add git only the path option during the installation. If you have other GIT tools installed, make sure you add the git command to path because the git command is used to install the PHONEGAP process.

To download mysygit here, note that the download process is very slow (no way, who let us in the celestial, previously mysygit on Google code when the speed is slower, download migration to GitHub is much faster).

If you are interested in git, I suggest you join my group to exchange,GitHub home ② 193091696, because 1 groups are full, the group share also has Mysygit's latest pre version, download speed will be hundreds of times times on GitHub!!!!

Install the node. JS Environment and configure environment variables

To download the version you need, Windows recommends downloading the. msi installation package, which comes with NPM, without configuring environment variables, if you download the. exe download knowledge node, you also need to configure environment variables and install NPM yourself. Now the node installation process is really very simple.

Installing the PHONEGAP Global environment with NPM

Here you can install the provided tutorials on the official website, open the command line tool for the node you just installed, and then enternpm install -g phonegap，将会自动安装phonegap，需要注意的是安装过程非常缓慢，因为安装期间回到用到git命令去下载文件（不是git慢，而是外网慢）。安装完成后会提示安装成功，当然你也可以输入phonegap -v，你将会看到如下输出，说明你安装成功了：

To create a PhoneGap project using the PhoneGap command

Next, cut the path to any directory and enter phonegap create my-app 你将会看到如下画面：

Compiling PhoneGap as an Android project

Next, switch to the MYAPP1 directory and run PhoneGap run Andriod

CD my-appphonegap run Android

There will be a lot of build information that will automatically start the ADK simulator when successful

If you don't want to run the Android emulator and just want to construct the project then you just run PhoneGap build Android.

Import the above project into ADT for follow-up development

Start eclipse in ADT, then select File-new-project, select Android->android Project from Existing Code in the Open New Project Wizard, and select Next

In the next navigation page, root directory selects the My-app/platforms/android folder that you just created, and a list of two items will appear below projects, but do not tick copy projects into Workspace option.

Select Finish to complete the above import

Words above the import process is copied and pasted, the author imported when the Click finished is not working, I do not know why, more depressed, I do not know whether you will encounter the same thing.

Install the. apk file

The corresponding APK file has been generated in the Platforms\android\ant-build in the project directory and can be installed by importing it into your phone.

I do not know what the difference between the two apk, I said the first to put on the phone to try, quite perfect.

Conclusion

To complete the process of building a Web project with PhoneGap, is not often complicated, and the installation process of other articles on the Internet, I try to most of the unsuccessful, this will be the summary of their own installation process, I hope to help everyone.

Note

Reference documents:

Http://zhidao.baidu.com/link?url= Tqdjtcyzqa-lg9avhavyjbj3dqbhwzlkibgvblfbmsomc73s0ro-byuvaxu9fsbyvpjpsicfffgts2dvrvqzpycvu2nk8ljogh0dx8xxp1i

http://zhaochaozcx.blog.163.com/blog/static/22000865201375102830684/

Q Group Recommendations

CSS Home 188275051,web developers (front and back) of paradise, welcome interested classmates to join

GitHub Home (this group is full) 225932282,git/github lovers of paradise, welcome interested classmates to join

GitHub Home ② 19309169

Yards Farm house 203145707, yards farmers ' paradise, welcome interested classmates to join