phonegap(3+)踩过的坑

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制约性太大,坑也比较多,所以长线项目尽量不要使用它。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值