PhoneGap introduction and simple deployment, and phonegap deployment

PhoneGap introduction and simple deployment, and phonegap deployment

1. What is PhoneGap:

PhoneGap is a free and open source development tool and framework that allows you to develop programs on multiple mobile platforms using the powerful functions of HTML + JavaScript + CSS, developed programs are compiled on their respective platforms to form independent installation programs. Make the program look the same as the native program.

Ii. Advantages and Disadvantages of PhoneGap:

Advantages:

L cross-platform: one development, multiple platforms sharing. It mainly includes android, iOS, Apple iOS, Google Android, Palm, Symbian, and BlackBerry. WP7 and other platforms are gradually compatible.

L lower the development threshold. For many WEB developers, it is quite painful to be familiar with Objective-C language and Java language. With PhoneGap, you don't have to worry about this. With familiar Web Front-end technology, you can develop very professional mobile phone applications.

L provides powerful hardware access control. Compared with traditional Web programs, PhoneGap provides JS classes with some columns, allowing you to directly access hardware. For example, acceleration, cameras, compass, GPS, and file access allow you to use JS to conveniently call system hardware. To make up for a piece of errors in traditional Web programs.

L easy installation and use. The architecture of PhoneGap is very complex, but for most developers, the environment can be set up with simple configuration. You only need to focus on writing your own Web pages and copy them in.

Disadvantages:

L slow running speed: The program loading and UI interface response are slower than the native program because it is still displaying Web pages, therefore, loading and page refreshing must take some time.

L not suitable for some programs. If your program requires 3D functions or has high requirements for interface refresh, it is better to use native languages.

3. Basic knowledge required for PHONEGAP development:

L HTML: as the most basic Web development, HTML knowledge is essential. Now many mobile terminals support HTML5, so it is best to learn HTML5-related knowledge;

L CSS: defines the page style and so on. Without CSS, it is difficult to control the positioning and style of your page. It is recommended that you have knowledge about CSS3 and write a better interface;

L JavaScript: Background interaction is implemented by JavaScript, read and write databases, and load data into Google Map;

L PhoneGap Class Library: Are JavaScript library, use is very simple, there are detailed documents, can refer to the official website: http://docs.phonegap.com/

L basic platform knowledge: for example, to create an iPhone program, you must know how to install XCode, how to compile it, how to obtain the authorization certificate, and how to debug the real machine, to create an android program, you must build an Ecllipse development environment. After using these platforms, you can install the PhoneGap platform.

Exam: http://www.phonegap.com/start

Iv. jQuery Mobile: Powerful assistant of PHONEGAP:

Developing a PhoneGap program, jQuery Mobile is not a must, but with jQuery Mobile, it can make your program more beautiful.

JQuery Mobile is actually a bunch of style sets and JAVA events. For example, if you write a button, iOS and android are different. HTML is often ugly. The general processing method is to redefine the button style to make it more like the button on the mobile phone platform. JQuery Mobile provides you with this framework. You can use simple attribute settings to make buttons similar to getting off the Mobile platform, which is quite convenient. For details, see: http://jquerymobile.com/

Note: The above reproduced to: http://blog.sina.com.cn/s/blog_4cdc44df0100uuiq.html (here to the bloggers expressed deep gratitude, thank the bloggers carefully summarized. Mdoda ~~)

I believe that through the above introduction, you have a certain understanding of PhoneGap. Below I will guide you through the implementation of a simple example to help you understand PhoenGap.

To do well, you must first sharpen your tools. The same is true for developing the PhoneGap program. The first step is to download the latest version of PhoneGap: http://phonegap.com/install/. after downloading the package, you can use phonegapdirectly to decompress the package. The official website of PhoenGap provides a video for installation. However, I don't know the reason for the network or what the problem is. After downloading our PhoneGap, I will start to implement our case.

The development of PhoneGap is very similar to that of Android. The first time we need to develop PhoneGap is the same as that of the previous project. We open eclipse and create a project, which is the same as the one we created before, after creating our project, let's configure the development environment together.

Let's take a look at our directory structure:

　　

