Hybrid development framework (I) Introduction to PhoneGap, hybridphonegap

Hybrid development framework (I) Introduction to PhoneGap, hybridphonegap

This series of blogs will introduce how to use js libraries or tools such as PhoneGap, Backbone, Seajs, Ratchet, and SPM to build a Web-based master-type mobile application development framework in Hybrid mode.

 

Phonegap is an open-source development framework designed for developers to use HTML, Javascript, CSS, and other Web APIs to develop cross-platform mobile applications. PhoneGap was originally developed by Nitobi. After Adobe acquired the company, Adobe donated the core code of PhoneGap to Apache, so it had Apache Cordova. In fact, there is no difference between the two core codes. PhoneGap is the original name, and Adobe owns the PhoneGap trademark, so the donated code changed its name to Apache Plugin. After decompression, we found that the name is also cordova.

The pictures on the official PhoneGap and Cordova websites are respectively described. The picture comparison shows that Cordova is similar to the brain (Core Component) of PhoneGap ). PhoneGap provides cloud Packaging Services and other functions for enterprise developers.

The following is a simple Demo on the Android platform using PhoneGap. Development Environment: Windows7 + Eclipse 4.2.2 + Android SDK 17

In the http://phonegap.com/download a latest PhoneGap package, decompress the package in the lib folder to get the following folder, you can see that PhoneGap currently supports the platform android, ios, windows-phone, etc, now we only present the Android platform. Find the src folder and assets folder from the android folder.

Create an Android project HybridDemo and copy the files in these two folders to the corresponding directory of the new project, as shown in (the new version of PhoneGap depends on the okhttp Library ):

Modify the MainActivity. java file:

import org.apache.cordova.DroidGap;import android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;import android.view.Menu;public class MainActivity extends  DroidGap {  @SuppressLint("SetJavaScriptEnabled")@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);    super.init();super.appView.getSettings().setJavaScriptEnabled(true);  super.loadUrl("file:///android_asset/www/index.html",2000); } }

Modify the AndroidManifest. xml file to add permissions for calling each function component of PhoneGap.

   <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" />

There is also a config. xml configuration file. The file path is res/xml/config. xml: This configuration file is only used for demonstration. It does not involve plug-in development. You do not need to modify this configuration file and copy it from the phonegap folder. This configuration file is referenced in the java implementation Part Of The PhoneGap framework, if it is not found, an error is returned.

Program running result: