豆瓣音乐人app的PhoneGap实践

　 　 大致说一下遇到的印象深刻的问题。其实PhoneGap现在的版本已经有很大改进，而且主流手机的性能已经比以前好太多，现在新开发PhoneGap的话，应该会轻松很多。

　 　 css3性能问题

　 　 我们开始的设计中，有一些半透明和投影等效果，但我发现用css3实现后，会导致性能不好，这跟原生开发时可能遇到的半透明性能问题是一样的。 Webkit并不如我们想象的那样有保障。后来，我们为此修改了设计，尽可能使用不透明的元素，去掉投影等效果，并减少dom复杂度，性能得到了明显提升。

　 　 像素密度问题

　 　 对于不同像素密度的屏幕，需要准备不同的图片，然后在css里面使用媒体选择器，根据 –webkit-device-pixel-ratio，分别插入密度为0.75（老android手机），1（非retina iPhone），1.5（一些android手机），2（retina）的不同css，以使用不同的背景图片。只需要修改一个css文件，MakeFile脚本会自动生成其他的几个css文件。当然，我还需要保证这四套图片是存在并且正确命名的。

　 　 Mp3播放问题

　 　 iOS的webview支持mp3播放是没有问题的，但当时会有一个限制，就是如果用户没有主动操作，webview就不能自动开始播放，为它做一个workaround也就能够解决了。比较麻烦的是android的某些较老的版本，虽然支持audio标签，但是不支持mp3格式的音频，事实上它不支持任何格式的音频。所以对于这种情况，只能使用PhoneGap自带的音频播放功能。对用户而言，效果是一样的，但这增加了webapp的依赖，使 webapp部分变得复杂了。

　 　不同系统的行为差异

　 　 虽然大体上来说，iOS和android使用的webview，其行为都是差不多的，而且由于都是webkit，样式会非常接近，几乎是自动完美跨平台。但是实际开发中发现，还是会有一些区别，例如：

• app ready时触发的事件不一样，当然这和PhoneGap封装有关；
• android有时候会有软键盘问题，有个插件可以解决；
• 处理打开外部url时行为不一致；
• 支持的动画方式有区别，对不同平台需要尽可能使用高效、硬加速的动画方式。
• 需要为android的几个实体按键写专门的处理函数。

　 　 仍然需要编写原生代码

　 　 有的需求在webapp内无法做到，这是经常遇到的事。例如：

• 推送消息；
• 状态栏提醒；
• 打开内置浏览器访问一些url；
• 绑定社交平台账号；
• 缓存下载的图片和音乐等文件。

　 　 很多都可以找到插件来解决，现在市面上的插件比当时开发音乐人app最初版本时，已经丰富得多了，但仍然可能无法满足需求，这时就需要自己写插件来完成，每出现一个这样的需求，就意味着要为每个系统做一次原生解决方案。我们正准备把音乐人app中使用的“推荐到社交平台”的插件进行开源，提供给其他有类似需求的开发者使用。