PhoneGap移动应用开发介绍

以下内容为转载，个人还是推荐Native App的开发。PhoneGap,Html5是未来。
前言：

HTML5热起来的浪潮应该是2010年初，而且从提出来到现在已经有很长的时间了。这个是大方向每个人都应该了解了。那么在这里我也不多说了，如果你现在还不知道是什么东西，那么赶紧google，报道已经漫天飞了。



那么为什么这么火呢？原因有很多，最大的原因莫过于HTML5是带着杀手的头衔来的。主要是媒体给了他这样的头衔。例如说HTML5会杀死FLASH，的确在移动端上，战胜了。又比如说HTML5会杀死app store或者android。那么为什么这么说呢？主要原因就是HTML5提供了一定的标准，让网页开发人员可以遵循标准，在不同的平台上展现出相同的app，而且性能也差不多（当然，目前情况是差很多，这个是后话了）。那么就是说，未来我们看到的趋势就是随着离线应用壮大，云计算更稳定，标准更好，HTML5的应用是大有作为的。而且我也有理由相信2012年，会有激烈的浏览器大战，访问本地资源的能力会更强。好了，说了这么多，web app时代真的已经到来了吗？我并不完全赞同。所以也就是为什么我会在今天在这里分享我用phonegap的原因，以及向大家推荐他的原因。






关于Phonegap






因为目前我们很多的移动互联网用户都在窄带范围内，使用2g的网络，这样的话就导致了传输速度慢的问题。目前来说用户更加倾向于把应用存放在本地，更便更快地进入应用，以及传输较少的数据就可以获得较好的体验。介乎于原生应用，以及web app之间，Phonegap实质上就是做了一个混合开发。你就在Phonegap上面写web view，写逻辑，然后Phonegap就帮你调用底层的东西，同时造好一个房子给你住进去。然后编译好了软件后，输出来。






首先，什么是Phonegap，相信很多做移动开发的朋友已经听过这个东西了。而且去年的，同样是在广州，在这个技术分享沙龙，有一位朋友也专门为这个软件做了一次技术分享，向大家做了展示。可能现场还有人不了解，那么我大概介绍一下，其实Phonegap就是一个浏览器的外壳，去掉了一些基本的浏览器特性，并且做了部分的中间件功能，让前端开发者能够从前端代码中，也就是js中去调用系统底层的资源。所以说Phonegap是一个浏览器，也是一个中间件，也是一个js框架。开发的时候我们依然好像做原生应用一样，要去准备好IDE，准备好软件开发的sdk。不过不同的在于，我们准备多一个Phonegap。






利用Phonegap做快速开发






说了这么多，为什么我们要用Phonegap来做开发呢？大家都说原生的体验不是更好吗？好下面就解释一下为什么要使用它：






1,成本低。


    1）成本低在于培养开发phonegap的人才要比ios开发的人才要便宜，ios开发人才本身就少，而且漫天开价，但是phonegap开发我们只是需要一个技术稍微成熟一点的前端开发工程师；


    2）跨平台成本低，因为我们在做开发的时候往往要照顾多个平台，从在线到离线，从ios到android到windows phone等，要是一下子都开发的话就成本很高了，不说金钱上的成本，就从时间上也划不来啊。


    3）调试简单，用chrome就可以了。因为都是html+css+js；对于部分的涉及到底层的东西再用真机调试。例如摄像头，通知，重力感应等。






2,开发速度快；


    1）一次开发，你可以编译出多个版本，尤其是现在已经有了phonegap.build 功能，这个功能的好处就是你可以不用再次下载sdk以及ide工具了。只需要写好你的前端代码，然后push到github，云计算平台会从github抓取资源，然后编译出你的应用。分发给用户下载，超级简单；不过这里存在一个问题，就是无法真机调试效果。对于简单的应用，我们可以这么做。例如单纯的信息展示类应用。


    2）写web view的速度会比你构建ios组件更简单。因为在布局方面会更加出色，修改方便。据我所知，豌豆荚的windows客户端也是采取了这种机制去做他们客户端的界面的。当然，那是桌面平台的事情了。






3,支持api多；


    1）目前基本上在ios上面大部分的api都能够支持到了。具体的话，大家可以到官方的文档上面看，我就不和大家一一介绍了。






4,跨平台特性；


