PhoneGap, building a cross-platform APP: phoneGap mobile APP practice, is serialized for four times (using a program to load events ),

PhoneGap, building a cross-platform APP: phoneGap mobile APP practice, is serialized for four times (using a program to load events ),

After learning about the events in PhoneGap, This section describes the usage of these events in detail. This section describes program loading events, that is, deviceready, pause, and resume events.

[Example 4-2 how to use the program to load events]

01 <! DOCTYPE html> 02 



After the program runs, the system automatically loads the scripts in PhoneGap, and then displays the interface 4-7, indicating that the device has been loaded. When a user clicks the "return" or "HOME" button, a dialog box is displayed, as shown in 4-8. However, when the user clicks the "OK" button, the program has been placed in the background.
The building of cross-platform APP: Phonegap mobile APP practice published by Tsinghua University Press is an APP practice book, which contains more than 20 APP instances and 3 APP projects. It also integrates HTML5 mobile development. This book is intended for beginners of mobile development. It is easy to read and is suitable for mobile APP startups. This release is 3rd ~ Chapter 5 serves as the basis for readers to learn. If you are interested, please purchase this book!

Figure 4-7 dialog box displayed after the device is loaded
 
Figure 4-8 a dialog box is displayed when the program is paused.
In principle, if you run the program again at this time, a corresponding dialog box will pop up, but the truth is that when you run the program again, no dialog box will pop up, prompting "the program is restored ". This is not due to a code error. It is determined by some specific call relationships of PhoneGap. To prove this, we need to refer to the 16th ~ Make some modifications in line 29. In this modification, the alert pop-up dialog box is abandoned. Instead, the console. log method is used to output information on the LogCat panel of Eclipse when the corresponding function is executed.
// After the device is loaded, the function onDeviceReady () {console. log ("the device has been loaded! ");} // When the program is paused, execute this function onPause () {console. log (" the program is paused! ") ;}// This function onResume () {console. log (" the device is recovered! ");}
Then run the program. The output information on the LogCat panel is 4-9.

Figure 4-9 Information in LogCat
It turns out that when the program is restored from the paused state, some DOM operations may not receive the expected results if called, which is related to the compatibility and running efficiency of PhoneGap on Android, pay special attention to this point during actual development.
The following uses this example to describe how to use each event in PhoneGap. We can see from lines 10th, 12, and 14 of the example, in PhoneGap, if you want to operate an event, you only need to follow the document. addEventListener ("eventname", function, false); this format can be defined. Eventname is the name of the event to be defined, and function is the custom function responsible for responding to the event.
Tip: You can observe the example carefully to find an interesting problem. That is, the pause and resume events are declared after the device is loaded. This is a good habit, every PhoneGap developer must work hard to adapt to this problem.
Take this opportunity to introduce some additional knowledge, that is, the method for debugging in PhoneGap. Some unexpected errors are often encountered during program development. Generally, some data can be output at a specific location to verify the location where the program fails. In this case, you need to consider how to obtain the data.
For developers who are used to Web development, it is very convenient to use the alert method to pop up data in the dialog box, but this method is not very convenient in actual use, therefore, the console is often used. log method output information for debugging.
Besides using the console. in addition to the log method, many people prefer to use JavaScript DOM operations to directly output the results to the page. In some cases, for example, you need to count the changes of a variable over a period of time, this method is also very practical.
The building of cross-platform APP: Phonegap mobile APP practice published by Tsinghua University Press is an APP practice book, which contains more than 20 APP instances and 3 APP projects. It also integrates HTML5 mobile development. This book is intended for beginners of mobile development. It is easy to read and is suitable for mobile APP startups. This release is 3rd ~ Chapter 5 serves as the basis for readers to learn. If you are interested, please purchase this book! Welcome to join the group: 348632872. Ask the author directly!





Build a Phonegap Environment
Follow these steps to build an Android development project using PhoneGap:
Install the android development environment and configure environment variables.
Install the Node. js environment and configure environment variables.
Use npm to install the global environment of PhoneGap.
Use the PhoneGap command to create a PhoneGap project.
Compile PhoneGap into an android project.
Import the above project to ADT for subsequent development.

The procedure is as follows:

1. install and configure the android development environment:
Download the latest ADT to the local machine and decompress it to the corresponding directory.
Next, you need to configure the environment variables and configure the following two paths to the system PATH:
A, {ADT_HOME} \ sdk \ platform-toolsB, {ADT_HOME} \ sdk \ tools
This completes the configuration of the android development environment.

Ii. install and configure Node. js:
Download and install Node. js for windows.

3. Install the PhoneGap environment:
Run the following command:
Cmd code
Npm install-g phonegap
This command installs and configures the global environment of phonegap from the network. Ensure that the network is smooth.

4. Create a phonegap project:
Run the following command:
Phonegap create my-app
Here, my-app is the name of the project you want to use. This project will be created to the current directory, so before that, please move the current directory to the address you want.

5. compile the project into an android project:
In the preceding command line window, run the following command:
Cd my-app
Phonegap build android
These are two commands. The first one is to enter the current directory to the directory you created. The second command compiles the current project into an android Project (that is, a project that can be used in eclipse of ADT ).

6. Import the project to eclipse of ADT:
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.
 
So far, an android project environment supporting phonegap has been built. You can start this project according to your android development habits.

========================================================== ========================================
For iOS development projects built using PhoneGap, see the reference link.

Reference: www.cnblogs.com/mohe/p/3442348.html
... Remaining full text>

How does phonegap work across platforms?

On Baidu, you can translate the translation online by inputting the translation content.