一个简单WebApp的全程
开始前，我先给出上一篇选项卡的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标签，就像这样
<html>
<head> <meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="full-screen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<!--桌面快捷图标-->
<link rel="apple-touch-icon-precomposed" sizes="57x57"
href="images/ico-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120"
href="images/ico-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="196x196"
href="images/ico-196x196.png">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 屏幕适配 -->
<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。
a{text-decoration:none;color:#333333;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(61,194,168,1);}
因为是个web，我们不能保证每个打开的设备都是手机，可能打开这个页面的是pc，所以最好我们，做成一点响应式。就像这样
虽然pc上，看着不怎么爽，但是至少我们有所作为，作为用户也应该能感受到不太一样。当然，对于攻城狮来说这仅仅是代码能够解决的，来个媒体查询，同样还是html5的功劳，就像这样
.page{width:60%; margin:0 auto;}
.log_reg{width:60%; margin-left:-30%;}
@media screen and (max-width:823px){
.page{ width:80%;}
.log_reg{width:80%; margin-left:-40%;}
}
@media screen and (max-width:598px){
.page{ width:90%;}
.log_reg{width:90%;margin-left:-45%;}
}
@media screen and (max-width:480px){
.page{ width:100%;}
.log_reg{width:90%; margin-left:-45%;}
}
有了以上这么点的基础，写出上面的界面应该就不难了，接下来才是任务重点，功能开发。涉及后台的我就不多说了，我只说明这个简单的应用服务端用的java。这个应用出去注册和登录另外只有两个功能，一个是发表心情，第二就是围观，也就是评论。我们先来说登录。上段js代码
//登录注册组件操作
var $ze = $(".ze");//遮罩组件
var $log_reg_warp = $(".log_reg_warp");//登录和注册外包裹组件
var $oli = $(".topbar li");
var $log_reg = $(".log_reg");//整个登录组件
var $check = $("#check");//提示信息组件
$to_log.click(function(){
$log_reg.animate({top:65});
$ze.show();
//自动填写用户名和密码
if(localStorage.account){
$("#account").val(localStorage.account);
$("#password").val(localStorage.password);
}
});
$("#close").click(function(){
$log_reg.animate({top:-230});
$ze.hide();
});
for(var i=0; i<$oli.length;i++){
$oli[i].index = [i];
}
//登录注册界面切换
$oli.click(function(){
$(this).addClass("activ").siblings().removeClass("activ");
$log_reg_warp.animate({left:- this.index*100+"%"}, "slow");
$check.text(" ");
});
//登录操作
$("#log").click(function(){
var account = $.trim($("#account").val());//获取账号 去掉空格
var password = $.trim($("#password").val());//获取密码 去掉空格
$.ajax({
url:'userAction_log_ajax',
data:{account:account,password:password},
type:'post',
success:function(data){
switch(data){
case '0'://返回0 登录成功
$to_log.find("span").text(account);//修改登录状态
$check.text(" ");//去除提示信息
$log_reg.animate({top:-230});//登录组件隐藏
$ze.hide();//遮罩层隐藏
sessionStorage.isLog = true;
//本地存储用户名和密码
localStorage.account = account;
localStorage.password = password;
break;
//返回1用户名或密码不正确
case '1':
$check.text("用户名或密码不正确");
flash('#check',5,8,50);
break;
default:
$check.text("程序员不在,系统不开心了");
}
},
error:function(){
$check.text("程序员不在,系统不开心了");
}
});
});
//注册操作
$("#reg").click(function(){
var account = $.trim($("#account").val());//获取账号 去掉空格
var password = $.trim($("#password").val());//获取密码 去掉空格
//注册请求
$.ajax({
url:'userAction_reg_ajax',
data:{account:account,password:password},
type:'post',
success:function(data){
//用户名被占用返回2//用户名可用返回0//用户名密码格式不正确返回1
switch(data){
//返回0则注册成功执行下一步操作
case '0':
$check.text("注册成功！可以登录了！");
break;
//返回1用户名或密码不正确
case '1':
$check.text("用户名或密码格式不对");
flash('#check',5,8,50);
break;
//返回2用户名被占用
case '2':
$check.text("用户名已经被人抢了！呜呜！换个");
flash('#check',5,8,50);
break;
default:
$check.text("程序员不在,系统不开心了");
}
},
//错误则提示系统忙
error:function(){
$check.text("程序员不在,系统不开心了");
}
});
});
说了这么多，可能还是不知所云，你们还是先体验一下吧！之后再详细说明细节。http://www.xqhuadou.com。时间问题没有做兼容，webkit内核的浏览器是没有问题的，最好是手机，体验是最好的。
在上一张宣传图片，感觉是不是瞬间高大上起来了，
一个简单WebApp的全程的更多相关文章
- 参照实验室这边案例做一个简单的maven webapp项目
流程 : 首先写出一个简单的前端页面. 之后写配置文件.dao.domain等等,注意这里可以使用generator进行自动配置 实验室这边配置文件如下: 其实主要的配置文件就分为6“个”. appl ...
- 使用Servlet和JSP实现一个简单的Web聊天室系统
1 问题描述 利用Java EE相关技术实现一个简单的Web聊天室系统,具体要求如下. (1)编写一个登录 ...
- 3小时搞定一个简单的MIS系统案例Northwind，有视频、有源代码下载、有真相
一.瞎扯框架.架构 楼主自从1998年从C语言.MASM.Foxbase开始学计算机开始接触这个行当16年以来,2001年干第一份与程序.软件.然后是各种屌的东西开始,差不多干了13年了,这13年来, ...
- 在cmd下编译一个简单的servlet时出现程序包javax.servlet不存在
由于servlet和JSP不是Java平台JavaSE(标准版)的一部分,而是Java EE(企业版)的一部分,因此,必须告知编译器servlet的位置. 解决“软件包 javax.servlet不存 ...
- Spring MVC：使用SimpleUrlHandlerMapping的一个简单例子
实现一个控制器ShirdrnController,如下所示: package org.shirdrn.spring.mvc; import java.util.Date; import javax.s ...
- IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程
一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 ...
- Web开发之tomcat配置及使用(环境变量设置及测试,一个简单的web应用实例)
Tomcat的配置及测试: 第一步:下载tomcat,然后解压到任意盘符 第二步:配置系统环境变量 tomcat解压到的D盘 (路径为: D:\tomcat), 配置环境变量: 启动tomcat需要两 ...
- oracle常见为题汇总，以及一个简单数据连接操作工厂
本人软件环境:win8.1 64位操作系统,vs2013,安装好了与oracle数据库对应的客户端 连接oracle数据库.以及操作数据库 1.使用IIS建立网站,浏览网页时候,提示“ ...
- 开发部署一个简单的Servlet
Servlet是一个执行在服务器端的Java Class文件,载入前必须先将Servlet程序代码编译成.class文件,然后将此class文件放在servlet Engline路径下.Servlet ...
随机推荐
- 51nod 1103：N的倍数 抽屉原理
1103 N的倍数 题目来源: Ural 1302 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 一个长度为N的数组A,从A中选出若干个数,使得这 ...
- 实战 迁移学习 VGG19、ResNet50、InceptionV3 实践 猫狗大战 问题
实战 迁移学习 VGG19.ResNet50.InceptionV3 实践 猫狗大战 问题 参考博客:::https://blog.csdn.net/pengdali/article/detail ...
- java课程之团队开发冲刺阶段2.2
一.总结昨天进度 1.单独实现静音功能,还没有进行整体整合 二.遇到的问题 1.一开始设计静音的思路有问题,所以在实现上有些许麻烦,一开始的想法是将这些音量直接设置为0就可以实现静音,但是在恢复响铃模 ...
- 201803-2 碰撞的小球 Java
思路: 直接按照题意模拟,感觉没什么太好的办法.另外注意:int这种基础数据类型不能用equals这个方法 ,必须是Integer类型 import java.util.Scanner; public ...
- HttpServletRequest 的常用属性说明
HttpServletRequest 的常用属性总是被窝遗忘,人老了记性就不好.所以做个笔记,方便以后查看. 测试地址:http://127.0.0.1:8080/Test/test getConte ...
- CodeForces - 748E Santa Claus and Tangerines（二分）
题意:将n个蛋糕分给k个人,要保证每个人都有蛋糕或蛋糕块,蛋糕可切, 1.若蛋糕值为偶数,那一次可切成对等的两块. 2.若蛋糕值为奇数,则切成的两块蛋糕其中一个比另一个蛋糕值多1. 3.若蛋糕值为1, ...
- SQL Server 2017 安装问题
遇到问题 Polybase 要求安装 Oracle JRE7 更新 规则失败 安装完毕之后,登录提示:您试图连接的 SQL Server 实例未安装 安装完SQL Server 2017 后,无法启动 ...
- no.10京东咚咚架构演讲读后感
京东之与旺旺相当于淘宝,他们都是服务于买家和卖家的沟通.京东咚咚的功能比较简单,实现了一个 IM 的基本功能,接入.互通消息和状态. 另外还有客服功能,就是顾客接入咨询时的客服分配,按轮询方式把顾客分 ...
- ES6 之 Math对象的扩展
1.ES5 http://www.w3school.com.cn/jsref/jsref_obj_math.asp 2.ES6 Math.trunc() - 取整,去掉一个数的小数部分 console ...
- CSS3新特性—过渡、转换
过渡 转换 2D转换 2D转换包括四个方面:位移,缩放,旋转,倾斜 位移[让元素移动位置] transform: translate(100px,100px); 备注: 1. 如果只设置一个值,那么代 ...