5,云计算服务；（目前国内也有不少公司在做云计算的服务，还有手机中间件的开发。其中有rexsee(针对android平台，appcan针对ios，android，塞班跨平台）


6,对比体验。


    1）目前的html5 web app很多情况下都可以和原生应用比拼了。只要你的代码性能足够好，你的css写得足够好，那么呈现出来得效果就会很棒了。而且目前支持得最好的就是ios平台了。其次就是android了，这里值得说一下的就是android平台。因为其系统的开放性以及众多手机厂商对其进行了不同的修改，以及各个手机的规格也大同小异，导致了性能上出现的一些差别。这些我待会会在经验分享部分介绍出来。






基于上面我的介绍，其实你马上就可以做一个phonegap的应用出来了。而且phonegap应用的开发周期不是用月来算的，也不是用周来算的，而是用天来算的。尤其是如果你有一个前端开发团队的话，可以在一个星期内完成一款很不错的商业应用出来。如果个人的话，也可以在两个星期到一个月内作出跨平台的产品。






在利用Phonegap开发应用过程中的一些经验






一、html and css Experience（关注体验与设计 and html5）






    利用全新的思想去开发移动应用的web view，不要花费时间在浏览器的兼容上（因为只要支持webkit的浏览器）。同时要注意开发模式，mvcr模式（详细分解）尽量使用全新的html5标签去写应用，这样的话框架也会适配得了。






   1，例如我在使用iscroll的框架时，处理一些含有float:left的标签的滚动事件，出现了一些小bug。其实我们处理div，并排排版时，可以使用css3 flexible的特性，让他们以盒子组合来排列。


   2，注重Html的语义，因为这样的话更适合排版。例如使用header footer的标签，相信作过html5开发的朋友也会知道这些了。






二、js Experiences（关注性能）






    注意mvcr模式，因为web app应用开发比原生应用开发最重要得特征就是：1,维护方便；2,能够更快地适应设计；


    


    关注js程序得性能问题，注意逻辑，事件控制，以及设计效果的代码分离；






    循环的减少，尽量使用异步编程的办法。






    因为涉及到大量的dom操作，渲染，这里就对js代码要求较多，当然是执行效率越高越好。要做好功能和交互上的取舍。而且目前我仍然非常建议phonegap的开发者尽可能使用ui框架去帮助实现交互的功能。当然自己实现也可以，但是要考虑到开发时间还有考虑问题的全面性。






三、Framework choose






    现在主流的框架有sencha touch, jqmobi , jqeury mobile , 我个人认为的插件类框架：iscroll, zepto，chocolate , v5, jscex（关注异步编程）






    根据项目的需求而选择框架






    如果是先出需求，设计要求较低的，可以利用sencha touch query mobile 进行开发，原因是这些框架是ui框架，集成了很多ui元素还有事件控制的方法。值得一提的是sencha touch的兼容性很不错，而且ui表现很能够让人编辑。






    如果是设计性要求较强的，那么就尽量使用后面的插件类型的。






四、整体架构（日后升级）






    注重代码分离。






    mvc模式（代码维护）






    利用百度工程师提出的mvcr模式，进行讲解。






   M(Model)：模型。完成数据验证、数据处理，执行客户端业务逻辑计算，或向服务器发起ajax请求调用服务端逻辑、接受返回的数据，将处理后的数据返回控制器。


   C(Controller)：控制器。控制器响应View上的事件，根据事件调度执行模型的业务逻辑，从业务逻辑获取返回数据，调度相应的渲染器(Render)来完成界面展现。在这个过程中控制器会有数据的传递：控制器调用模型中的逻辑时会传送Renderer搜集的数据(form表单各域的name/value、其他控制参数)，模型执行逻辑后返回作为执行结果的数据给控制器，控制器根据数据来调用渲染器(renderer)来完成界面呈现(rendering)，呈现(rendering)就是修改页面结构、内容和样式的过程。数据传递过程可以用图4表示。


   R(Renderer)：渲染器(呈现器)。渲染器被控制器调用，接受从控制器传递的数据，完成对界面的具体渲染。渲染器也负责控件(widget)的初始化，及建立Controller与具体事件的对应关系，事件发生时负责搜集View上的数据传送到Controller。


   V(View)：视图。视图是用户最终看到的整个Web界面，由结构、内容、样式（表现）等静态内容共同构成。View由Renderer进行初始化渲染和修改。






五、富客户端 ajax请求以及用户体验（后端结合）






    这个地方就是后端工程师和前端工程师的配合，oauth认证或者是js跨域请求的问题。api性能的提升。






六、封装过程中的经验






    xcode的惨痛经历






    可以使用phonegap build进行云端编译，减少自己封装的时间。不过这里值得一提的是，android的sdk编译出来则会出现一些问题，尤其是性能上面的表现。






orm架构（后台）






    后端配合






设计的复杂性