phonegap+angularJs开发移动app

最近帮导师开发app,选技术方案时,毫不犹豫的选择了phonegap。首选很想试试传说中的phonegap,其次用web开发的方式来开发app,速度会快很多(嗯,我可不想时间浪费在这个上面)。

既然选了phonegap,app里所有的视图就是web页面了,这时又面临一个问题,是加载web端页面,还是把所有静态资源放在本地。前者的话,基本就是普通的web开发了,用这种方式的话,一个重要的问题就是页面的加载速度,也就是页面大小,以及离线存储和缓存的使用。后者,html,js,css都放在app本地,不需要考虑加载速度了,可以粗狂式的开发= =,看起来很美好,但实际开发过程中不少的坑啊,下面会说到。

js框架上,选择了angularJs,它的路由,数据双向绑定用着非常爽,而且便于模块化。

如何使用phonegap

 

1. 安装 SDK + PhoneGap
下载安装Eclipse Classic

下载安装 Android SDK

下载安装 ADT Plugin

下载 最新的PhoneGap版本然后解压其中,下面就是安卓目录的配置过程了.
 2. 配置新的项目

打开 Eclipse,在文件菜单下面点击 New > Android Project

在项目的根目录, 创建两个目录:

  • /libs
  • /assets/www

从刚才下载的PhoneGap中复制phonegap.js 到/assets/www目录

从刚才下载的PhoneGap中复制phonegap.jar 到/libs目录

从刚才下载的PhoneGap中复制xml文到夹到/res 目录

M对Eclipse的src文件夹中的主Java文件进行少量调整:(如下图)将class的继承类由 Activity改为DroidGap
setContentView() 这一行替换为super.loadUrl(“file:///android_asset/www/index.html”);

添加import com.phonegap.*;

移除 import android.app.Activity

 

 

然后配置AndroidManifest.xml

加上以下权限设置















 

 

 3. hello world

在 “/assets/www”目录中新建文件index.html ,并粘贴如下代码:

 




PhoneGap



Hello World

 

4. run as Android Application

 

设备调试

确保设备上开启了USB开发者模式,我的设备是三星S4,很奇葩的在设置里没有找到USB开发选项,问了Google之后,觉得太特么奇葩了。

进入关于手机,狂点“内部版本号”,点到开发者选项出来就行了。

是不是很奇葩= =,打破脑袋也想不到有木有!!

 

跨域问题

在res/xml/config.xml文件中,如下设置

  

这样配置之后在手机端就可以正常调用服务端接口了

当然,开发调试的时候肯定还是在PC浏览器上比较多,而PC上是存在跨域问题的,为了调试方便,开发阶段把服务端接口加上Access-Control-Allow-Origin响应头,上线去掉就可以了