乐帝眼下实习单位属于招聘服务提供方，面向的都是企业方，没有互联网公司一掷千金的豪气，体如今开发项目上，有的项目没有原型、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样式统一、适当大小、居中等问题、样式要鲜明区分、去掉不适合的边框。

    整体来说，此项目须要实现的布局及交互都相对简单，难点在于理解后台对项目的描写叙述上，这时候项目的进度取决于对项目的理解程度上，所以做项目并不不过写程序，对特定行业业务逻辑的了解，将有助于项目的高速实现。其次移动端项目尽量轻交互，当乐帝在加页面提示时，才发现整个项目运用了太多ajax请求，项目有点重了，有些请求能够后台直接渲染，要比异步体验好一些。