提额 APP

提额 APP

开始参与这个APP也是巧合,一个月之前,我还在忙于电信运营商的工作,上级就过来问我在之前公司有没有用过 html css js这些。在维库的时候,可是从前台到后台都是要全包的呀,因为项目人数真的是少的可怜啊,说多了都是泪啊,还是不说为好。我很果断地回复了之前用过。然后我就默默地被调走去做这个app的前端。我一听是前端,我当时有点懵,不知道该如何下手。很久没有这样开始做一个项目,而且是负责前端,而不是自己更熟悉的后端,接口之类的。

html css js虽然之前用过,但也只是简单的使用。由于之前的工作中,美工是会把所有的html和css写好再给我们去实现。没想到这次,我们的设计师只负责给我一个颜色宽度等一些参数,让我自己去搞整个页面的结构。一开始的时候,我感觉很郁闷,不知道该从什么地方开始下手。

可是人员就我一个去负责前端的工作,没办法,我只能硬着头皮上了,自己慢慢地去参考他们之前做的app,怎么去拆解图片上的原因,如何用div+css去布局页面的结构。

时间一点一点地过去, 我也慢慢地开始上手了,一些css 不懂的地方去查firefox的developer center 和 google查询如何解决问题。 当然最直接的就是找公司的那些纯前端的同事去解决问题。

phonegap作为APP的壳,嵌入到ios、android等,只能手机的原生项目中去编译生成软件项目。这样就可以简化app开发的工作量。一次开发多个app都可以运行。通过网页的自适应来解决多平台之间的问题,phonegap是ios下运行的效率比我自己想象中的要好,完全不用担心一些类似android会出现的问题。android在一些高配的手机上还是蛮流畅的,但是一到低配的手机,简直卡的一B啊。说多了都是泪,都不好意思说。在wp8上现在还没有用phonegap自己去实现,应该会比想象中的好一些。从之前的wp8项目看来,卡顿的问题故意是没办法解决的。phonegap估计也会回复你说他们已经尽力了。我们只能尽量去优化自己APP的性能,从而达到客户比较满意的状态。

提额APP是一个单页的APP,所有的页面都会通过js来加载到首页中。也就没有多余的url地址。整个项目就只有一个。项目中的地址无论你是怎么去切换。都不会改变页面的地址。只是页面一层一层地网上叠加。但是这样做就遇到了一些问题。就是css3中的transition的效果,不能对position:fixed的元素进行正常的切换效果。这两个之前存在一种无解的冲突,最后只能通过把元素换成position:absolute进行transition切换,然后再把那个元素clone到position:fixed的外层中。 这样研究营造出了一种固定定位的效果。这样就满足了原来所需的一些效果。

总结:

  1. APP项目 PhoneGap + html + css + js 服务端用 ASP .net ashx作为服务接口
  2. 增加了html css 盒模型的理解, 更加清楚 position在 网页上的一些使用
  3. 对APP的开发流程有了进一步的了解,熟悉。做web app的想法还可以继续坚持
  4. 作为前端的角色,去完成一个从无到有的项目,这种感觉还是不错的。

--EOF--

No.304

写于 2014-07-26

原文地址:https://www.cnblogs.com/hduwbf/p/6202004.html