利用phonegap和原生Android，制作七夕表白神器（附Android源码）

        最近闲来无事，偶然从最代码（http://www.zuidaima.com/）找到一个应景（七夕）的html5页面特效，看了一看，觉得尽管在PC上效果挺好的，但是如果把这个东西放到手机上，单身程序员找到女朋友的概率大增，有对象的程序员能够让对象更爱你，绝对的表白神器有木有？想到就要做到，我开始了我的“工作”。

        将html5移植到手机，最成熟最快捷的做法就是用phonegap了，本人屌丝一个，只用得起Android手机，就从phonegap官网下载了一个zip版本包，开始了移植。在这之前，需要做的准备有：一台装有Windows 7及以上系统的电脑（运行内存4G及以上、CPU别太烂就行）、jre 6.0以上的版本、Android tools最新版或者ADT（32位的就足够了）、一台能进入开发者模式和进行USB调试的手机（比如小米2S）和数据线。准备工作做好以后，开始工作。

        第一步，配置phonegap，这个步骤比较恶心，环境配置这种东西太复杂，很可能一两天还配不到最好，我提供两种捷径：第一个是利用Adobe的Dreamweaver，最新版本都是支持phonegap的，可以直接创建phonegap程序，无需配置环境；第二种更方便，由于phonegap实质上是对各种html脚本封装后和手机硬件相关联的扩展脚本而已，无需繁琐配置，当你准备工作做好，将phonegap版本包中的Android样例工程解压出来，用ADT导入就行了。工程建立好，只需要将www目录下的东西替换过去就行了，移植成功，收工。

        但是如果事情就是这么简单，也就不值得我再发一篇博客了，html5移植到手机，我之前有写过一篇用phonegap将捕鱼达人网页版移植到手机上的博客，但是当时我并没有注意到屏幕显示布局和无声音的问题，今天我主要讲的就是如何解决这两个问题（本文不讲代码）。首先是屏幕显示和布局，原来的html5页面是针对PC端的，对应到手机端，首先应该是横屏显示；其次是页面的宽高比是1440:900，手机一般很难达到这个比例，经过测试发现修改比例不管用，尝试了很多方法都不行，无法显示全部画面，或者就是只显示上半部分不显示下半部分，最后我将目标放在了原页面的全局layout上，这个东西相当于是页面将要使用的绘画区域大小，原来的宽和高都是100%，我将高调整到125%，刚刚好，这个问题基本解决（宽度不要改，改了无法居中）。其实要是要求严格也可以重新定义绘画区域所有对象的大小，按照比例缩放，但是对应的工作量增加了太多，等你做出来了，这个七夕也早已过去。

        另外一个让人头痛的问题是没有声音，记得当时做捕鱼达人的时候就有网友留言问没声音的问题怎么解决，看来这里埋着坑。各种搜索，各种查找百科、博客和phonegap文档，得到的说法无非就是phonegap移植html5页面到手机的实质就是在原生系统开了一个webview，至于这个webview的效果如何，能不能支持用脚本语言播放音频，就得看人品了。phonegap官方对播放音频的解决办法是使用其封装的cordova或者media对象，但是经过本人尝试，不好使（可能是我没有开启流媒体、文件读写和网络权限，但更可能就是phonegap并未对所有Android手机的音频播实现适配，比如我的小米5s）；另一种官方的办法是使用cordova（还是cordova，根本避不开）的navigator.notification，只需要调用beep（）就行了。遗憾的是，这个音频播放虽然可以使用，但是播放的却是Android手机系统自带的默认通知铃声（我要播放的是人家给的多个mp3文件啊喂！！！）。最难受的是，要播放多个声音，你除了要引用好cordova，还得从新修改js里面关于播放的逻辑（崩溃！改一处，改全部，改完都过年了，不如直接开发原生app！）。

        正当我发愁多个背景音乐播放的问题的时候，我想起一句经典：如果一个问题折腾了你半天还无法解决，那么你应该换一个思路！换思路，不就是两个背景音乐嘛，完全可以用系统原生的API啊！那么，播放一个背景音乐，只需要简单的两句话就行了：

MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.music);
        mediaPlayer.start();

        可是，当我想要播放第二个音频时，使用循环（等待音乐播放完，续上第二段音乐），却发现由于没有把音乐播放做成单独的线程或者service，html5页面在等待打开的过程中睡死了（难道这么一个小程序还要用service和多线程？！！），等等，两段音乐连续播放？把两个音乐合成一个不就行了吗？果断下载使用格式工厂合成音频，还是用上面的代码，问题基本解决。

        总结一下，这个小程序根本就不难实现，可是却需要开发者有多方面的能力：1、对Android系统和API的熟悉；2、对Android开发工具和开发平台的熟悉；3、对phonegap的本质的熟悉；4、对脚本语言有一定的了解，看得懂脚本；5、搜索的能力；6、快速理解官方文档和API（大多都是英文）的能力；7、灵活和清晰的思维；8、熟悉常用的工具软件……简直不要太多。这大概是大家会觉得做出来的东西高大上的原因吧，但是每一项能力，都是不需要花多少工夫就能掌握的（前两项例外）。我最终采用的方法，可能也仅仅只适用于当前的这一款小软件而已，软件开发，使用的方法方式，永远是无穷无尽的。穷则变，变则通，通则达。

        希望这个例子能对大家有所帮助，也提前祝愿天下有情人终成眷属（七夕在星期一真好，如果在周末，单身狗的我岂不是要被狗粮撑死？哈哈哈）。

        文章内容仅为个人观点，如有转载，请注明出处。下载源码请移步（七天内有效，过时想必也没用了吧哈哈，可以留言邮箱，我有时间就给发）--->https://pan.baidu.com/s/1cNbYGI