From the preceding directory structure, we can easily see that the most important part of today is the assets folder. Where does the content in this folder come from? In the PhoneGap we downloaded in the first step, We decompress the downloaded compressed package, because today's explanation is for Android platform development, so we found the Android folder in the decompressed file, in this folder, there are two files we need: cordova-2.8.1.jar and cordova. js. Of course, many projects are introduced in my project. In actual development, the first two are required, and the rest are added based on your own development needs. Specific Operation: Copy cordova. js to the www folder under assets, copy the cordova-2.8.1.jar to the libs folder, then remember to import this jia package into the project. For more information, see:

　　

At this point, our big job has completed 2/3. Next we will complete the final point:

Create an index.html file and copy it to the www folder under assets:

<! DOCTYPE html> 
Next, modify the main Activity code:
import android.os.Bundle;//import android.app.Activity;import org.apache.cordova.*;public class MainActivity extends DroidGap {    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //setContentView(R.layout.activity_main);        super.loadUrl("file:///android_asset/www/index.html");    }}
Next, we need to add some permission declarations in the AndroidMainfest. xml file:
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.helloword"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="17" />    <supports-screens        android:anyDensity="true"        android:largeScreens="true"        android:normalScreens="true"        android:resizeable="true"        android:smallScreens="true"        android:xlargeScreens="true" />    <uses-permission android:name="android.permission.CAMERA" />    <uses-permission android:name="android.permission.VIBRATE" />    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />    <uses-permission android:name="android.permission.INTERNET" />    <uses-permission android:name="android.permission.RECEIVE_SMS" />    <uses-permission android:name="android.permission.RECORD_AUDIO" />    <uses-permission android:name="android.permission.RECORD_VIDEO" />    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />    <uses-permission android:name="android.permission.READ_CONTACTS" />    <uses-permission android:name="android.permission.WRITE_CONTACTS" />    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />    <uses-permission android:name="android.permission.GET_ACCOUNTS" />    <uses-permission android:name="android.permission.BROADCAST_STICKY" />        <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.example.helloword.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>
At this point, our project has basically been completed. You can see the following content on the simulator:
　　
However, the configuration cannot be completed yet. We also need to add an xml folder under the res file to add a config. xml file (copy the file directly without modification ):
<?xml version="1.0" encoding="utf-8"?><!--       Licensed to the Apache Software Foundation (ASF) under one       or more contributor license agreements.  See the NOTICE file       distributed with this work for additional information       regarding copyright ownership.  The ASF licenses this file       to you under the Apache License, Version 2.0 (the       "License"); you may not use this file except in compliance       with the License.  You may obtain a copy of the License at         http://www.apache.org/licenses/LICENSE-2.0       Unless required by applicable law or agreed to in writing,       software distributed under the License is distributed on an       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY       KIND, either express or implied.  See the License for the       specific language governing permissions and limitations       under the License.--><cordova>    <!--    access elements control the Android whitelist.    Domains are assumed blocked unless set otherwise     -->    <access origin="http://127.0.0.1*"/> <!-- allow local pages -->    <!-- <access origin="https://example.com" /> allow any secure requests to example.com -->    <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->    <access origin=".*"/>    <!-- <content src="http://mysite.com/myapp.html" /> for external pages -->    <content src="index.html" />    <log level="DEBUG"/>    <preference name="useBrowserHistory" value="true" />    <preference name="exit-on-suspend" value="false" /><plugins>    <plugin name="App" value="org.apache.cordova.App"/>    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>    <plugin name="Device" value="org.apache.cordova.Device"/>    <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>    <plugin name="File" value="org.apache.cordova.FileUtils"/>    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>    <plugin name="Notification" value="org.apache.cordova.Notification"/>    <plugin name="Storage" value="org.apache.cordova.Storage"/>    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>    <plugin name="Capture" value="org.apache.cordova.Capture"/>    <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>    <plugin name="Echo" value="org.apache.cordova.Echo" />    <plugin name="Globalization" value="org.apache.cordova.Globalization"/>    <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/></plugins></cordova>
Here, we have finished the introduction of phoneGap. You may have questions. Please leave a message to discuss it.