如何用PhoneGap打包基于Android的WebApp

移动开发
如何用PhoneGap打包基于Android的WebApp是本文要介绍的内容,主要是来了解并学习PhoneGap的内容,具体关于PhoneGap内容的实现来看本文详解。

如何用PhoneGap打包基于Android的WebApp是本文要介绍的内容,主要是来了解并学习PhoneGap的内容,具体关于PhoneGap内容的实现来看本文详解。

Android上,我们可以基于android.webkit.WebView作为应用的main view来产生一个应用程序,并让此WebView在应用启动时加载指定的网页,这样就构建了一个基于Android的WebApp。

对于Android, Sencha的phonegap也是基于此方法对网页程序进行打包的,下载phonegap后,其主要包括二个文件:

1、phonegap.0.9.4.jar

此jar文件中包含了类DroidGap,其对Activity及WebView进行了适当的封装,可以让用户更方便地进行打包。

更主要的功能是能实现的多个Webkit的plugin, 通过这些plugin可以在javascript中直接调用android的一些系统功能,比如得到设备的信息如屏幕大小,系统版本号等,还有打电话,发送短信,写本地文件等一系列功能。

2、phonegap.0.9.4.js

此js文件作了更高层次的封装,以便于在javascript中更方便地调用所增加的plugin的功能。比如在js中直接调用:

navigator.notification.vibrate(0)可以直接让手机进行振动

而navigator.notification.beep(2)可以让手机Beep二声

以下尝试一个最简单的例子(也可以参见phonegap中自带的一个例子):

(1)java源代码文件: Sample.java

  1. package com.phonegap.Sample;  
  2. import android.app.Activity;  
  3. import android.os.Bundle;  
  4. import com.phonegap.*;  
  5. public class Sample extends DroidGap  
  6. {  
  7.     @Override  
  8.     public void onCreate(Bundle savedInstanceState)  
  9.     {  
  10.         super.onCreate(savedInstanceState);  
  11.         super.loadUrl("file:///android_asset/www/index.html");  
  12.     }  

(2)网页代码: index.html   

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  5. <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script> 
  6. <title>Test</title> 
  7. </head> 
  8. <body> 
  9. <a href="javascript:navigator.notification.alert('hello');">click me</a> 
  10. </body> 
  11. </html> 

把此文件放置在工程的assets/www/目录下,如果网页代码中包含了其它的目录,则一并放置在这一目录下。

(3)在工程中加入库phonegap.0.9.4.jar的引用

编译运行并点击页面中click me链接时,可以见到以下画面:

如何用PhoneGap打包基于Android的WebApp

注意:

(1)phonegap.0.9.4.jar中提供了很多的plugin, 上面的示例程序只调用了navigator.notification.alert, 如需要调用其它功能,则需要在android工程的Manifest.xml中加入这个功能permission声明:

  1. <uses-permission android:name="android.permission.CAMERA" /> 
  2. <uses-permission android:name="android.permission.VIBRATE" /> 
  3. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
  4. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
  5. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> 
  6. <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
  7. <uses-permission android:name="android.permission.INTERNET" /> 
  8. <uses-permission android:name="android.permission.RECEIVE_SMS" /> 
  9. <uses-permission android:name="android.permission.RECORD_AUDIO" /> 
  10. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> 
  11. <uses-permission android:name="android.permission.READ_CONTACTS" /> 
  12. <uses-permission android:name="android.permission.WRITE_CONTACTS" />     
  13. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />     
  14. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 

(2)在此可下载完整的工程文件,此例子基于phonegap自带的一个例子,但只保留了最少的部分。

小结:如何用PhoneGap打包基于Android的WebApp的内容介绍完了,希望通过PhoneGap内容的学习能对你有所帮助!

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-09-02 13:30:43

Android SDKPhoneGap

2011-07-05 15:26:23

2022-02-20 19:02:16

RollupVue 2JavaScrip

2011-12-31 14:24:13

2011-12-14 11:38:42

PhoneGapJavaAndroid

2011-08-31 13:11:53

AndroidPhoneGap

2011-07-19 08:50:17

PhoneGapwebOS

2011-07-22 08:34:37

PhoneGapSymbian

2011-07-15 15:54:38

PhoneGapiOS

2011-12-23 10:02:37

PhoneGapAndroid插件

2011-07-18 14:46:56

PhoneGapBlackBerry

2012-03-07 15:07:54

PhoneGapAndroid源码示例

2012-03-07 11:30:09

PhoneGapWindows Pho

2011-09-05 14:42:01

PhoneGap框架

2021-12-03 08:00:00

脚本数据容器

2022-09-03 15:03:36

AndroidGerrit代码审核

2011-08-31 13:27:52

AndroidPhoneGap

2011-09-13 09:49:59

PhoneGap插件

2012-03-09 16:25:09

PhoneGapDreamweaverWeb应用

2011-09-14 09:20:03

PhonegapAndroid平台
点赞
收藏

51CTO技术栈公众号