分类：PhoneGap

Phonegap 2.6在Android上的Icon设置

Phonegap 2.6设置应用的桌面icon，在AndroidManifest > Application > Application Nodes > Activity。

这个问题Google了半天也没找到答案，难道只有我碰到了？

我的测试平台：Windows 8 + Eclipse 4.2 + ADT 21.1 + 小米 2 + Phonegap 2.6。

开发测试一切正常，只是编译输出的应用装到手机上只能用默认图标，怎么都改不过来。我把所有res/drawable-xxxx里面的icon都换了也不行。然后修改AndroidManifest > Application > Application Attributes里的icon和logo设置，也不行。怎么试都不行，Google也找不到。安装时提示的图标正常，查看运行过/运行中的图标也正常，就那个桌面上的图标不对。

刚才吃过饭，来回点，突然发现在Application Nodes里有个Activity，还可以设置icon和logo，想着反正也不亏，就也给填上了，居然OK了。

哎，记一下，省得以后忘掉。

Phonegap 2.5的localStorage有Bug

phonegap 2.5后引入一个bug，无法在android 4.1上持久存储localStorage。

这两天重拾Phonegap发现一个Bug，用localStorage保存的东西，更新版本或者关掉重进就没了。我的环境是Phonegap 2.6 + Miui V5（Android 4.1）。

我逐个尝试了使用window.localStorage替代localStorage、将调用localStorage的时机改到deviceready后等做法，均无效。Google、StackOverflow，亦没有结果。最后想起来，Phonegap不是开源的嘛，有issue list啊，一看，果然，从2.5开始Android版的localStorage就无法正常持久存储了。这个Bug要到2.7才会修复。

以前还是太低端了，以后还是多逛逛Wiki和issue才是。

解决 iOS webkit 使用CSS动画时闪烁的问题

解决webkit下的闪烁问题

这个，咱们必须承认版本管理不是万能的，尤其对于像我这样习惯不好的人来说，更是如此。比如，上次不知道改了什么东西，导致肉大师制作的杂志在 iOS 里突然就变卡了，而且不仅卡，还伴随黑块、切换图片的最后会闪一下。

开始我一直以为是性能问题，调啊调啊调啊，就是不见好。于是 Google “ios phonegap 闪烁”，然后发现一篇文章，内容是解决 iOS 下 Safari 渲染 Transition 时页面闪动的问题。说只要加一句 -webkit-backface-visibility: hidden; 就行，这样可以避免元素转换时显示元素背面。虽然听起来莫名其妙，不过我觉得有戏，但是文章里没有提应该加在哪儿，所以我想了想，在样式表里加了一句：

#container {
  -webkit-backface-visibility: hidden;
}

因为我用到 iScroll，而负责动画的CSS是加在 #container 上，所以我就理所当然的把这段代码加在这里。测试，没有效果。

于是我一发狠，把这段样式加在所有元素上，居然问题就解决了。

#viewport * {
  -webkit-backface-visibility: hidden;
}

Mobile Web开发笔记

这里记录使用Phonegap开发移动应用期间发现的一些注意事项。

这里记录使用Phonegap开发移动应用期间的发现。

性能

使用jQuery托管事件对阻止冒泡的影响

表现

解决 iOS webkit 使用CSS动画时闪烁的问题

CSS 兼容性

CSS 属性 iOS Android IE 其它
border-radius 3.x -webkit- Firefox 3.6- -moz-
Safari 4- -webkit-
box-shadow 2.3 -webkit- Safari 5- -webkit-

网摘

Developing Better PhoneGap Apps: Float Mobile Learning

重点包括

  1. 使用tap取代click（这点我还需要进一步测试，我发现zepto+phonegap没法捕获tap事件，不知道是我不是敲键盘的姿势不对）
  2. 使用css动画取代js动画

随记

  1. “click”和“tap“不是一回事儿，“click”会延迟300~400ms才处理，时间上会接近taphold之类的事件，“tap”更快
  2. 给元素加上:active伪类，可以给用户更快的反馈
  3. 调试不太容易，debug.phonegap.com似乎已经关了，得想办法把自己的weinre服务搭起来。暂时可以在js里写console.log()，接受一个参数，会在log cat输出。

CMDN Club 16期归来

