How to encapsulate WebApp based on Android with PhoneGap

On android, we can generate an application based on android.webkit.WebView as the main view of the application, and let this WebView load the specified webpage when the application is started, so as to build an Android-based WebApp.

For Android, Sencha's phonegap also encapsulates web programs in this way. After downloading phonegap, it mainly includes two files:

1、phonegap

This jar file contains the DroidGap class, which properly encapsulates Activity and WebView, making it easier for users to package.

The more important function is to implement multiple Webkit plug-ins, through which some system functions of android can be directly called in javascript, such as obtaining device information such as screen size and system version number, and a series of functions such as making phone calls, sending text messages and writing local files.

2、phonegap

This js file is encapsulated at a higher level, so it is more convenient to call the added plug-in function in javascript. For example, call directly in js:

A navigator. Notice. Vibration (0) can directly make the mobile phone vibrate.

And navigator.notification.Beep(2) can make the phone ring twice.

Let's try the simplest example (you can also see the example that comes with phonegap):

(1)java source code file: Sample.java.

Parcel? com . phonegap . sample； ? Import? Android . app . activity； ? Import? Android . OS . bundle； ? Import? com . phonegap . *； ? Public? Class? Sample? Extension? DroidGap？ { ? @ Overwrite? Public? Invalid? OnCreate (bundle? savedInstanceState)？ { ? super . oncreate(savedInstanceState)； ? super . loadurl(" file:///Android _ asset/www/index . html ")； ? } ? }?

(2) Web page code: index.html

& lt！ DOCTYPE？ html & gt？ & lthtml & gt？ & lthead & gt？ & ltmeta？ http-equiv="Content-Type "？ content = " text/html； ? Charset=utf-8 ">& lt script? type="text/javascript "？ charset="utf-8 "？ src="phonegap.0.9.4.js " >& lt/script & gt； ? < title > test ; ? & lt/head & gt； ? & ltbody & gt？ & lt answer? href = " JavaScript:navigator . notification . alert(' hello ')；" & gt click? I & lt/a & gt；; ? & lt/body & gt； ? & lt/html & gt； ?

Put this file in the assets/www/ directory of the project, and if the webpage code contains other directories, put it in this directory.

(3) Add a reference to phonegap.0.9.4.jar in the project.

When compiling and running, click the click me link in the page to see the following screen:

note:

(1)phonegap.0.9.4.jar provides many plug-ins, and the above sample program only calls navigator.notification.alert If you need to call other functions, you need to add this function permission statement in Manifest.xml of the android project:

& lt permission? Android:name = " Android . permission . camera "？ /& gt； ? & lt permission? Android:name = " Android . permission . vibrate "？ /& gt； ? & lt permission? Android:name = " Android . permission . access _ COARSE _ LOCATION "？ /& gt； ? & lt permission? Android:name = " Android . permission . access _ FINE _ LOCATION "？ /& gt； ? & lt permission? Android:name = " Android . permission . access _ LOCATION _ EXTRA _ COMMANDS "？ /& gt； ? & lt permission? Android:name = " Android . permission . read _ PHONE _ STATE "？ /& gt； ? & lt permission? Android:name = " Android . permission . internet "？ /& gt； ? & lt permission? Android:name = " Android . permission . receive _ SMS "？ /& gt； ? & lt permission? Android:name = " Android . permission . record _ AUDIO "？ /& gt； ? & lt permission? Android:name = " Android . permission . modify _ AUDIO _ SETTINGS "？ /& gt； ? & lt permission? Android:name = " Android . permission . read _ CONTACTS "？ /& gt； ? & lt permission? Android:name = " Android . permission . write _ CONTACTS "？ /& gt； ? & lt permission? Android:name = " Android . permission . write _ EXTERNAL _ STORAGE "？ /& gt； ? & lt permission? Android:name = " Android . permission . access _ NETWORK _ STATE "？ /& gt； ?

(2) Complete engineering documents can be downloaded here. This example is based on an example attached to phonegap, but only the least part is kept.