本系列博客将介绍采用PhoneGap、Backbone、Seajs、Ratchet和SPM等js库或工具搭建一个Web主体型的Hybrid模式的移动应用开发框架。
Phonegap是一款开源的开发框架,旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动应用程序。PhoneGap原本由Nitobi公司开发,后来Adobe收购了这件公司,Adobe将PhoneGap的核心代码捐献给了Apache,于是有了Apache Cordova。其实这两者的核心代码是没区别的,PhoneGap是原来的名字,Adobe拥有PhoneGap的商标,所以捐出去的代码就改了名字为Apache Cordova,目前为止基本上可以认为这二者是同一个东西,除了包名不同,事实上从PhoneGap下载到的phonegap-2.9.1.zip解压后发现里面的名字也是cordova。
上图分别是PhoneGap和Cordova官网上介绍二者的图片,图片对比也可以看出Cordova类似于PhoneGap的大脑(核心部件)。PhoneGap为企业开发者提供了云端打包服务和其它功能。
下面在Android平台下采用PhoneGap实现一个简单的Demo。开发环境Windows7+Eclipse 4.2.2 + Android SDK 17
在http://phonegap.com/ 下载一个最新的PhoneGap软件包,解压后在lib文件夹下得到如下文件夹,可以看到PhoneGap目前支持的平台有android、ios、windows-phone等,现在我们只做Android平台的演示,从android文件夹中找到src文件夹和assets文件夹。
新建一个Android工程HybridDemo,将这两个文件夹下的文件分别拷贝到新建工程对应的目录下,如下图所示(新版的PhoneGap依赖了okhttp这个库):
修改MainActivity.java文件:
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") @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.init(); super.appView.getSettings().setJavaScriptEnabled(true); super.loadUrl("file:///android_asset/www/index.html",2000); } }
修改AndroidManifest.xml文件,为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" />
还有一个config.xml配置文件,文件路径为res/xml/config.xml,我们只做演示,没有涉及到插件的开发,不需要修改这个配置文件,从phonegap文件夹下拷贝过来就是了,这个配置文件被PhoneGap框架java实现部分所引用,没有它会报错。
运行程序结果: