Henry's Blog

jQuery Mobile Web App

最近，两周的时间，将一款纯 Native 的 iPhone App，移植到了 Web 端，简称 Web App。 iPhone App 下载地址：银联微点 Web App 的目标要能够支持各种智能设备的各种浏览器。 个人 JavaScript 方面，长期使用 jQuery，于是很自然的想到使用 jQuery Mobile 来搭建页面。
实践中，开发比较顺利，使用了以下几个组件： Navbar，Collapsibles，Dialogs，Listviews，Buttons； 另外，引入了地图（Google Map），图片轮播(photo sliders)，弹窗(Popup)，隐藏地址栏(hideaddrbar)等插件。
简要记录一下：

1. Meta 标签设置
可以从苹果的开发者文档里，了解下面配置的意义：safariwebcontent

    < meta content='text/html; charset=UTF-8' http-equiv='content-type'>
    < meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0,height=device-height,width=device-width,user-scalable=no' name='viewport'>
    < meta content='upsmart' name='apple-mobile-web-app-title'>
    < meta content='yes' name='apple-mobile-web-app-capable'>
    < meta content='black' name='apple-mobile-web-app-status-bar-style'>

2. 模版内容部分，加上 data-role="page"
可以避免 JM 重复加载 render 的页面内容 

    < body>
      < article data-role="page">
        < %= yield %>
      < /article>
    < /body>

3. Navbar 的头部和尾部 Fixed 

    < div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
      < a href="#" id="search_btn" data-icon="search">搜索< /a>
      < h1>热门品牌< /h1>
      < a href="#" id="setting_btn" data-icon="gear">设置< /a>
    < /div>
截图如下：

4. Google Map

    < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false">
截图如下：

5. 图片轮播
使用了下面这个图片轮盘的插件： 网址 

      var mySwiper = $('.swiper-container').swiper({
        autoPlay: 1000,
        mode:'horizontal',
        pagination:'.pagination-sd',
        slidesPerSlide : 1,
        loop: true
      });
截图如下：

6. 弹窗
引入 jQuery Mobile SimpleDialog： SimpleDialog
截图 1 如下：

截图 2 如下：

7. 页面滚动加载实现
详细实现在这里： Scroll Pagination

8. 页面加载后，执行 JS 隐藏浏览器地址栏
JS 库实现在这里： Scroll Pagination

待优化问题：

    1. 页面加载较慢，性能差的手机使用不流畅
    2. 页面晃动：页面组件加载后，需要执行 JS 来渲染，
       因此页面会出现晃动的效果（不是有意设计的^_^）

2013-06-30

rocket-wing