评论 ”[实例] 设计基于JQM的WebApp“

浏览数：35 / 时间：2015年06月11日

DEMO

先上最近做的一个WebApp小应用，http://iwxy.me/m.html，大家可以先去玩玩儿，在移动终端访问查看最佳效果

实现的功能是微博上偶然看到的一个小测试，动物认识真实的自己，不说测试的真实性如何，只是觉得挺有趣的，还给它取了个洋气的名字，叫看见，自己

废话不多说，下面开始正题

WebApp

关于WebApp，很多人说好，也有很多人反对

它有很多优点，比如

全平台兼容，安卓，IOS，WindowsPhone 通用

免去了更新的麻烦，因为它根本就无需安装

无需提交到应用商店，方便、快捷地部署

缺点也非常明显

硬件要有足够的处理能力去支持图形和动画效果

网速限制，脱离了网络就无法运行

相对 NativeApp 体验较差，如果要调用相机或者文件系统也不是一件容易的事

我认为这是一个技术发展的过程，未来会变成啥样儿谁也说不清对吧

jQuery Mobile

jQuery Mobile 是一款创建移动 WebApp 的框架，同类型的框架也有很多，就不一一列举了

官网链接 http://jquerymobile.com/ ，当前最新版本是 version 1.4.5

官网下载下来的压缩包中包括了构建项目很多不必要的文件，包括很多 demo 和 images

需要的是 jquery.mobile-1.4.5.min.css 、jquery.mobile-1.4.5.min.js 和一张 ajax-loader.gif 作为加载时的图片
还有，别忘记了jQuery，支持版本 jQuery 1.8 - 1.11 / 2.1

文件加载好了，接下来就可以开始构建项目了，在JQM中，使用 HTML5 data-* 属性为移动设备创建对触控友好的交互外观，

在 jQuery Mobile 中，可以在单一 HTML 文件中创建多个页面，通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此
<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>
看见，自己全部的代码也是写在同一个文件中，但是如果要构建大型项目的话，不推荐采取这种方式，会严重影响加载时间

data-role="page" 显示在浏览器中的页面

data-role="header"创建页面上方的工具栏（常用于标题和搜索按钮）

data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等

data-role="footer" 创建页面底部的工具栏

除了查官方文档外，W3School的教程也很详细，不过你需要将代码部署到本地来查看效果

jQuery Mobile 主题

默认有两种主题供选择，也可以自己 DIY 定制主题，http://themeroller.jquerymobile.com/

在原有的样式上进行修改并不是一件容易的事，如果认为可以给元素加一个 class 然后写样式，会发现自己写的样式将会被覆盖，因为这里的样式为动态添加

定制主题建议的方法是

通过themeroller，简单方便

找到jquery.mobile.css文件，通过复制主题a和替换每个类名称–a的后缀名定制自己的主题

看见，自己

原于微博上看到的一则小测试

head
<!DOCTYPE html>
<html>
<head>
<title>看见，自己</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<link rel="apple-touch-icon" href="/icon.png" />
<script src="/jquery.min.js"></script>
<script src="/jquery.mobile-1.4.5.min.js"></script>
</head>
视窗大小等于设备大小，初始大小为1，不允许用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

网站开启对 web app 程序的支持
<meta name="apple-mobile-web-app-capable" content="yes" />

忽略页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />

设置主屏幕图标，Safari的添加到主屏幕功能不仅方便用户快速访问，而且也使 WebApp 更像一个 NativeApp
<link rel="apple-touch-icon" href="/icon.png" />

随便画了一个非常简单的 icon

在设备上查看图标

除了这些标签，我们还需要添加一些属性来让 WebApp 看上去更像一个 NativeApp

CSS
<style type="text/css">
*{
  -webkit-touch-callout:none; //禁止弹出列表栏
  -webkit-user-select:none; //禁止用户选中元素
}
</style>
HTML
<body>
<div data-role="page" id="index">
  <div data-role="header" data-theme=‘b‘ data-position="fixed">
      <h1>看见，自己</h1>
  </div>
  <div data-role="content">
    <h4>这是一个非常有趣(wu liao)的小测试，<br>为什么这么说呢？因为真的很有趣(wu liao)...</h4>
  <p>乐活心理测试</p><hr>
  <p href="#">动物认知真实的你</p><hr>
  <center class="ready">Are you ready ？</center>
  <center class="ready">请点击下方按钮开始测试</center>
  <center class="ready">（＾∀＾）</center>
  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul >
        <li><a href="#test" data-transition="flip">START NOW</a></li>
      </ul>
     </div>
  </div>
</div>