下午去参加了“CMDN Club 16期——跨平台开发框架PhoneGap入门与实践”，有一些收获，整理记录下来。

  1. 会上着重讲了Android和iOS下使用plugin扩展PhoneGap功能的方法。
    1. Android上使用prompt实现。js通过prompt发送请求，WebView侦听到prompt后，解析并进行处理。处理完之后，将返回的数据放在内建的XHR服务器上；而应用在发出请求后，就在不断轮询，得到数据后返回给预先设定的callback。
    2. 比较特殊的地方在于，Android支持同步和异步两种形式，一般推荐使用异步，这样进程就不会被锁死，用户体验得以保障。
    3. iOS版则是建立一个iframe，把请求格式化后放进iframe的src。WebView接触到特殊标记的url就会进行处理，得到返回值之后，将js交给WebView处理。因为使用了iframe，所以操作都是异步无阻塞的。
  2. PhoneGap默认提供了很多本地api的封装，不过想要达到native的标准，自己补充插件是必不可少的。
  3. PhoneGap已经捐赠给Apache基金会，以后叫Cordova，代码组织会更加规范，而且会向AMD方向发展。看来研究下Require.js也很有必要。
  4. Weinre是个调试利器，非常适合调试移动设备，不仅是PhoneGap，日常开发也会很有用。
  5. Adobe Shadow是在Weine基础上封装的一个工具，目标是同时调试多台设备，不过目前还处在实验室阶段，将来会是非常好用的产品。持续关注吧。
  6. jQuery Mobile性能不是一般差，看来很有必要研究下Sencha Touch。
  7. www.phonegap.cn是个非官方组织，今天第二位嘉宾就是它的站长，看起来很靠谱的一个人。
  8. 对于我之前提到的防盗链问题，他也没有好建议，只提出一些想法：
    1. 使用插件抓取图片，转换为base64字符串，再显示出来。没记错的话这样会有兼容性问题，而且html也会很难看。
    2. 修改PhoneGap代理所有http请求。这个难度比较大。
  9. 现在没有命令行工具，他们正在开发。希望肉大师第一版完工的时候能用上。
  10. 会上有不少非人类思维的提问者，我感觉嘉宾都很迷茫。

目前使用PhoneGap遇到的问题

使用PhoneGap至今，遇到了不少问题；将来想做的功能也有一些不太知道该怎么做的，都记在这里，作为将来要攻克的难关，也作为将来要分享的文章目录。

使用PhoneGap至今，遇到了不少问题；将来想做的功能也有一些不太知道该怎么做的，都记在这里，作为将来要攻克的难关，也作为将来要分享的文章目录。

  1. PhoneGap没有提供修改Refer的API，可能需要开发插件来实现，不知道Titanium有没有类似的功能
  2. PhoneGap没有提供后台运行service的API，这给推送信息带来了一些问题，不过似乎StackOverFlow上有人提供了解决方案，准备试试
  3. 自动升级。这个利用现有api应该可以完成。
  4. 缓存内容到本地。

总结下蜂鸟镜头库App开发

前些日子利用业余时间研究PhoneGap+jQuery Mobile开发，找这个项目练手。写到一半又拿Backbone重构了下。如今还有很多问题，先停下来总结一下。

前些日子利用业余时间研究PhoneGap+jQuery Mobile开发，找这个项目练手。写到一半又拿Backbone重构了下。如今还有很多问题，先停下来总结一下。

  1. 效率问题。屏幕越大效率越差，在Kindle Fire的表现也不如想象中理想。
  2. 启动速度慢。不像跑在浏览器那样，瞬间就打开了（因为会忽视掉打开浏览器和渲染的时间），所以应该需要一张图片作为启动图片——这个图片似乎不能自动缩放——在Kindle Fire里会导致程序崩溃。
  3. jQuery Mobile还有一些bug，目前还不确定原因和解决方案。
    1. 我有两个ul要做成listview，第一个什么都不写，填充内容后.listview()一下就可以；第二个则必须在html里就写好data-role=”listview”才行。
    2. 切换页面的时候只能从右往左，reverse=true也不行
  4. jQuery Mobile没有弹出组件，dialog的实现是跳转页面，不是很爽。
  5. Backbone是个好东西，尤其是开发过Flash，用起来感觉更顺手了。
  6. Backbone 0.9.1复写Collection的parse方法无效，不知道是为什么。
    问题已解决：《重写Backbone.js的加载动作》
  7. 当需要事件从一处发生，而在另一处响应的时候，Backbone并没有提供很好的办法，用惯了robotlegs之类的框架在这里略有不爽。我想拿Model来作为Mediator应该不错。

再练手的话，准备用去哪儿的api，感觉挺开放的。

使用PhoneGap+jQuery Moblie开发蜂鸟镜头库手机App

拿以前做蜂鸟镜头库的两个接口尝试开发蜂鸟镜头库app，基本完工。这里总结下踩过的坑。

蜂鸟镜头库app效果图
蜂鸟镜头库app

自从春节期间在家尝试了PhoneGap之后，一直想做点实际的东西，好总结点经验，以备不时之需。可惜后台苦手，数据源是个问题。后来想起来以前做蜂鸟镜头库的时候有两个接口，可以取得完整的数据，于是便动起手来，开始做这个app。

开发本身并不复杂，大概花了一天时间搞出雏形，加上翻页基本就能发布了。不过还是遇到不少问题，今天简单总结下踩过的坑，以免以后再踩。
继续阅读“使用PhoneGap+jQuery Moblie开发蜂鸟镜头库手机App”

PhoneGap开发环境配置

趁着春节假期，学点新东西，前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的，就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了，JS方面考虑了一些时间，决定使用PhoneGap——因为有Adobe支持，应该比较有优势。

趁着春节假期，学点新东西，前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的，就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了，JS方面考虑了一些时间，决定使用PhoneGap——因为有Adobe支持，应该比较有优势。

继续阅读“PhoneGap开发环境配置”