開始前，我先給出上一篇選項卡的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內核的瀏覽器是沒有問題的，最好是手機，體驗是最好的。
在上一張宣傳圖片，感覺是不是瞬間高大上起來了，