<div data-role="page" id="test">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h1>看见，自己</h1>
  </div>
  <div data-role="content">
  <center>请<span class="number">依序</span>选出你心目中最喜欢的三种动物<br><br>必须是你的第一直觉<br></center>
    <div id="animal" data-role="controlgroup" data-type="vertical" data-mini="true">
      <a data-role="button">狗</a>
      <a data-role="button">猴子</a>
      <a data-role="button">猫</a>
      <a data-role="button">狮子</a>
      <a data-role="button">马</a>
      <a data-role="button">松鼠</a>
      <a data-role="button">羊</a>
      <a data-role="button">兔子</a>
      <a data-role="button">熊</a>
      <a data-role="button">企鹅</a>
    </div>
  </div>
 <div data-role="footer" data-position="fixed">
     <div data-role="navbar">
      <ul id="choose">
        <li><a id="choose_first">1</a></li>
        <li><a id="choose_second">2</a></li>
        <li><a id="choose_third">3</a></li>
      </ul>
     </div>
  </div>
</div> 


<div data-role="page" id="result">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h1>看见，自己</h1>
  </div>
  <div data-role="content">
    <h4>最喜欢的动物 - 代表你希望自己给别人的印象</h4><hr>
    <p id="mostLike"></p>
    <h4>排名第二的动物 - 代表别人对你的看法</h4><hr>
    <p id="secondLike"></p>
    <h4>排名第三的动物 - 代表你真正的样子</h4><hr>
    <p id="thirdLike"></p>
  </div>
  <div data-role="footer" data-position="fixed">
       <div data-role="navbar">
        <ul>
          <li><a id="testAgain">重新测试</a></li>
        </ul>
       </div>
  </div>
</div> 
</body>
JS
<script type="text/javascript">
  $(document).ready(function(){
    var n = 1;

    $("#animal a").click(function(){
      if(n == 1){
        var t1 = $(this).text();
        $("#choose_first").text(t1).css({"color":"white","background":"#16a085"});
        $("#mostLike").append(showResult(t1));
        n++;
      }
      else if(n == 2){
        var t2 = $(this).text();
        $("#choose_second").text(t2).css({"color":"white","background":"#16a085"});
        $("#secondLike").append(showResult(t2));
        n++;
      }
      else if(n == 3){
        var t3 = $(this).text();
        $("#choose_third").text(t3).css({"color":"white","background":"#16a085"});
        $("#thirdLike").append(showResult(t3));
        n=0;
        setTimeout("location.href=‘#result‘",500); 
      }

    }) 

    function showResult(a){
      var i = 0;
      var animal = [
      {"no":1,"name":"狗","mean":"个性温和，善解人意，为朋友竭心尽力，不怕麻烦，是忠诚度极高且富有同情心的人，为人正直，不会做出背叛朋友的事，是可以信赖的人"},
      {"no":2,"name":"猴子","mean":"幽默、容易亲近，在一起不会让人感到厌倦，喜欢照顾别人，头脑灵活，好奇心强"},
      {"no":3,"name":"猫","mean":"神秘、捉摸不定的人，忠于自己的步调，崇尚自由，不喜欢受束缚，而且非常自我，对很多事都保持着既定的想法"},
      {"no":4,"name":"狮子","mean":"有威严，在人群中特别受瞩目，最具有领袖气质的人，重荣誉及社会地位，有时难免偏于虚荣，因此，自尊心也很强"},
      {"no":5,"name":"马","mean":"带点稚气，为人爽快，即使是女性也不会要求特别的待遇，是个个性活泼、干脆，在穿着上也很讲究的人"},
      {"no":6,"name":"松鼠","mean":"有一点孩子气，外表给人软弱的印象，实际上却是个能干且牢靠的人，不过有些三心两意，另外崇尚自由，脑筋也很灵活"},
      {"no":7,"name":"羊","mean":"外表柔弱，实际上却很顽固，是个勤奋不懈的努力派，以及重秩序、讲义气的人，朋友的事看得比自己还重要"},
      {"no":8,"name":"兔子","mean":"是个可爱，颇具美丽的人，由于这个特质，常让周遭的人兴起想保护你的欲望，另外个性温和优雅，很讨人喜爱"},
      {"no":9,"name":"熊","mean":"温和亲切，是可以依赖的人，心地善良，个性单纯、率直，做事谨慎，给人平稳、宜家的印象"},
      {"no":10,"name":"企鹅","mean":"谨慎、保守、朴素型的人，有时会给人一种沉静中带点危险的感觉，对很多事都无动于衷"}
      ]

      for(;i <= 10;i++){
        if(a == animal[i].name){
          return animal[i].name+" ："+animal[i].mean; 
        }
      }
    }

    $("#testAgain").click(function(){  //页面跳转
      location.replace("#index");
      location.reload(); //刷新脚本
    })

  })
</script>
WebApp 开发的流程差不多就是这样子了，Demo 很简单

JQM 文档很全，提供了很多友好的组件，总体来说非常容易上手，推荐给想学 WebApp 的同学进一步了解和学习