Phonegap踩过的坑

标签: phonegap | 发表时间:2014-04-24 12:58 | 作者:snoopyxdy
出处:http://snoopyxdy.blog.163.com
最近2个月一直在做一个Phonegap(现改名为cordova,其实我用的cordova来做的,但是叫惯了phonegap)的手机app项目,目前已经debug完毕,准备发布上线了,发现真印证了网上流传的一句话:
    

如果你恨一个人,让他去开发PhoneGap应用;如果你爱一个人,让他去开发PhoneGap应用。

具体是某健身连锁公司要做一个宣传公司品牌,方便用户查询课程,并且还有类似微博功能的兴趣圈等功能的app,大致罗列下这个app主要涉及的功能吧:
1、用户系统
包括用户注册,登录,签名,头像,相册,好友,动态等反正别人有的我们都有,老板就是照着微信的个人中心来规格化的,真给他跪。
2、微博系统
包括朋友圈及一些其他内容列表,可以评论,可以赞,可以发图片,总之微博有的我们几乎都要有
3、实时聊天
如果两个人是好友,则必须有可以实时聊天的,聊天可以发图片,可以发表情,可以发地理位置
4、其他
附近好友,新闻发布,通讯录,找好友等等其他一些琐碎的服务

其实这个app真心算麻雀虽小,五脏俱全的,老板想做一个大而全的东西,同时又想5月份能上线,同时又想android和ios一起上,so只有phonegap适合他了。先总体谈谈phonegap制作app的优点吧:
1、一套代码,开发安卓和苹果的app
这个优势是native无法比拟的,只需要在项目目录的www文件夹里放入一套开发代码,就可以在不同平台build出app应用,开发效率直接提高一倍,而且特别是后期的debug阶段,这种优势更加凸显出来,逻辑代码只有一份,如果ui符合标准,那只需要debug一次即可将安卓和苹果平台的bug都搞定。
2、开发调试方便
免去每次打包,开启虚拟机的等待时间,安卓还特别慢,直接在chrome浏览器里即可调试大部分功能,这也是native无法做到的,包括查看本地的sqlite数据库等。
3、开发门槛低
毕竟HTML5+CSS开发门槛要比native学习oc和java两套语言要低的多,所以速成也并非难事

感觉大方面的优点也就这么几个了,相信初次接触phonegap的朋友都会感受到,开发好简单,功能好强大,但是当你深入去开发一款比较复杂的线上app时,将不可避免的踩到很多坑,我在开发过程中,有些坑是通过google解决的,stackoverflow网站帮了我很多,有些坑至今无法解决,只能想其他办法绕过了,下面是一些我开发过程中遇到的坑和建议:

1、页面切换闪白
很多有web开发经验的人都会使用页面跳转来进入不通的功能页面,但是在利用phonegap的时候尽量少这么做,因为这会带来不可避免的屏幕闪白页的现象,所以尽量将整个应用做成单页,我现在的做法是,登陆前登录注册是一个单页,登录后是一个大单页。

2、iframe的坑
想要使用phonegap制作类似webview的功能,iframe就是再适合不过了,但是iframe在ios上会有一个坑,只会显示一个屏幕的高度,无法全部显示整个iframe,也没有滚动条。当然这个问题在stackoverflow上有很好的解决方法。

3、获取相册的坑
这个问题一般在高端机器上不会出现,但是当把图片质量设置很高,在一些低端的机器上选择图片后容易内存不足而闪退,所以尽量保证在选区图片时质量调整为30左右
部分ios机器选区的图片后方向不正确,这个只需要在获取照片时设置如下即可
     

correctOrientation:true,


4、定位的坑
首先ios上根本就没有这个问题,无论wifi或者3g都能够非常快速的定位到经纬度,但是android在wifi下面速度还算快,可是3g的时候就非常缓慢了,因为是直接去gps定位的,所以我们在写定位代码时得区分开来,ios一律使用“enableHighAccuracy: true”,安卓先使用“enableHighAccuracy: false”定位,如果超时失败,在使用“enableHighAccuracy: true”进行卫星定位,如果再失败,那就没办法了,提示用户吧。

