這一個多月，開發(fā)了一個微信公眾號的微信H5商城。
地址：
技術(shù)棧
前端：jQuery + rem + flex
后臺： java
前言
公司一共兩個前端，我負責(zé)一個后臺管理系統(tǒng)項目，一人獨立前端開發(fā)。另外一個同事A前端開發(fā)這個公眾號商城。由于公司開發(fā)策略有變，公眾號商城放在首位，我被迫放在現(xiàn)有項目，加入商城開發(fā)。
我是一個接盤俠
所謂接盤俠，就是接別人的爛攤子，繼續(xù)開發(fā)，所以我可以算是二次開發(fā)？
接手項目
加入項目，此時頁面大概有10多個，已經(jīng)寫得差不多了，但只是靜態(tài)頁面，后臺接口還沒有。我心里美滋滋的，心想還不錯，不用我來寫頁面，直接等后臺接口渲染數(shù)據(jù)加載，優(yōu)化下就完事了。
直到我真正看到代碼的時候
我所認為的問題
- 文件目錄混亂
- class id 等命名不規(guī)范樣式
- 樣式大多使用標簽選擇器
- 代碼混亂
溝通與處理
畢竟我來公司也兩個月了，但一直都是獨立一人開發(fā)項目，和同事A也沒有多大的接觸，只有時聊天，說說前端流行的東西，也略知其水平一二。
由于這個項目已經(jīng)開發(fā)了一段時間了，目錄結(jié)構(gòu)再改要花更多時間，迫于時間不能改了，只能順著A的路徑走了，后來到了現(xiàn)在項目上線了，隨著文件的增多，目錄結(jié)構(gòu)越來越亂，找文件的時間也花得比較多，也挺懊悔當初沒有改回來，導(dǎo)致現(xiàn)在找文件速度有點慢。
此時頁面也差不多寫完了，命名不規(guī)范，樣式混亂我能怎么辦，我也相當無奈，也不能一個個地找，一個個地改回來吧，現(xiàn)有的就只能隨他去吧，我看了代碼之后也細心明確告訴A，他寫的代碼的不足之處，后來到現(xiàn)在好一點了，也許還需要點沉淀與積累吧？
關(guān)于標簽大量使用了標簽選擇器和 :nth-child() ，而沒有正確使用class出現(xiàn)的問題。一開始我也沒覺得是個問題，后臺等到需求不斷變的時候，功能不斷變化，有時候在這個div里加上一個內(nèi)容，之前使用標簽選擇器和:nth-child()來控制樣式會變得非常致命。這就為什么大牛都推薦使用class來控制樣式的原因吧。
共同開發(fā)
雖然A水平?jīng)]有自己好，但是還要一起開發(fā)的，我只能自己接手比較難的模塊，簡單點的模塊就交給A。
由于靜態(tài)頁面與渲染數(shù)據(jù)、事件綁定有緊密聯(lián)系，所以最好一個模塊當中，html、css、js都要自己來寫會比較好，自己對頁面內(nèi)容，事件的把控都會比較熟悉。
開發(fā)中出現(xiàn)的問題
移動端適配
所謂移動端適配，就是要根據(jù)移動設(shè)備的屏幕大小來顯示適當比例的內(nèi)容與圖像。因為A沒有做過移動端，沒有考慮到適配問題，這讓我相當無奈，因為當時我接手的時候頁面已經(jīng)差不多寫完了。沒辦法，只能一個一個地改，所以說，剛開始真的很重要很重要，直接影響了之后的開發(fā)與迭代了。
使用rem.js
我是通過使用rem單位和一個rem.js來解決移動端適配問題。
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
通過獲得屏幕的寬度大小，來改變html的font-size
用戶錯誤操作提示
很多時候用戶都會有一些誤操作，比如填寫表單的時候手機號碼不正確或者漏填信息、后臺接口錯誤提示等等，都應(yīng)該給予適當?shù)恼`操作提示，一開始我是使用alert()直接完事，但用戶體驗相當不好，尤其是移動端，相當難看而又讓用戶再點一次，感到惡心，后來模仿其他平臺做法自己寫了一個通用方法彈出層進行錯誤提示。
//HTML
<div class="tips" style="display: none">
<div></div>
</div>
// CSS
.tips {
position: fixed;
top: 42%;
width: 100%;
left: 50%;
text-align: center;
z-index: 999;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tips>div {
display: inline-block;
margin: 0;
padding: 0.2rem 0.3rem;
text-align: center;
color: #fff;
font-size: 0.6rem;
text-shadow: 1px 1px 1px #000;
border-radius: 50px;
/*line-height: 1.5rem;*/
background: rgba(0,0,0,.8);
}
// JS
function showTips(text) {
$('.tips>div').text(text).parent().fadeIn().fadeOut(2000);
}
需求不明確
這個問題相當重要，直接影響你的開發(fā)進度和心情。由于需求不明確，往往在開發(fā)當中，等你寫完了這個頁面或者開發(fā)完這個功能之后，很有可能需求發(fā)生更改，UI很可能會變，所以當你寫完一個頁面之后，產(chǎn)品和UI告訴你，"之前的那個頁面老板說不好看，需要重做，這個是最新的頁面" 我想你會相當崩潰的，直到我三番四次地改，我才發(fā)現(xiàn)了這個問題的嚴重性?？尚尚?/p>
意見
- 先做你覺得不會改變的頁面和功能
- 一個頁面中，很可能只有一塊是不確定的或者改來改去的，這塊可以先放下，不要做
兼容性處理與多測試
往往在瀏覽器中調(diào)試是不會出現(xiàn)問題的，等到真的放上服務(wù)器，用真機測試時，會出現(xiàn)各種各樣的問題。
首先，在開發(fā)過程中，有條件和時間的話，可以開啟一個本地服務(wù)器，多在真機中測試。而一些微信支付、微信分享等功能需要放到服務(wù)器上測試的，就要多測試，基于微信公眾號開發(fā)，調(diào)用微信JDK，這也沒什么辦法的。
安卓端、IOS端
IOS微信瀏覽器是自帶一個返回鍵的，而安卓端有些是用home鍵來控制返回，有些是沒有返回的，例如在下單頁面中，需要填寫用戶收獲信息，我會在同一個頁面來進行，利用一個彈出層來控制，頁面來會有一個關(guān)閉按鈕，確保安卓端與ios都可以點擊關(guān)閉，而不是按"返回"，返回到上一個頁面，這個流程就是不對的，所以在開發(fā)中，要與產(chǎn)品溝通好，了解整個流程，確保安卓端以及IOS端的流程一致，避免一些不必要的開發(fā)。由于使用了比較笨重的jquery，其他兼容性問題出現(xiàn)得比較少，如有出現(xiàn)，直接Google，搜一下，相信就有解決方法了。
總結(jié)
這個項目中，整個團隊都是從零出發(fā)，需求不明確，在開發(fā)中遇到的問題還是比較多，與同事交流討論也比較多，大家一步一步討論、一步一步優(yōu)化以及提出自己的建議，每個人都盡力做好自己的事情，在開發(fā)過程中還是挺開心的，等到真的測試上線了，看到自己做的東西，心情又會很開心。我知道自己代碼還是寫得不夠好，還是不太會利用面向?qū)ο蠓绞絹砭幊?，相信下次會越來越好?/p>
致自己，加油。
