微信移动端招聘项目总结

      乐帝眼下实习单位属于招聘服务提供方，面向的都是企业方，没有互联网公司一掷千金的豪气，体现在开发项目上，有的项目没有原型、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请求，项目有点重了，有些请求可以后台直接渲染，要比异步体验好一些。