一个简单WebApp的全程-职坐标

一个简单WebApp的全程

安安 2017-10-11 来源：网络阅读 702 评论 0

摘要：本篇WEBAPP教程将为大家讲解WEBAPP编程的知识点，看完这篇文章会让你对WEBAPP编程的知识点有更加清晰的理解和运用。

本篇WEBAPP教程将为大家讲解WEBAPP编程的知识点，看完这篇文章会让你对WEBAPP编程的知识点有更加清晰的理解和运用。

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

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

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

一个简单WebApp的全程　　

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

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

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

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

一个简单WebApp的全程　　

<html>

<head>

href="images/ico-57x57.png">

href="images/ico-120x120.png">

href="images/ico-196x196.png">

上面这多的标签，其实最重要的酒是屏幕适配的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("程序员不在,系统不开心了");

}

});

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

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

一个简单WebApp的全程

本文由职坐标整理并发布，希望对同学们学习WEBAPP开发的知识有所帮助。了解更多详情请关注职坐标WEBAPP开发频道!

webapp教程 webapp开发教程pdf webapp下载

本文由 @安安发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

移动开发 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

Webapp30天热搜词更多>>