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

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

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 的同学进一步了解和学习

评论：

在我看来，你做的这么好，完全可以使用Romanysoft LAB的服务，搭建苹果桌面App。 (*^__^*) 嘻嘻

秒客网

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

DEMO

WebApp

jQuery Mobile

jQuery Mobile 主题

看见，自己

相关文章