首页 > 代码库 > 一个简单WebApp的全程
一个简单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的全程