开始前，我先给出上一篇选项卡的demo链接http://xqhuadou.com/demo1/index.html。相信看着应该很带感，不过这个是之前经过修改的。

制作过程我就不多说了，可以直接看源码。

　　好了，现在开始我们的WebApp的流程，既然是App，来个icon是必要的，就像这样

　　

　　现在我们可以来玩大家来找茬了，是不是和本地App很像呢，打开话兜的内容是上图右边的效果。

　　

　　好的，无论我们用的什么样的作图软件，自己会用的就ok，制作一个别致的icon不是问题，但是需要注意的地方的是，icon的大小要多种，因为安卓机屏幕的碎片化，我们要考虑不同的屏幕下的icon大小，

57*57、120*120、196*196三个不同大小的png图片。有了icon我们应该怎么用呢，既然我们做的WebApp，他其实就是一个Web页面，之前桌面上的icon其实只是一个打开页面的快捷方式。

　　现在我们需要制作前端的web页面了，应用的首页就如上图，相信用html制作这样的页面布局是不难的，但是我们需要写很多html的meta标签，就像这样

　　

  1. <html>
  2.   <head>
  3.  
  4.       <meta name="renderer" content="webkit">
  5.     <meta name="apple-mobile-web-app-capable" content="yes">
  6.       <meta name='apple-touch-fullscreen' content='yes'>
  7.       <meta name="full-screen" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <meta name="format-detection" content="telephone=no">
  10.     <meta name="format-detection" content="address=no">
  11.      <!--桌面快捷图标-->
  12.       <link rel="apple-touch-icon-precomposed" sizes="57x57"
  13.       href="images/ico-57x57.png">
  14.     <link rel="apple-touch-icon-precomposed" sizes="120x120"
  15.       href="images/ico-120x120.png">
  16.     <link rel="apple-touch-icon-precomposed" sizes="196x196"
  17.       href="images/ico-196x196.png">
  18.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  19.       <!-- 屏幕适配 -->
  20.       <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

　　上面这多的标签，其实最重要的酒是屏幕适配的meta标签内容，是规定文档宽度等于设备屏幕的宽度，而且不允许放大，所以接下去我们写的所有div元素的宽度都不能用固定宽度，因为，如果要保证在屏幕大小不同的屏幕上都要显示满屏的元素，很容易想到用100%百分比的宽度设定。记住html5有很多新的特性，来支持我们来制作这样的应用。