5、下拉更新
很多app都有下拉更新,上拉加载更多这样的功能,但是在phonegap世界中,还是乖乖的在底部放一个加载更多的按钮,在顶部加一个刷新按钮比较好 ,在内容长过几个屏幕之后,这种上拉和下拉会成为ui的杀手,整个屏幕卡的不像样子。

6、alert的坑
我们很多提示信息需要使用alert来体现,但是请一定使用phonegap的通知插件来做,不要使用原生的alert,否则标题将是"index.html"这样的丑陋的文字。

7、页面切换效果
我主要使用了jqmobile的pagechange功能,其他的jqmobile功能几乎都没用到,如果你的应用页面像我那样比较多,建议还是老老实实的把切换效果关了吧,所谓的左右移入会出现底部滚动条,淡入淡出效果也不理想给人拖泥带水的感觉,还不如直接将效果设置为none来的干脆和快速

8、加速Dom元素选择
目前这个应用在note2或者S4上的响应速度已经非常好了,就算在我华为的屌丝机上也算可以,我使用了大量的变量来取代每次的$选择器,保证获取dom元素的高效和快速

9、websocket的坑
在我开发的过程中,这个坑算是最牛逼的了,我使用pomelo配合socket.io来制作聊天,其他手机一切正常,包括我的华为以及HTC,iphone4-5等,就发现note2和s4在进入聊天页面需要等待20秒左右,每次都是如此。真机打alert查询了半天,还是没有找到问题。于是上google搜索,发现还真有人和我遇到了一样的问题,原来是note2和s4不支持websocket,连接服务器等待timeout后,自动降级协议成为long-poll。但是我在note2上'alert(window.WebSocket)'时不是undefined,所以最后确定为,pomelo框架检查note2是否支持websocket时是true,但是真正要用到websocket的时候却发现无法使用,所以等timeout后才会自动降级,后来在一个websocket检测网站上测试,证实了我的说法。
但是虽然问题找到了,解决方案我却无能为力,于是只能android系统全部强制降级long-poll,ios优先使用websocket。

10、返回页面滚动条的位置
相信很多app都有这样的需求,用户浏览一个列表,发现感兴趣的,点击进入了,看完内容点返回,用户还是希望停留在之前的那条列表信息那里,而不是返回列表顶部。
但是如果利用jqmobile的pagechange来切换页面,每次都会将document的滚动条返回到顶部,然后进行切换的,所以在列表页进入详细页必须记住document滚动条的高度,以便返回时滚到指定位置。
但是坑爹的来了,在ios中返回并且修改document滚动条的top值会出现闪白屏的问题,最终的解决方法是每个page自己维护滚动条位置,这样返回的时候也只是修改自己的page里面div的滚动条top值,ios下的闪白问题也解决了

11、sqlite本地存储
sqlite我是作为本地存储,当网络出现状况时读取的,sqlite是不支持批量insert操作的,所以只能自己拼接sql语句然后执行。

12、IOS下的问题
用phonegap开发的app,会存在ios下面整个页面能够被上下拖动的情况,这个只需要在config.xml中加入如下一行配置解决,整体拖不动,但是页面还是可以上下拖动的
     

<preference name="DisallowOverscroll" value="true" />

ios下面还有input框或者页面双击变大的问题,也可以通过搜索google进行解决

总结下,phonegap不是银弹,一些比如新闻展示,和硬件交互不高,页面复杂度不是很大的行业展示类app很适合使用,开发成本和周期都要比native少很多,但是使用phonegap初期会觉得很爽,越到后面越觉得phonegap制约性太大,坑也比较多,所以长线项目尽量不要使用它。





相关 [phonegap] 推荐:

初识PhoneGap

