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。 (*^__^*) 嘻嘻