触屏手机web界面的技术调研.docxVIP

前言随着技术的进步，如今智能手机已经全面走进了大屏幕、触摸屏的时代，传统的web页面的展示方式已经难以适应，而web设计的理念与技法也在不断发展，带给我们的挑战也越来越大，怎样以最合理的方式使设计方案能够最大程度地适应何种设备的性能与规格属性，提升应用的用户体验，这是我们在工作当中必须考虑的问题。鉴于触屏智能机爆发式发展的，各站点争相推出适于触屏手机访问的版本，我们称之为触屏版，也产生了许多适于手机的web层框架，此类框架能够简化应用的开发，降低开发难度，减少开发维护成本。因此，使用此类框架几乎是大多数应用开发者的不二选择。本文分析了当下主流的移动web应用的前台主流框架及各大站点的技术使用情况，旨在指导信雅达手机银行产品touch版的开发。触屏版特点Touch版特点所有主流移动浏览器提供一种统一体验，更适合触摸屏用户使用；显示及输入方式模仿手机本地应用，让Web App看起来像Native App手机银行应用需求对于表单使用较多。有下拉选择、日期录入、密码录入、单选、复选列表展示反应速度方便更改样式主流技术框架jquery mobilejQuery Mobile 是jQuery 在手机上和平板设备上的版本，发布一个完整统一的jQuery移动UI框架。项目首页：/特点：此框架简单易用。页面开发主要使用标记，无需或仅需很少 JavaScript持续增强和优雅降级 同时支持高端和低端设备，比如那些没有 JavaScript 支持的设备，尽量提供最好的体验。浏览器支持广泛页面展示：sencha touch由现有的ExtJS整合JQTouch、Raphaeuml;l库，推出适用于最前沿Touch Web的Sencha Touch框架项目首页：/products/touch/特点：页面开发使用ExtJs，采用以 JavaScript 为核心的方法，通过编写JavaScript生成页面,基本上不需要写 HTML。支持ios及android页面展示：JQ.MobijQ.Mobi是jQuery的部分重写版本，但针对HTML5和移动设备做了优化。项目首页：/演示地址：/testdrive/index.html特点：它的文件大小只有3KB，而jQuery则有35KB，并且据JSPerf test的数据，它在Android上要比jQuery快3倍，在iOS上快2.2倍苹果和安卓浏览器速度快，容量小，但效果对其他浏览器及其他手机系统支持可能不太好。因为jQ.Mobi是插件式开发，所以它的编程语法和jQuery完全相同，jQ.Mobi只包含jQuery API的子集，也就是appMobi认为给iOS和Android提供完全相同用户体验最重要的那部分。显示效果比jquery mobile略差。页面展示：The M projectThe-M-Project提供了一套可以编译成jQuery Mobile对象的Widget项目首页：http:// /演示地址：/apps/kitchensink/index.html特点：完全JavaScript式的开发周期The-M-Project提供了一套可以编译成jQuery Mobile对象的Widget更好的可定制性页面展示：jQTouchjQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。项目首页：/演示：/preview/demos/main/普通浏览器无法正常浏览已是sencha touch 一部分提供动画、事件、ajax等，需自己定义样式预置三种风格：apple，jqtouch，vanilla表单控件如：日期输入，输入框、单选、复选框没还是html的原始风格。JoJo这个框架可用于开发那支持HTML5的移动设备，如iOS,webOS, Android和Chrome OS等平台。它拥有标准，类原生的UI元素比如用于屏幕登录的Web表单控件，还有弹出小部件可用于在用户点击界面时提供一些额外的信息。项目首页：/演示：/demos.html特点：使用JavaScript创建面向卡片式移动应用程序的Widget其结构是由一套创建Widget的JavaScript函数定义的，它们的代码通常包括大量嵌套的组装部件的函数调用，然后调用其它将小部件组装成大部件的函数。文档相对较少，控件欠缺ChocolateChip-UIChocolateChip-UI 是一个手机移动 Web 开发框架，使用 HTML5, WAML, CSS 和 JavaScript，基于 ChocolateChip JavaScript 库项目首页：/index.html特点：文档较少使用非标