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