【微信平臺&後臺管理】第一個外包項目：XX科技城微信平臺項目總結

　　　　蒼天有眼啊，學了半年的網站開發終於派上用處，終於能賺錢了啊。

　　　　這個項目是和學長一塊兒作的，項目的甲方是大慶某房地產土豪，項目要求就是搭建一整套的微信平臺和微信平臺管理系統，具體要求就是：回覆關鍵字能拿到移動端web界面的網址，而後點擊進入以後是完美顯示的。移動端web這邊要分版塊，作的相似於手機應用的界面，進去以後點擊打開子頁面，裏面有公司的詳細介紹吧啦吧啦的。後端系統要求和微信平臺的移動端界面對接，能增刪改移動端的板塊信息，還要存儲全部發過的版塊文章，後期拓展功能就是把微信界面整個load進來，直接在後端管理中心進行微信平臺的操做，像是推送、修改什麼的...

　　　　這邊算是碰見真土豪了，開價4K，後期運維再加錢，並且甲方那邊要求也少，直接找的中介代理，中介仍是不懂行的主，並且說只要實現功能就好。項目開工以前打了一半的款子，好像今天那邊查看完了以後確認OK以後另外一半也打過來了....坐等分錢，哈哈哈

 

　　　　好吧，其實這行字是23號0:47寫的。由於剛纔被喊去改一個佈局，還好，查看了一下Bootstrap的css，而後搞定了的說

 

　　　　其實整個外包項目的話我負責的主要就是前端界面和微信端界面，後端代碼的話和mvc的綁定是我作的，直接寫佈局頁的時候就寫進去了= =還有整個網站的佈局設計是我作的，由於沒美工，好多圖都是我從土豪給的樣圖裏改出來的。以前真正動手寫以前挺蛋疼的，後來寫着寫着發現還好，最後快作完了發現我靠這麼水...而後就作完了....

 

　　　　在前端上， 此次用的是bootstrap，也是第一次用這個框架寫項目前端，由於要考慮到各類移動尺寸屏幕的適配，因此移動端網站確定是要作響應式佈局的。可是bt3在傳統電腦端的顯示效果並非很好，因此我就很睿智的= = 將兩套網站的佈局文件分別用的是bt2和bt3分開來用...

　　　　前端上，佈局始終是最大的坑，如何適應各個屏幕的顯示器、如何適應各個尺寸的手機屏幕，還有蛋疼的IE，不管是電腦上的IE8，9,10或者是wp上的IE都挺蛋疼，下面一個一個的慢慢說。

　　　　1.最開始的一個難關是側邊菜單：sidebar，剛纔叫我去也是改這一塊。首先就是sidebar怎麼實現的問題，一開始打算本身寫，後來一想佈局什麼的都得本身調就沒寫，直接用的bootstrap裏的sidebar插件，具體代碼以下

　　　　　　

<!--Sidebar content 這就是側邊欄在bootstrap中的實現代碼-->
      <div class="sidebar-menu">
        <a href="#userMeun"class="nav-header menu-first collapsed" data-toggle="collapse"><i class="icon-user-md icon-large"></i> 內容管理</a>
        <ul id="userMeun" class="nav nav-list  collapse in   menu-second" >
          <li><a href="吧啦吧啦「><i class="icon-pencil"></i> 文章管理</a></li>
          <li><a href="吧啦吧啦"><i class="icon-list-alt"></i> 歷史記錄</a></li>
        </ul>
        <a href="#articleMenu" class="nav-header menu-first collapse" data-toggle="collapse"><i class="icon-book icon-large"></i> 用戶管理</a>
        <ul id="articleMenu" class="nav nav-list collapse in menu-second">
          <li><a href="吧啦吧啦"><i class="icon-user"></i> 用戶信息</a></li>
          <li><a href="吧啦吧啦"><i class="icon-list"></i>更改密碼</a></li>
        </ul>
      </div>

　　　　剛纔喊我改是由於原來默認是側邊菜單收起的狀態，就是這樣的： 這個對應的<ul>的class是collapse

　　　　而後那邊老大說最好仍是sidebar默認進去以後就是展開吧，而後就給ul的class改爲了collapse in  效果天然就是展開了：

　　　　最開始不知道怎麼改,後來直接查的bt的css文件，查到有這麼個類

　　　　這個類在css裏定義是：.collapse.in{......}，剛看到的時候還沒反應過來，其實.collapse.in指的類就是class="collapse in"

　　　　而後側邊導航欄的問題就解決了

 

 

　　　　2.第二個碰到的問題就是數據交互的問題，雖說用的是.net後端又有強類型，可是強類型的佈局真的很蛋疼啊，並且微信界面的文字要求能夠在後端更換，因此只能用強類型= =....因而我就很好的發揮了強類型的new的做用，不管是class,style或者是id，統統的new一個

　　　　栗子在這裏：

　　　　　　

 @{
        for (int i = 0; i < 7; i++)
        {
        <div class="menu span3">
            <img src="~/img/@(i + 1).jpg" style="margin-left:10px;margin-top:10px;width:230px;height:230px;" />
            <hr />
            　　<span style="text-align:center;font-size:small;">封面名稱: </span>
            　　<span id="@(i)" class="aaa@(i)" style="text-align:center;font-size:medium;">@Html.DisplayFor(modelItem => Model[i].Name)</span>
            <br></br>
            <div style="float:right;">
            <i class="icon-pencil"style="color:#005580;"></i>
　　　　　　　　　　<a href="#myModal" id="@(i)" role="button"  data-toggle="modal" style=" font-size:15px;" onclick="getname(this)">編輯封面</a>|
            <i class="icon-leaf"style="color:#005580;"></i><span style="font-size:15px;">  
　　　　　　　　　　　@Html.ActionLink("更改文章", "AddArticle", new { id = Model[i].Id }) </span>
            </div>
        </div>
        }
    }

　　　　　　不少地方直接就是new{@class="類名"，styel="width:100%;height:50%;....." }這樣直接寫在強類型裏，雖然對代碼的整潔性很大影響，可是項目自己要的緊，也就忍了....其實大部分的前端界面的CSS佈局都是位置啊，背景色或者是點擊以後的效果之類的，這些在bootstrap裏都封裝的很好，直接用什麼加什麼類就行了。這個項目就這麼坑出來的佈局，雖然總體的開發過程比較流暢，可是仍是有不懂的地方，好比說怎麼對Bootstrap元素佈局進行覆蓋，怎麼修改他給寫好的屬性，Bt網上還另外介紹了一種動態的佈局方法:LESS，這個東西下個月有空的話確定是要看的.....