移动web中间件phonegap一（用web来开发移动应用）

一、什么是phonegap

二、phonegap的在android环境下的工程搭建

三、简单案例

 

一、什么是phonegap

 PhoneGap是一款能够让你用普通的web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台。

• 轻量级架构，功能卓越的手机应用快速开发平台
• 精确兼容系统 Andriod iPhone&iPad Symbain WM
• 无成本开发，20%的开发周期，20%的升级维护成本
• 完全不需要手机编程基础，只要会HTML就能做应用

以上是一些官方文档上的介绍，我再来说下我使用下来以后的一些感想与评价：

1、phonegap所说的一次开发多平台使用也并非完全的兼容：

首先，html5中的media标签在phonegap中就无效，不过作为移动应用，音频视频这些大数据量的文件访问，phonegap为我们提供了插件调用播放器

其次，phonegap那些本地化API并非支持所有的平台，相对来说android和IOS两个平台支持的较完善

2、对于android环境不太熟悉的我来说，phonegap的确为我在android甚至IOS平台下快速开发提供了可能。

3、理论上来说，基于phonegap的应用相较于原生应用来说，只能无限趋近，不太可能会反超原生应用的功能性能。

 

二、phonegap的在android环境下的工程搭建

我只讲解在android环境下的工程搭建，首先需要的是一套android开发环境，这里不做介绍，我们直接开始工程的搭建：

1、下载phonegap资源文件  传送门

2、新建一个android工程

3、将插件中lib\android\cordova-2.2.0.jar（现在已更新到2.7.0）拷入工程的libs目录下

4、将插件中lib\android\xml整个文件夹拷入到工程的res目录下

5、为项目工程添加各本地API调用权限，在AndroidMAINfest.xml中添加如下代码

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

6、修改Activity，主activity类继承DroidGap，重写onCreate()方法：

public class GoGame extends DroidGap
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/canvasgo.html");
        //加载android_asset/www/canvasgo.html为初始化页面
    }
}

三、简单案例

我这边就直接采用以前编写的一个围棋web小应用来做案例。

我们来看一下这整个工程的目录结构：

我们可以发现围棋web应用的代码都放在assets\www目录结构下，我以canvasgo.html作为入口，在应用启动时就开启canvasgo.html。

这个围棋应用暂时还未采用移动终端的API功能，待我们下一篇来介绍phonegap所提供的各种本地API接口吧！

好了，我们来找个android手机或平板来看看效果吧！

附代码如下，欢迎共同探讨学习！