Detailed description of setup and configuration of the phonegap installation environment (3.4 full version provides the download address)

Source: Internet
Author: User

Phonegap3.4Build the full version of the installation environment

 

It took me one afternoon to complete the configuration of phonegap because of various problems encountered in the configuration environment. Therefore, I hope to save some time by writing an article.

This article describes how to set up the phonegap environment in windows from the android perspective. for ios users, see;

 

First, we will introduce the basic preparations for building the environment:

1 java JDK (search .......)

2. The latest android SDK version (my current version is API 19. Click to open the link)

3 Ant packaging tool (Baidu one or click to open the link)

4 eclipse (google is recommended because of the built-in ADT click to open the link)

5 ADT (the plug-in ecplise, Android development tool plug-in download the above link, the internal integration of ADT)

6. Node. js (click to open the link)

7. Click sublime to open the link. It is a tool for developing js h5 css. If you have any good development software, please let me know. Thank you.

 

After Node. js is successfully installed

 

Configure the preceding environment variables (Click here for the configuration method)

Specifically, you need to configure the environment variables: java JDK, android SDK, and Ant;

 

Paste my path for your reference:

(It is recommended to assign; % ANT_HOME % \ bin; remove \ bin)

F: \ tool \ Ant \ ant-1.8 \ bin;

C: \ Develop \ sdk \ platform-tools; C: \ Develop \ sdk \ tools; % Android % \.; c: \ Develop \ nodejs; % JAVA_HOME % \ bin; C: \ Develop \ nodejs \

 

With the above tools

 

 

Next, install phonegap.

Click phonegap Official Website

 

 

Run the following command on the console:


Npm install-g phonegap (Mac: sudo npm install-g phonegap)

// Install cordova after installation is complete:

Npm install-g cordova (Mac: sudo npm install-g cordova)

 

 

 

 

 

After installation is complete
Test statement:

phonegap -version

cordova -version

 

 

 

Use the following command line:

 phonegap create my-app cd my-app phonegap run android

 

The first phonegap program appears.

 

In the my-app directory, five packages of packaged projects are displayed in platforms.

Folder details:

 

Www: HTML5, CSS, and JS files developed by folders are copied to this directory.

Plugins: the folder stores files after the phonegap plug-in, and all plug-ins such as cameras are downloaded here. The usage is described in the next article.

Merges: I have never used it, and I will try again later.

Platforms: the folder stores the compiled android file. (If this folder is empty, you must compile it once in the command line to generate the file. For example, phonegap run android above)

. Cordova: stores configuration files.

 

 

Import this folder to eclipse.

Phonegap will be imported as a third-party library

If the src file reports an error, check whether the phonegap function is not imported.

 

After importing eclipse, the text structure... camera and vibration are introduced in the next section of the plug-in for cameras and ringtones.

 

 

(Figure 1)

 

Is the startup page of phonegap. Call super. loadUrl (); Method

 

 

public class baozi extends CordovaActivity {    @Override    public void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        super.init();        // Set by <content src="index.html" /> in config.xml//        super.loadUrl(Config.getStartUrl());        super.loadUrl("file:///android_asset/www/index.html");                      }}

 


Enter your startup page in super. loadUrl ("");

 

Parameter: "file: // android_asset/www/index.html"

It refers to index.html under the www folder under the assets Directory (figure 1)

 

 

 

Paste a property map after project Import

 

If the import project reports an error, see

Http://blog.csdn.net/aaawqqq/article/details/20463183

 

 

Next section describes how to use the phonegap plug-in.

Makeup: http://blog.csdn.net/aaawqqq/article/details/20401111

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.