　　一般的css样式我就不多说了，讲几个需要注意的地方，一般情况下，点击手机网页上的<a></a>是有高亮显示的，而且自带的高亮对于不同的手机是不一样的，所以我们应该去除这样的显示，给A标签加上这样的css。

  1. a{text-decoration:none;color:#333333;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(61,194,168,1);}

　　因为是个web，我们不能保证每个打开的设备都是手机，可能打开这个页面的是pc，所以最好我们，做成一点响应式。就像这样

　　

虽然pc上，看着不怎么爽，但是至少我们有所作为，作为用户也应该能感受到不太一样。当然，对于攻城狮来说这仅仅是代码能够解决的，来个媒体查询，同样还是html5的功劳，就像这样

  1. .page{width:60%; margin:0 auto;}
  2. .log_reg{width:60%; margin-left:-30%;}
  3. @media screen and (max-width:823px){
  4. .page{ width:80%;}
  5. .log_reg{width:80%; margin-left:-40%;}
  6. }
  7.  
  8. @media screen and (max-width:598px){
  9.     .page{ width:90%;}
  10.     .log_reg{width:90%;margin-left:-45%;}
  11. }
  12.  
  13. @media screen and (max-width:480px){
  14.     .page{ width:100%;}
  15.     .log_reg{width:90%; margin-left:-45%;}
  16. }

有了以上这么点的基础，写出上面的界面应该就不难了，接下来才是任务重点，功能开发。涉及后台的我就不多说了，我只说明这个简单的应用服务端用的java。这个应用出去注册和登录另外只有两个功能，一个是发表心情，第二就是围观，也就是评论。我们先来说登录。上段js代码

  1. //登录注册组件操作
  2.  
  3.     var $ze = $(".ze");//遮罩组件
  4.  
  5.     var $log_reg_warp = $(".log_reg_warp");//登录和注册外包裹组件
  6.     var $oli = $(".topbar li");
  7.     var $log_reg = $(".log_reg");//整个登录组件
  8.     var $check = $("#check");//提示信息组件
  9.  
  10.     $to_log.click(function(){
  11.         $log_reg.animate({top:65});
  12.         $ze.show();
  13.         //自动填写用户名和密码
  14.         if(localStorage.account){
  15.             $("#account").val(localStorage.account);
  16.             $("#password").val(localStorage.password);
  17.         }
  18.         });
  19.     $("#close").click(function(){
  20.         $log_reg.animate({top:-230});
  21.         $ze.hide();
  22.         });    
  23.  
  24.     for(var i=0; i<$oli.length;i++){
  25.         $oli[i].index = [i];
  26.         }
  27.  
  28.     //登录注册界面切换
  29.     $oli.click(function(){
  30.         $(this).addClass("activ").siblings().removeClass("activ");
  31.         $log_reg_warp.animate({left:- this.index*100+"%"}, "slow");
  32.         $check.text(" ");
  33.         });
  34.  
  35.     //登录操作
  36.     $("#log").click(function(){
  37.         var account =  $.trim($("#account").val());//获取账号   去掉空格
  38.         var password = $.trim($("#password").val());//获取密码 去掉空格
  39.         $.ajax({
  40.                 url:'userAction_log_ajax',
  41.                 data:{account:account,password:password},
  42.                 type:'post',
  43.                 success:function(data){
  44.                     switch(data){
  45.                     case '0'://返回0 登录成功
  46.                         $to_log.find("span").text(account);//修改登录状态
  47.                         $check.text(" ");//去除提示信息
  48.                         $log_reg.animate({top:-230});//登录组件隐藏
  49.                         $ze.hide();//遮罩层隐藏
  50.                         sessionStorage.isLog = true;
  51.                         //本地存储用户名和密码
  52.                         localStorage.account = account;
  53.                         localStorage.password = password;
  54.                     break;
  55.  
  56.                     //返回1用户名或密码不正确
  57.                     case '1':
  58.                         $check.text("用户名或密码不正确");
  59.                         flash('#check',5,8,50);
  60.                         break;
  61.  
  62.                     default:
  63.                         $check.text("程序员不在,系统不开心了");
  64.  
  65.                         }
  66.                     },
  67.                 error:function(){
  68.                     $check.text("程序员不在,系统不开心了");
  69.  
  70.                 }
  71.             });
  72.  
  73.         });
  74.  
  75.     //注册操作
  76.     $("#reg").click(function(){
  77.         var account =  $.trim($("#account").val());//获取账号   去掉空格
  78.         var password = $.trim($("#password").val());//获取密码 去掉空格
  79.         //注册请求
  80.         $.ajax({
  81.             url:'userAction_reg_ajax',
  82.             data:{account:account,password:password},
  83.             type:'post',
  84.             success:function(data){
  85.                 //用户名被占用返回2//用户名可用返回0//用户名密码格式不正确返回1
  86.                 switch(data){
  87.                 //返回0则注册成功执行下一步操作
  88.                 case '0':
  89.                     $check.text("注册成功！可以登录了！");
  90.                 break;
  91.  
  92.                 //返回1用户名或密码不正确
  93.                 case '1':
  94.                     $check.text("用户名或密码格式不对");
  95.                     flash('#check',5,8,50);
  96.                     break;
  97.  
  98.                 //返回2用户名被占用
  99.                 case '2':
  100.                     $check.text("用户名已经被人抢了！呜呜！换个");
  101.                     flash('#check',5,8,50);
  102.                     break;
  103.  
  104.                 default:
  105.                     $check.text("程序员不在,系统不开心了");
  106.                 }
  107.  
  108.             },
  109.             //错误则提示系统忙
  110.             error:function(){
  111.                 $check.text("程序员不在,系统不开心了");
  112.  
  113.             }
  114.  
  115.         });
  116.  
  117.     });

说了这么多，可能还是不知所云，你们还是先体验一下吧！之后再详细说明细节。http://www.xqhuadou.com。时间问题没有做兼容，webkit内核的浏览器是没有问题的，最好是手机，体验是最好的。

在上一张宣传图片，感觉是不是瞬间高大上起来了，

　

一个简单WebApp的全程的更多相关文章

  1. 参照实验室这边案例做一个简单的maven webapp项目

    流程 : 首先写出一个简单的前端页面. 之后写配置文件.dao.domain等等,注意这里可以使用generator进行自动配置 实验室这边配置文件如下: 其实主要的配置文件就分为6“个”. appl ...

  2. 使用Servlet和JSP实现一个简单的Web聊天室系统

    1 问题描述                                                利用Java EE相关技术实现一个简单的Web聊天室系统,具体要求如下. (1)编写一个登录 ...

  3. 3小时搞定一个简单的MIS系统案例Northwind，有视频、有源代码下载、有真相

    一.瞎扯框架.架构 楼主自从1998年从C语言.MASM.Foxbase开始学计算机开始接触这个行当16年以来,2001年干第一份与程序.软件.然后是各种屌的东西开始,差不多干了13年了,这13年来, ...

  4. 在cmd下编译一个简单的servlet时出现程序包javax.servlet不存在

    由于servlet和JSP不是Java平台JavaSE(标准版)的一部分,而是Java EE(企业版)的一部分,因此,必须告知编译器servlet的位置. 解决“软件包 javax.servlet不存 ...

  5. Spring MVC：使用SimpleUrlHandlerMapping的一个简单例子

    实现一个控制器ShirdrnController,如下所示: package org.shirdrn.spring.mvc; import java.util.Date; import javax.s ...

  6. IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程

    一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 ...

  7. Web开发之tomcat配置及使用(环境变量设置及测试,一个简单的web应用实例)

    Tomcat的配置及测试: 第一步:下载tomcat,然后解压到任意盘符 第二步:配置系统环境变量 tomcat解压到的D盘 (路径为: D:\tomcat), 配置环境变量: 启动tomcat需要两 ...

  8. oracle常见为题汇总，以及一个简单数据连接操作工厂

    本人软件环境:win8.1 64位操作系统,vs2013,安装好了与oracle数据库对应的客户端         连接oracle数据库.以及操作数据库 1.使用IIS建立网站,浏览网页时候,提示“ ...

  9. 开发部署一个简单的Servlet

    Servlet是一个执行在服务器端的Java Class文件,载入前必须先将Servlet程序代码编译成.class文件,然后将此class文件放在servlet Engline路径下.Servlet ...

随机推荐

  1. 11 数据存储（Unity3D）

    所有的游戏开发都离不开数据存储的操作,Unity3D也不例外PlayerPrefs:PlayerPrefs是Unity系统自带的的一种最简单的存储方式,数据是使用字典的方法来存储的 PlayerPre ...

  2. Elasticsearch 使用集群 - 列出索引

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  3. POJ 1003：Hangover

    Hangover Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 109231   Accepted: 53249 Descr ...

  4. Egret Engine 2D - 缩放模式和旋转模式说明

    缩放模式和旋转模式说明 缩放模式showAll 常用 noScale noBorder exactFit 次常用 fixedWidth fixedHeight fixedNarrow fixedWid ...

  5. Java算法练习——整数转罗马数字

    题目链接 题目描述 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 ...

  6. 超低功耗Sub-1GHz性价比首选方案：CMT2300

    关于超低功耗Sub-1GHz射频收发器,目前性价比方面CMT2300是一款大多客户的首选方案,不管是成本方面还是性能方面,都能大大的满足客户的需求.下面为大家讲解下CMT2300 这款Sub-1GHz ...

  7. SqlServer 集合运算符

    1.集合运算符概述 (1)集合运算符运用与集合之间的运算. (2)多元集合: 指的是来自两个输入查询的集合,可能包含重复项 (3)T-SQL 支持三种集合运算符 union .intersect .e ...

  8. C++基础--函数模板

    函数模板是通用的函数描述,其使用泛型来定义函数.其实就是有些操作,如果撇开具体的变量的数据类型,其操作是一样的如果我们将这些操作写成一个模板,在调用不同变量的时候就设定好变量类型就可了,后续的操作基本 ...

  9. QT设计

    MFC是跨平台的一个界面开发的类库 框架是什么呢? 1.基础模块 2.机制交互(数据传输) 3.多种语言 QT core QT gui QT widget QT 1.基础模块 2.拓展模块 3.too ...

  10. Maven:java.lang.RuntimeException: Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty

    直接参考前面一篇文章中间介绍的第2种方法即可:Maven:sun.security.validator.ValidatorException: PKIX path building failed: s ...