How to Use PhoneGap to package Web apps

Recently I made a small game targeting mobile access. I finally decided to use the jQuery mobile framework. After making the game, I thought about whether it can be packaged into an App. I heard about PhoneGap in the past, I want to use this package for packaging, but it can be difficult and difficult to give up for many times. The official example is really speechless for me, who have never used it, the configuration environment and packaging process have been recorded.

Because I only get the Andriod environment, here I only use Andriod as an example.

Follow these steps to build an Android development project using PhoneGap:

In fact, the installation process provided on the official website ignores many steps (because this is the Andriod environment, there will be many more steps than the official website examples), front-end developers like me, the computer is not even installed in java. The following describes these steps in detail and finally generates an apk file.

Install the Java environment

I don't need to talk about this. I search a lot on the Internet, and many programmers have a java environment in their computers. It should be emphasized that the java installation environment should be consistent with the andriod Development Environment downloaded later, otherwise, an error will be reported. To ensure that the data is both 32-bit and 64-bit, I have installed a 64-bit jdk. Then, the android environment is 32-bit and the operation fails.

Resources

Jdk download: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Configure the java environment: http://zhidao.baidu.com/link? Url = OY0oVYGYuBgsCu-ASgWoY2V1Sh0W5R0yPgpndOjA1c_cvAqUnBGv3RWGVZGIvSeAEUXPN39Pg6kUzTgizeuoYq

Install Ant build tool

Adobe has put PhoneGap under Apache for open source and changed its name. ant can be used to build tools under apache, so ...... You need to install ant first. The installation process is actually very simple. The first step is to download and select the appropriate version. Because my environment is win7, you can download the zip format.

Decompress the zip file to any directory and add environment variables. For more information, see here.

Then save the environment variable and open the command line and enter ant-version. You should see the output similar to the following. Congratulations, the operation is successful. You can proceed to the next step. If the output is not successful, you can use Baidu's error cause:

Download Andriod development environment and configure Environment Variables

The first step is to download the environment here, and then install the environment. In fact, it is to decompress the package to any directory. You can see here. Next, you need to add the environment variable, add platform-tools and tools under the sdk directory to path.

Then you need to set avd, open AVD Manager, click New, and set some parameters. Because I am not engaged in Android, do you need to study it yourself if you want to learn more.

Install git

Git is a version control tool that I like very much. It comes with github for windows on my computer. You just need to add its git command to path, if you have not installed git, I suggest you install mysygit. During the installation process, remember to tick git and add the path-only option. If you install other git tools, make sure to add the git command to the path because the git command is used during the installation of phonegap.

Come here to download mysygit. Note that the download process is very slow (no one can help us in tianchao. In the past, mysygit was slower on google code, it is much faster to download and migrate to github ).

If you are interested in git, I suggest you join our group for discussion. The latest pre version of mysygit is also available in the group share because the group 1 is full in GitHub home ② 193091696, the download speed will be several hundred times faster than that on github !!!!

Install the Node. js environment and configure Environment Variables

Here we will download your local file. Windows recommends downloading the. msiinstallation package, with npmand no need to configure the environment variable. If you download .exe, you also need to configure the environment variable and install npm on your own. The current node installation process is really simple.

Use npm to install the global environment of PhoneGap

Now you can install the tutorials provided on the official website. Open the command line tool of the node you just installed, and enterNpm install-g phonegap will automatically install phonegap. It should be noted that the installation process is very slow because the git command is used to download the file during installation (not git slow, but the Internet is slow ). After the installation is complete, you will be prompted that the installation is successful. Of course, you can also enter phonegap-v. You will see the following output, indicating that the installation is successful:

Use the PhoneGap command to create a PhoneGap Project

Next, switch the path to any directory and enter phonegap create my-appYou will see the following picture:

Compile 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 building information, and the adk simulator will be automatically started after successful

 

If you don't want to run the android simulator, but want to build a project, you only need to run phonegap to build android.

Import the above project to ADT for subsequent development

Start eclipse in ADT, 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, select the my-app/platforms/android folder created in Root Directory. Select both Projects under projects, but do not select the Copy Projects into workspace option.

Select Finish to complete the import.

In other words, the above import process is copied and pasted. Clicking finished during import by the author does not work. I don't know why, it's depressing, and whether you will encounter the same thing.

Install the. APK File

The corresponding apk file has been generated in platforms \ android \ ant-build under the project directory. You can import it to your mobile phone to install it.

I don't know what the difference between these two apks is. I told you to try the first one on your phone, which is perfect.

Conclusion

So far, the process of building a web project with phonegap has been completed. Is it very complex? In addition, the installation process of other articles on the Internet has failed in most cases. I will summarize the installation process here, hope to help you.

Note

References:

Http://zhidao.baidu.com/link? Url = TQDJTCYZqa-lG9AvhAvYjbj3DqbHwZLkIbGvBlFBMsomC73s0Ro-byUvAxu9fsByVPjpSicFFFGtS2dVrVqzpYcVU2NK8ljogH0dX8XXp1i

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

Q group recommendation

CSS home 188275051, a paradise for Web developers (front and back end). You are welcome to join us.

GitHub home (this group is full) 225932282, a paradise for Git/GitHub lovers, welcome to join

GitHub home ② 19309169

203145707, a paradise for farmers. You are welcome to join us.