解密铁路12306手机客户端的开发技术

jopen 10年前

    "铁路12306"首日用户近20万,360手机助手下载量超17万,这一下载量说明了国人对于购买火车票的迫切希望吧,希望通过各种方式购得千金一票。 但是,调查分析,有近两成的用户对此手机app不满意,下面就为你解密铁路12306手机客户端的开发技术,从中分析一下为什么人们期待已久的12306 app不让人满意。

    铁路12306并没有采用传统的原生开发的方法, 而是采用的ibm的基于html、js、css的混合app开发技术。下面补充一下原生app、web app、混合app:

    什么叫做原生App?

    原生App是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过网络商店或者卖场来获取例如    The App Store  与  Android Apps on Google Play .
 
随便说几个原生App的例子,比如iOS 的 Camera+  以及Android 的  KeePassDroid
 
    什么叫做移动Web App?
    一般说来,移动Web App都是都是需要用到网络的,它们利用设备上的浏览器(比如iPhone的Safari)来运行,而且它们不需要在设备上下载后安装。


    什么是混合app?
    Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App,但只有一个UI WebView,里面访问的是一个Web App,比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5的网页,后来才推出真正的原生应用。再彻底一点的,如掌上百度和淘宝客户端 Android版,走的也是Hybrid App的路线,不过掌上百度里面封装的不是WebView,而是自己的浏览内核,所以体验上更像客户端,更高效。
        
   综合一下就是:“Hybrid App同时使用网页语言与程序语言开发,通过应用商店区分移动操作系统分发,用户需要安装使用的移动应用”。总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码,所以开发成本和难度比Native App要小很多。因此说,Hybrid App兼具了Native App的所有优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。

下面看一下混合app的目录结构:

解密铁路12306手机客户端的开发技术

MobileTicket.html这个页面就是主页啦,用浏览器打开看一下:

解密铁路12306手机客户端的开发技术

看一下浏览器效果是不是跟你手机上的一样啊!

ss.html页面应该是测试的页面,效果如下:

解密铁路12306手机客户端的开发技术

这是css文件夹下的样式文件:

解密铁路12306手机客户端的开发技术

这是图片资源文件:

解密铁路12306手机客户端的开发技术

这是js文件:

解密铁路12306手机客户端的开发技术

这是html的文件:

解密铁路12306手机客户端的开发技术

    铁路12306客户端使用混合app开发的方法,这使得一套代码可以跨ios、android平台使用,但给用户的体验就是:页面切换有点卡,点击半天没有响应,所以造成了两成用户不满意,个人觉得这个比例是保守的。

来自:http://my.oschina.net/u/656993/blog/183194