- - IT技术博客大学习
标签:   PhoneGap.      一、PhoneGap是什么.     PhoneGap是一个标准的开源框架,用PhoneGap开发移动应用是免费的,无论是商业或是开源;一个用基于HTML,CSS和JavaScript的,创建跨平台移动应用的 快速开发平台. 它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.

Phonegap踩过的坑

- - snoopyxdy的博客
最近2个月一直在做一个Phonegap(现改名为cordova,其实我用的cordova来做的,但是叫惯了phonegap)的手机app项目,目前已经debug完毕,准备发布上线了,发现真印证了网上流传的一句话:. 如果你恨一个人,让他去开发PhoneGap应用;如果你爱一个人,让他去开发PhoneGap应用.

Android + Eclipse + PhoneGap 环境配置

- - CSDN博客推荐文章
用了3天的时间,终于把环境搭建完毕,郁闷了N天,终于完成了. 这里我只是讲述我安装的过程,仅供大家参考. 环境搭建首先要去下载一些安装包:. (下载前注意一下,电脑是32位还是64位的请注意选择安装包). java环境的JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html.

phonegap 框架详解 - Blue Sky ......

- - 博客园_首页
首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图. 说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求,  当Native  JS 队列里面有JS语句数据时,才是真正的1毫秒调用一下;  当没有数据, scoket server 会阻塞10毫秒, 也就是XHR 要等10秒钟才能收到结果,并进行下一次的轮询.

PhoneGap现已完全支持WP7

- - HTML5研究小组
PhoneGap现已完全支持Windows Phone 7所有的原生功能,其支持力度达到了iOS与Android的水平. 微软在去年7月帮助Nitobi将PhoneGap移植到了Windows Phone Mango上,并在9月 发布了 该框架的一个可用版本. 很多原生特性都得到了支持,包括Accelerometer、Camera、Contacts、Geolocation、 Notification与MediaCapture,但团队希望能找到一些Bug.

关于Phonegap的一些看法

- - SweetRiver
呃, phonegap今年发展不错啊,至少“跨平台”一个词就是多少人无法拒绝的一个诱惑,而且使用HTML+CSS+JS开发,可灰常有吸引力. 网易轻博LOFTER的移动客户端就是用phonegap开发的,但是目前只有iOS版本,Android版本似乎还在开发中. 试用了下iOS下phonegap做出来的LOFER,应该说UI效果非常接近原生APP,但不如原生APP流畅,可以感觉到网易LOFTER团队付出了很多的努力.

Phonegap + HTML5 开发经验小结

- - Miller
        去年曾对 Phonegap做过一次调研,当时还是1.1版本,印象也一般. 对他的性能以及真实的跨平台能力都不太确定. 今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目,项目至今已经完成了一期的App Store提交,所以也正好能抽时间来小结一下. 一个月左右的开发过程让我对这种开发模式有了更深的认识,这对于前端开发人员而言绝对是一个大的机会.

HTML5漫谈(4)–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com). http://phonegap.com)按官方说法,是HTML5移动应用平台,它包括两部分:. 1)       应用开发框架:采用Web/HTML5技术编写应用,支持设备能力(如GPS、重力感应等)调用;支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

phonegap利用百度地图sdk定位

- - snoopyxdy的博客
近期的一个phonegap项目把我做的焦头烂额,最让人蛋疼的就是安卓4.1.x对html5的定位获取经纬度有个无比巨大的坑,一般我们利用如下代码进行html5的定位. 另外一个巨坑也直接影响了我对这个问题的判断,如果我重启了安卓4.1的机器,那么上述代码将能够正常跑大约几小时,甚至半天,可是到了第二天又会出现同样的问题,无尽的timeout.

基于phonegap开发app的实践

- - CSDN博客Web前端推荐文章
app开发告一段落,期间遇到不少问题,写篇文章记录一下. 为虾米要用phonegap. 开发app,至少要考虑android和ios两个版本吧,android偶可以应付,ios表示完全木有接触过,于是时间成本、开发成本上去了. phonegap则解决了这个问题,而且对po主而言,用web开发的方式来搞app很爽啊有木有.