What is PhoneGap?
PhoneGap is an HTML5-based mobile application front-end development framework that uses HTML+CSS+JavaScript to quickly create apps.
PhoneGap allows you to get native features of mobile devices, such as cameras, accelerators, and compass, using simple Web technologies.
PhoneGap is fully open source, and you can write components that extend any native device features. You can then package your APP with PhoneGap so that you can write the base code once and deploy your APP to multiple mobile platforms.
The advantages and disadvantages
The advantages of PnoneGap
1. The cross-platform
PhoneGap currently supports mobile platforms such as Android, iOS, Windows Phone, Windows 8, Firefox OS, Amazon Fire OS, BlackBerry 10, Ubuntu, Tizen. (Who is better than me!)
2. High cost performance and low development difficulty
What better technology than HTML+CSS+JS to develop apps that run on as many as 8 mobile platforms?
There are far more people who believe in the front end of HTML than there are in any other development language. But for server-side development, you still need to know another language like PHP, Java,.NET, Ruby, or Python, so there’s no limit. However, the more compatible the technology, the lower the cost, the worse the performance; The less compatible the technology, the higher the cost and the better the performance.
The shortage of PhoneGap
1. Operating efficiency
PhoneGap relies on WebKit, the built-in browser on mobile devices, so it is naturally slower to run than native apps.
2. All system APIs cannot be supported
Due to the need to support multiple platforms, there is a risk that some platform-specific API will not be supported in a timely manner on PhoneGap.
Steps to establish the project
Now that we’ve covered some of the basics of PhoneGap, we’ll cover how to build a PhoneGap project in this course.
We can create the project from the command line. First create a folder, then you can create the project with the following command. For example, create a project named project with the following code:
phonegap create project com.example.hello HelloWorld
PhoneGap create: command to create a project; Project: name of the project directory; Com.example.hello: Name of the project’s internal package; HelloWorld: project name, the name that the packaged installer will display after installation;
2. After the creation command is completed, go to the project directory and add PhoneGap plugin, which we can do with the following command:
Phonegap plugins add < plug-in name > | plug-in addressFor example, if we want to add a network plug-in to our project, we can use the following command:
cd project
phonegap plugin add cordova-plugin-network-information
3.PhoneGap generates an Android project using the following commands:
phonegap build android
If you want to run on iOS, you can use the following command:
phonegap build ios
With the three steps above, a PhoneGap project is complete, and you can download the APK files you’ve compiled to your phone or emulator to see how it works.
PS: Everything in this article is based on Android.
project
We’re going to take you through the process of creating your own PhoneGap application. It’s as simple as hitting the back button and saying “Hello World”.
1. In the system, first go to the root directory, which is the directory where we want to create the project. The following code:
cd /
cd root
2. Once you go to the root directory, you can then create the project using the phoneGap create command. We create a project called project. The following code:
phonegap create project com.example.hello HelloWorld
The structure of the created directory is as follows:
3. After the creation command is completed, we can go to the project directory, and then we can add plug-ins to be used, such as network, address book, etc. The following command:
cd project
phonegap plugin add cordova-plugin-network-information
phonegap plugin add cordova-plugin-contacts
Since the project you created does not use plug-ins, you do not need to add them.
4. After the plug-in is added, you can enter the WWW directory in the created directory, and then edit the index. HTML. When clicking the back button, “Hello World” will pop up and save the file. The following code:
<script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.addEventListener("backbutton", onBackKeyDown, false); } function onBackKeyDown() {alert(" Hello World "); } </script>5. In the command line, make our project run to the Android platform and generate APK file through the following commands. The following code:
phonegap build android
Since we are compiling on the network and this is the first time, it will take a long time. After the compilation is completed, it will be faster to compile again.
Okay, now our first PhoneGap app is done, download it to our phone, install it, open it up, and give it a try.
Understand the event
Events are actions that can be recognized by the control, such as pressing the OK button, selecting a radio button, or check box. Each control has its own identifiable events, such as the loading, clicking, double-clicking, and so on of the form, the text-changing events of the edit box (text box), and so on. The same is true for how we operate our phones, hitting the back button, pressing the Home button, low battery power, etc.
Events are system events and user events. System events are triggered by the system, such as the time that every 24 hours a bank depositor’s deposit date is increased by one day. User events are triggered by the user, such as when the user clicks a button to display specific text in a text box. An event-driven control performs a function.
The object that triggers the event is called the event sender. The object that receives the event is called the event receiver.
In this tutorial, I will briefly explain some of the event APIs that PhoneGap provides, such as DeviceReady, BackButton, MenuButton, etc.
deviceready
This event is an event that occurs after PhoneGap has been loaded and acts as an entry point to the program. The registration form of the event is:
document.addEventListener("deviceready", yourCallbackFunction, false);
YourCallbackFunction is the callback function, and all the operations we will handle in the future are in this function.
Normally, we hope that in the HTML file after the DOM is loaded using the document. The addEventListener attach an event listener.
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> // When PhoneGap is loaded and starts talking to the local device, // the "DeviceReady" event is emitted. document.addEventListener("deviceready", onDeviceReady, false); Function ondeviceReady () {// It is now safe to use the PhoneGap API, Backbutton alert("deviceready"); } </script>PS: This event is used in every PhoneGap application and is absolutely necessary!
backbutton
PhoneGap intercepts the back key, which is a feature that triggers an event when the user presses the back key. Event registration forms are as follows:
document.addEventListener("backbutton", yourCallbackFunction, false);
If you need to override the default backbutton behavior on the Android system, you can register an event listener to listen for the “backbutton” event. Instead of calling any other methods to override the return button behavior, it now only needs to register an event listener for the “backbutton” event.
Normally, need after receive the PhoneGap deviceready “events, use the document. The addEventListener to attach the event listener.
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> / / when PhoneGap loaded and started to communicate and local equipment, / / will trigger "deviceready event" document. The addEventListener (" deviceready ", onDeviceReady, false); // PhoneGap is loaded and it is now safe to make calls PhoneGap methods function ondeviceReady () {// Register the fallback button event listener document.addEventListener("backbutton", onBackKeyDown, false); } // function onBackKeyDown() {// write our own code here} </script>menubutton
PhoneGap intercepts the Menu button, a feature that triggers an event when the user presses the Menu button. Event registration forms are as follows:
document.addEventListener("menubutton", yourCallbackFunction, false);
If you need to override the default menubutton behavior on Android, you can register an event listener to listen for “menubutton” events. Normally, you need to accept to PhoneGap deviceready “incident, use the document. The addEventListener to attach the event listener.
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> / / when PhoneGap loaded and started to communicate and local equipment, / / will trigger "deviceready event" document. The addEventListener (" deviceready ", onDeviceReady, false); // PhoneGap is loaded, Can now be safely called PhoneGap method function onDeviceReady () {/ / registered menu button event listener document. The addEventListener (" menubutton onMenuKeyDown, false); } // function onMenuKeyDown() {// write our own code here} </script>