一、起始之语我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好。因为,Android系统一套东西,iPhone又是新的一套,折腾死人呐。 于是总监发狠,让我把手上的活都交出去,专心折腾web版的,看看最后效果如何。 加上我觊觎手机上的开发学习很久了,于是,一拍即合,搞起了手机开发方面的学习。 分享是很好的提高自身学习的方法。因为分享过程中梳理了所学,往往会有些意想不到的心得与收获。如此利人利已的事情,自然乐意为之。于是,自己在文章id > 2000 的这一历史性时刻,新建了一个“mobile相关”的分类目录,把移动相关的一些东西总结,整理,分享出去,大家共勉。 二、我的选择显然,当下手机web开发移不开CSS3 + HTML5以及JavaScript。目前,也应运而生了很多开发的框架,有胶水层的,也有显示层的(不罗列)。因为个人偏好以及筛选,决定使用 如果时间足够,我想我会针对项目本身重新搞个更轻便灵活的交互框架。考虑到现实情况,还是决定使用他人的UI框架。 下截图为今儿个上午(2011-11-1 11:11)跑通的第一个 不过 三、我眼中的jQuery Mobile目前为止,jQuery Mobile的正式版还没有出来,但是这并不妨碍对其的使用。官方首页上说其代码轻量(lightweight code)。可能跟 而且,实际项目中的设计师设计东东的时候不可能是总是跟着 不过,我可以确信的是,如果在个人网站或是其他一些非对外的中小项目上使用jQuery Mobile的话,一定会爽歪的! 然后,还有一点我得承认。 页面元素的UI显示完全可以根据HTML代码内容和属性而来,不需要任何额外的JavaScript代码或是CSS代码,有模有样的手机页面效果就可以出炉。而且,要出效果页面,你只要静下心花个1整天的时间把官方的介绍文档看一篇就可以了。真这么简单。 例如下面这个纯显示的页面们(PC建议使用Chrome浏览器围观)。 手机可以访问以下地址:http://www./jq/mobile/ 这是在桌面版opera 10.1 mobile下的显示效果: 选择“文章搜索”项 → 点击搜索框后: 如果是在Android系统或是iPhone上,渐变效果,平滑切换效果都会显露出来的。 上面加起来差不多有10多个HTML页面,捣鼓了几个小时就出来的,当然是在无敌模式下。为什么快呢?因为基本上没有动一点新的CSS代码或是JavaScript代码。直接write HTML即可。如果你对jQuery Mobile熟悉的话,可以更快。 语义化 在 <div data-role="header"> <h1>鑫空间-鑫生活</h1> <a href="#" data-icon="arrow-r" data-iconpos="right">中文</a> </div> 上面这段 而后面的 语义化的标签决定了其位置,显示等。确实方便,但是有所限制。可谓有利有弊。 还有列表 嘛,不过吗,不用急,冰冻三尺非一日之寒,什么东西都是慢慢积累的。才刚开始,说多了未必是好。所以,本文就唠叨这么多。 |
|