樂帝目前實習單位屬於招聘服務提供方，面向的都是企業方，沒有互聯網公司一擲千金的豪氣，體現在開發項目上，有的項目沒有原型、UI，整個項目開發過程，就是前後端“腦補”的過程，而這個過程是非常考驗工程師理解力和對產品設計的功力的。最近從事的微信移動端招聘當屬此列。
PC端招聘進行的如火如荼，而就像各行各業未來都是互聯網企業一樣，移動化是互聯網現在及未來不可逆的趨勢。那麼爲什麼又選擇微信端，而不是移動網站或app呢。app問題在於發佈改動較大的新版本，除非逼迫用戶升級，否則用戶是體驗不到新功能、新設計的。而招聘這屬於工具類的需求，實在不能對使用者即HR有太高的需求，“永遠不要高估用戶的智力”。移動網站與app類似都不能對用戶有太高期待，這裏不是說移動網站需要升級，而是不能對用戶使用移動瀏覽器輸入網址有太高期望。這樣推下來，微信用戶羣廣，用戶較爲熟知，且加微信公衆號較簡單，後臺更新方便，是比較合適的招聘業務突破口。
微信招聘系統分爲三個主功能塊：任務管理、用戶管理、幫助中心。
上述主功能模塊下又有子模塊。任務管理模塊下有：面試反饋模塊、offer審批模塊、職位審批模塊、篩選簡歷模塊。用戶管理模塊下有用戶解綁模塊。幫助中心則爲主模塊。
主要頁面流程如下：
任務管理模塊下四個子模塊，進入展示的頁面都分爲未完成和已完成的任務列表，只是根據接口不一樣，設置頁面標題不同。
任務列表分爲未完成和已完成兩部分數據，數據列表項設置單擊事件，跳轉到任務詳情頁。任務詳情頁有幾個按鈕。按鈕下方則是通過iframe引入的簡歷。單擊按鈕會進入評價頁。
offer審批模塊及職位審批模塊都採用上述頁面跳轉邏輯，區別僅在於任務詳情頁按鈕是兩個而不是三個。篩選簡歷模塊則在任務詳情頁之前，多出一層篩選列表頁面。
綁定頁面則是通過用戶輸入郵箱，發送到服務器，用戶發送成功，會要求用戶掃描二維碼。
在掃二維碼成功後，會有個提示頁，提示用戶再度用公衆號使用招聘功能，此時用戶已經與公衆號實現綁定。
解綁模塊，則設置一個按鈕用於解綁，當解綁成功設置提示。
依照上述項目邏輯，將項目文件定界爲usercheck（用戶驗證頁）、checklogin（登錄成功頁）、UnlockUser（用戶解綁頁）、Main（用戶進入任務管理通用頁：任務列表）、Detail（面試反饋詳情頁）、offerOrJobDetail（offer審批和職位審批詳情頁）、filterDetail（篩選簡歷詳情頁）、filterList（篩選列表）、Helpinfo（幫助中心頁）。
接下來就是開發階段了，如上所述，此項目沒有思維導圖、原型圖、UI圖，上述邏輯依靠腦補所得，開發階段涉及四個階段：
- 完成初步接口調試
- 完成大致頁面邏輯
- 公司內部測試、尋求改良意見
- 綜合建議、對尺寸、UI、內容提示、邏輯進行優化
項目採用技術是jquery mobile，jquery mobile特點是高度集成化，另外在開發過程中由於微信端不方便調試，所以採用的方法是將類似代碼放到本地，調試好，再將相應樣式放到微信端代碼中。
jquery mobile加入許多默認樣式，此時如實現自定義UI ：
data-role="none"是非常有用的一句代碼。
任務列表項，則通過設置循環綁定監聽事件，構造了單個列表項跳轉邏輯。同時設置加載更多按鈕，每次多加載10項。
data-role="page"上述jquery mobile中設置div類型爲page的代碼，也節省了頁面跳轉邏輯，僅適用錨點就可以實現內部切換頁面，因爲任何時候jquery mobile只展示一個data-role爲page的頁面。
用代碼控制頁面跳轉：
//將頁面url，類型，數據定義爲變量來傳遞。
var pageData = { url: formresults.php, type: 'get', data:$('form#myform').serialize () };
$.mobile.changePage(pageData);本項目中頁面跳轉更多使用window.location.href，用到上述代碼方法只在後期添加過渡效果時，纔開始用，因爲此頁面跳轉可以實現data-role爲page的內部跳轉，也可以實現外部文件頁面間跳轉，未來項目使用$.mobile.changePage(pageData);此方法實現跳轉，更加符合jquery mobile規範，同時格式化更加方便。
爲了設置加載提示與當前頁面在同一個頁面，採用了changePage方法後，查看代碼可知，之前的page被設置爲display:none。此時若設置其display:block即可同時顯示。
任務列表中未完成和已完成兩項、任務詳情和評價頁、後期添加過渡效果響應Ajax請求頁面都採用此方法。
任務詳情頁，有一個iframe引入應聘者簡歷，此處iframe引入的URL與當前項目不在一個域，無法設置iframe內部頁面樣式或尺寸，這裏處理是將iframe寬度設100%。
頁面跳轉用到一個jquery cookie插件，用來保存openid即用戶掃碼後獲取的標識，頁面中跳轉需要保持對用戶的識別，這裏將用戶信息保存到cookie中。
在用戶掃碼後採用了微信開發平臺接口，用於關閉當前網頁。
在本項目中採用了大量的ajax請求，而移動端網絡訪問環境各異，所以在各種事件觸發ajax請求之前，設置一個加載中提示，並在ajax成功返回請求後，關閉此提示，將會對用戶非常友好。
//全站ajax加載提示
(function ($) {
var str = '<div class="ajax-status" style="display: none;">'
+ '<div class="ajax"><img src="' + publicPath + 'img/loading.gif" width="20" height="20" />數據加載中...</div>'
+'</div>';
var dom = $(str).prependTo('body');
$(document).ajaxStart(function(){
dom.stop(true,false).queue(function(){
$(this).show().dequeue();
});
});
$(document).ajaxStop(function(){
dom.queue(function(){
$(this).hide().dequeue();
});
});
})(jQuery);實現思路與上述代碼類似，即在ajax發送請求前，顯示提示加載信息，在ajax請求完成，隱藏提示信息。設置按鈕防止重複提交也與此類似，區別在於設置標誌位，用條件判斷返回，還是設置按鈕disable屬性。標誌位：
var flag = true;
$("input[type='submit']").click(function(){
if(!flag)
{
return
}
flag = false;
})
})設置disable屬性：
(function ($) {
$('.J-login').click(function () {
var loginBtn = this;
//1.先進行表單驗證
//......
//2.讓提交按鈕失效，以實現防止按鈕重複點擊
$(loginBtn).attr('disabled', 'disabled');
//3.給用戶提供友好狀態提示
$(loginBtn).text('登錄中...');
//4.異步提交
$.ajax({
url: 'login.do',
data: $(this).closest('form[name="loginForm"]').serialize(),
type: 'post',
success: function(msg){
if (msg === 'ok') {
alert('登錄成功！');
//TODO 其他操作...
} else {
alert('登錄失敗，請重新登錄！');
//5.讓登陸按鈕重新有效
$(loginBtn).removeAttr('disabled');
}
}
});
});
})(jQuery);下面是內測後，改進意見整理：
針對上述改進意見，樂帝總結出一些以後注意的問題：
內容提示（使用戶操作流暢、交互及沒有數據時保證正常邏輯）、UI樣式統一、適當大小、居中等問題、樣式要鮮明區分、去掉不適合的邊框。
總體來說，此項目需要實現的佈局及交互都相對簡單，難點在於理解後臺對項目的描述上，這時候項目的進度取決於對項目的理解程度上，所以做項目並不僅僅是敲代碼，對特定行業業務邏輯的瞭解，將有助於項目的快速實現。其次移動端項目儘量輕交互，當樂帝在加頁面提示時，才發現整個項目運用了太多ajax請求，項目有點重了，有些請求可以後臺直接渲染，要比異步體驗好一些。