微信移動端招聘項目總結

      樂帝眼下實習單位屬於招聘服務提供方，面向的都是企業方，沒有互聯網公司一擲千金的豪氣，體現在開發項目上，有的項目沒有原型、UI，整個項目開發過程，就是先後端「腦補」的過程，而這個過程是很考驗project師理解力和對產品設計的功力的。近期從事的微信移動端招聘當屬此列。

    PC端招聘進行的如火如荼，而就像各行各業將來都是互聯網企業同樣，移動化是互聯網現在及將來不可逆的趨勢。那麼爲何又選擇微信端，而不是移動站點或app呢。app問題在於公佈修改較大的新版本號，除非逼迫用戶升級，不然用戶是體驗不到新功能、新設計的。而招聘這屬於工具類的需求，實在不能對使用者即HR有過高的需求，「永遠不要高估用戶的智力」。移動站點與app相似都不能對用戶有過高期待，這裏不是說移動站點需要升級，而是不能對用戶使用移動瀏覽器輸入網址有過高指望。這樣推下來，微信用戶羣廣，用戶較爲熟知，且加微信公衆號較簡單，後臺更新方便，是比較合適的招聘業務突破口。

   微信招聘系統分爲三個主功能塊：任務管理、用戶管理、幫助中心。

    上述主功能模塊下又有子模塊。任務管理模塊下有：面試反饋模塊、offer審批模塊、職位審批模塊、篩選簡歷模塊。用戶管理模塊下實用戶解綁模塊。幫助中心則爲主模塊。

   主要頁面流程例如如下：

    任務管理模塊下四個子模塊，進入展現的頁面都分爲未完畢和已完畢的任務列表，僅僅是依據接口不同，設置頁面標題不一樣。

     任務列表分爲未完畢和已完畢兩部分數據，數據列表項設置單擊事件，跳轉到任務詳情頁。任務詳情頁有幾個button。button下方則是經過iframe引入的簡歷。單擊button會進入評價頁。

     offer審批模塊及職位審批模塊都採用上述頁面跳轉邏輯，差異僅在於任務詳情頁button是兩個而不是三個。篩選簡歷模塊則在任務詳情頁以前，多出一層篩選列表頁面。

    綁定頁面則是經過用戶輸入郵箱，發送到server，用戶發送成功，會要求用戶掃描二維碼。

    在掃二維碼成功後，會有個提示頁，提示用戶再度用公衆號使用招聘功能，此時用戶已經與公衆號實現綁定。

    解綁模塊，則設置一個button用於解綁，當解綁成功設置提示。

     按照上述項目邏輯，將項目文件定界爲usercheck（用戶驗證頁）、checklogin（登陸成功頁）、UnlockUser（用戶解綁頁）、Main（用戶進入任務管理通用頁：任務列表）、Detail（面試反饋詳情頁）、offerOrJobDetail（offer審批和職位審批詳情頁）、filterDetail（篩選簡歷詳情頁）、filterList（篩選列表）、Helpinfo（幫助中心頁）。

    接下來就是開發階段了，如上所述，此項目沒有思惟導圖、原型圖、UI圖，上述邏輯依靠腦補所得，開發階段涉及四個階段：

• 完畢初步接口調試
• 完畢大體頁面邏輯
• 公司內部測試、尋求改良意見
• 綜合建議、對尺寸、UI、內容提示、邏輯進行優化

    項目實現：

    項目採用技術是jquery mobile，jquery mobile特色是高度集成化，另外在開發過程當中由於微信端不方便調試，因此採用的方法是將相似代碼放到本地，調試好，再將對應樣式放到微信端代碼中。

    jquery mobile增長不少默認樣式，此時如實現本身定義UI ：

 data-role="none"

          是很實用的一句代碼。

   任務列表項，則經過設置循環綁定監聽事件，構造了單個列表項跳轉邏輯。同一時候設置載入不少其它button，每次多載入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請求完畢，隱藏提示信息。設置button防止反覆提交也與此相似，差異在於設置標誌位，用條件推斷返回，仍是設置buttondisable屬性。標誌位：

 var flag = true;
    $("input[type='submit']").click(function(){
      if(!flag)
      {
        return
      }
      flag = false;
    })
  })

   設置disable屬性：

(function ($) {
    
    $('.J-login').click(function () {
    
        var loginBtn = this;
        
        //1.先進行表單驗證
        //......
        
        //2.讓提交button失效，以實現防止button反覆點擊
        $(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.讓登錄button又一次有效
                    $(loginBtn).removeAttr('disabled');
                }
    
            }
        });
        
    });
    
})(jQuery);

   如下是內測後，改進意見整理：

    針對上述改進意見，樂帝總結出一些之後注意的問題：

    內容提示（使用戶操做流暢、交互及沒有數據時保證正常邏輯）、UI樣式統1、適當大小、居中等問題、樣式要鮮明區分、去掉不適合的邊框。

    總體來講，此項目需要實現的佈局及交互都相對簡單，難點在於理解後臺對項目的描寫敘述上，這時候項目的進度取決於對項目的理解程度上，因此作項目並不不過寫程序，對特定行業業務邏輯的瞭解，將有助於項目的高速實現。其次移動端項目儘可能輕交互，當樂帝在加頁面提示時，才發現整個項目運用了太多ajax請求，項目有點重了，有些請求可以後臺直接渲染，要比異步體驗好一些。