jQuery Mobile:http://jquerymobile.com,一个基于jquery的html 5移动网站框架,用它做出来的网站界面和App风格类似。方案选型过程见 http://lutaf.com/145.htm

  • 优点1:开发特别简单,不需要美术资源,甚至不需要太多css/html编程经验,甚至不需要js编程技能,普通程序员就能很快学会制作出 美观大方的 mobile site
  • 优点2:只用js进行渲染,不改变html本身结构,没有特殊标签,都是通过html tag的class来控制显示,这样做出来的网站对搜索引擎是很友好的,比Ext JS,GWT之流的要强很多
  • 缺点1:风格和App类似,在浏览器里面看起来比较重,不够小清新,那些跨平台App开发工具比如 PhoneGap 都喜欢使用jQuery Mobile
  • 缺点2: 和native应用比,不是特别的流畅,毕竟需要浏览器执行

jQuery Mobile简明教程

jQuery Mobile文档,内容不多,耐心看完只需要1个小时,大体分成8大功能点

  1. page:最基准单元,包括header,footer,导航栏
  2. dialog:对话框,在手机屏幕弹出dialog来交互,我觉得不是很友好
  3. transitions:转场效果
  4. form:表单
  5. button:大button,小button(放在各种栏上的都是小button),还提供了若干内置标准icon
  6. listview:列表,这是jquery mobile的核心UI,提供了10几种类型的List,简单好用
  7. event:各种滚动,滑动,拖拽事件
  8. Theming:官方提供了5种皮肤,也有工具可以自定义,切换皮肤只需要改动一个class

jQuery Mobile全面支持ajax,但也可以当做普通html模板在后端渲染数据,我选择后面一种

学习方法

  • 零门槛,耐心读完文档就学会了,内容也不多
  • 官网提供了一个可视化编辑器:Codiqa,收费每个月16刀,没有必要用,jQuery Mobile超出你想象的简单,开工之前,先在纸上画好mobile site的结构,打开编辑器直接写
  • 资源: 我把http://m.lutaf.com的全部静态html模板都放在

    https://github.com/lutaf/jquery-mobile-site-demo

    供大家参考

延伸

本博客基于django,部署在一个128Mvps上,为了省内存,把mobile site和web site都放在同一个project里,通过用户的user agent判断应该访问具体哪一个site

mobile site的地址是:http://m.lutaf.com

在django里面,要实现url 全局拦截器,得写middleware,我写了两个,代码在这里:

https://github.com/lutaf/django-mobile-site-redirect-middleware

本文地址: http://lutaf.com/146.htm 鲁塔弗原创文章,欢迎转载,请附带原文链接