微信client内部推荐项目总结

如今实习的公司在面向企业提供招聘服务领域数一数二，而下半年的产品重点就在于移动端微信招聘项目。而这次内推项目开发属于微信招聘一个分支。

   
一、内推综述

   
乐帝之前读《招聘与录用》这本HR教材时，将企业外部招聘分为几个层次，基层员工招聘电视或报纸广告就可以。

知识性员工和中层管理人员採用人才市场和网络招聘就可以。对于高级管理和技术人才就得考虑採用猎头来招聘了。而内部推荐同事、朋友介绍和推荐算是一个独特的途径，这样的途径获得的人才往往更可靠。

   二、内推网评价

   互联网创业者也有针对原有招聘渠道的短板进行单点突破创立了内推网。内推的优势就是传统招聘的劣势，内推网创始人的观点能够归结为下面几点：

• 传统招聘系统的构建是基于面向HR来构建产品系统，而HR渠道走得流程比較长，对现代点对点的沟通效率相对低效。
• 传统招聘对招聘职位内容及职位要求描写叙述千篇一律，构成信息不正确称。
• 传统招聘站点投递是多对多的关系，海量信息造成效率低下。
• 猎头或HR对详细职位要求不了解，招聘人员不匹配。
• 初创团队不能承受猎头高费用，即费用承受能力有限。

   针对以上问题，内推网创始人给出的解决方式例如以下：

• 招聘系统由单纯HR通道变成多通道，主管、员工都能够招人，构成C2C模式。
• 直接招聘需求方进行招聘，能够对职位要求的更清晰。

• 人为限制招聘者公布职位数量以及限制应聘者公布简历次数。
• 内推网公布职位仅仅须要认证公司邮箱。绑定邮箱后就能够搜索人才。

    从《创新者的解答》这本书观点。乐帝分析了一下。未来招聘行业就如同银行这个行业，HR或银行收银员都会消失，可是作为公司文化的融合剂的职位却不会消失，所以从这一点看。内推网的方向也是对的。

同一时候其看重的面向群体也恰到优点。即不在乎招聘服务质量，能有低廉的服务就好，“有比没有强”的用户，用户选择也正确。

总的来说消灭HR、低价服务才是内推网的核心。

    恰恰是这两点核心是传统招聘站点不敢颠覆的，由于HR与服务收费是其盈利的根本。假设两者都没有那相当与自掘坟墓。而这恰是内推网颠覆的点。其它内推网创始人提到的点，真不算招聘的硬伤。由于乐帝体验内推网。发现信息不正确称是天然的。内推网并没有解决这些问题。

   乐帝估计未来一段时间传统招聘还会处于统治地位，内推网想高速崛起有两条路：

• 利用校招内推，借校招之势，将内推网推到风口。
• 取得投资，大肆投广告，硬生生打开局面。

   眼下内推网的盈利模式与招聘站点无二，也是通过投广告和卖简历赚钱，并伴随一些自己主动化猎头服务。

   以上分析可知，内推网并没有远离传统招聘模式。而仅仅是在传统招聘模式下。拉出一个内推的模块进行单点突破，当然未来前景还要看创始人对整个传统招聘流程的颠覆。眼下看来还远远不够。

   
三、内推系统流程构建

    乐帝所从事微信client内推项目从各方需求考虑。企业内推减少招聘合适人才成本。员工拥有帮助亲朋好友及获得内推奖励。被内推者则获得工作机会。从需求角度考虑，是三方共赢的。

既然三方有需求，那么三方就构成利益相关方。内推系统的构建也要环绕这三方来构建。

    需求部门释放职位需求到需求池——>员工选择职位并填入被内推人基本信息——>被内推上传或填入简历登记表——>简历进入需求池。内推流程结束——>回归正常招聘流程。

   在有了上述流程后，乐帝通过近期项目预计工期的神器思维导图工具MindManager。首先，构建了项目页面间逻辑流程图：

  參见资源地址：http://download.csdn.net/detail/yingyiledi/8162833

  然后依据逻辑图。确定须要的页面种类及页面内部架构图：

内推页面架构图

    上述内推页面架构涉及到PC端向移动端迁移用到的设计思维，移动端相比于PC端视窗较小，页面构建更加趋于瀑布流方式，即将本来平行的页面压缩成竖行的页面，或者将其改造成button显示或隐藏的交互方式，以适应移动端信息展现的特点。

   有了上述页面架构及关键UI部件，剩下的就是对交互的详细构建了。乐帝通过分析上述两个文件，构建了项目的交互流程图:

    有了上述对项目流程、页面UI部件、页面交互逻辑的分别构建之后，整个项目的逻辑及工作量一目了然。剩下的就是一些技术实现的问题了。

   四、内推系统技术细节

   关于项目技术实现的细节乐帝写了对几个大的知识点进行了研究总结。

  參见：

• 《前端编程提高之旅（九）----延迟对象》
• 《前端编程提高之旅（十）----表单验证插件与cookie插件》
• 《前端编程提高之旅（十一）----jquery代码的组织》
• 《前端编程提高之旅（十二）----position置入值应用》

       下面内容是内推系统中涉及到不太复杂知识点的总结：

 
样式部分：

  1.css reset

   项目採用了jquery mobile。jquery mobile实现高度模块的同一时候，也牺牲了个性化定制的效率。

个性化定制样式之前须要引入css reset用于重置样式。乐帝採用了玉伯的解决方式，以后须要在整个项目中统一引入。来重置样式。

 
2.字体及边距的设置单位

   乐帝在移动端採用em的单位，是考虑到移动端的伸缩效应，em单位会随着浏览器默认字体的大小，伸缩适应页面字体及宽度变化。

 
3.button样式的设置

  button出于美观考虑。能够设置三点：圆角、盒子内阴影、盒子外阴影。

盒子内阴影可通过box-shadow的inset属性来设置。

默认是外阴影设置。

 
4.iframe使用场景

  业务上登录页面的跳转，为了使页面切换更加流程。使用了iframe设置登录页面，仅仅在页面内跳转，用户等待时间更短。当然此时iframe宽和高需设置成100%。同一时候去除边框。

  5.预格式文本的处理

  项目中预格式文本通过pre标签框住，但这就有长文本不换行的风险。採用例如以下css样式解决长文本不换行与多余空格问题：

word-break: break-all;
word-wrap:break-word;
white-space: normal;

 6.页面涉及到文字尽量使用细体字,button以及菜单项採用粗体。

  交互：

 
1.页面元素如需预先隐藏，尽量用css display：none实现，假如写到js代码中。dom载入完成运行js代码会有一个时延问题。

  2.jquery mobile切换页面不管是採用html结构内书写还是通过api接口实现切换，为了流畅切换，都尽量使切换效果为none。

  3.採用搜索或菜单隐藏button时，要考虑到是否将数据重置的问题。

  微信接口调用：

 
1.

title=%E9%9A%90%E8%97%8F%E5%BE%AE%E4%BF%A1%E4%B8%AD%E7%BD%91%E9%A1%B5%E5%8F%B3%E4%B8%8A%E8%A7%92%E6%8C%89%E9%92%AE">微信公众平台开发人员文档中提供了四个微信JS接口。本项目用到两个：用于控制右上角button隐藏与显示、微信页面的关闭。接口的用法基本是引入代码到页面指定逻辑就可以。

  2.设置分享到朋友圈以及分享给微信好友都涉及到微信对应接口的使用。即对对应button事件进行绑定，并回调配置函数，本项目中主要涉及URL加入一个来源字段的设置。

function sharePage(imgUrl, lineLink, descContent, shareTitle) {
     imgUrl = imgUrl || '';
     lineLink =lineLink || window.location.href;
     descContent = descContent ||  '';
     shareTitle = shareTitle ||  '职位分享';
 
    function shareFriend() {
        lineLink += "&fromMedia=shareByfriend";//加入分享自朋友字段
        WeixinJSBridge.invoke('sendAppMessage', {
            "img_url": imgUrl,
            "img_width": "640",
            "img_height": "450",
            "link": lineLink,
            "desc": descContent,
            "title": shareTitle
        }, function (res) {
            //_report('send_msg', res.err_msg);
        });
    }
    function shareTimeline() {
        lineLink += "&fromMedia=shareBytimeLine";//加入分享自朋友圈字段
        WeixinJSBridge.invoke('shareTimeline', {
            "img_url": imgUrl,
            "img_width": "640",
            "img_height": "450",
            "link": lineLink,
            "desc": descContent,
            "title": shareTitle
        }, function (res) {
            //_report('timeline', res.err_msg);
        });
    }
    function shareWeibo() {
        WeixinJSBridge.invoke('shareWeibo', {
            "content": descContent,
            "url": lineLink,
        }, function (res) {
            //_report('weibo', res.err_msg);
        });
    }
    // 当微信内置浏览器完毕内部初始化后会触发WeixinJSBridgeReady事件。
 
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        try {
            var title = $('title');
            if (title != null) {
                shareTitle = title.text();
            }
        } catch (e) {
 
        }
        // 发送给好友
        WeixinJSBridge.on('menu:share:appmessage', function (argv) {
 
            shareFriend();
        });
 
        // 分享到朋友圈
        WeixinJSBridge.on('menu:share:timeline', function (argv) {
            //shareTitle = prompt("输入分享的标题", shareTitle);
 
            shareTimeline();
        });
 
        // 分享到微博
        //WeixinJSBridge.on('menu:share:weibo', function (argv) {
        //    shareWeibo();
        //});
    }, false);
}

 五、相关工具的使用

  1.ps抠图

   在没有提供UI图及图标的情况下，乐帝通过网上搜图标或搜图片构造项目使用的图标。这里面就涉及到用PS抠图。

   乐帝这次抠图主要使用PS魔棒工具。

   第一步：选取魔棒工具。并採用shift+鼠标左键方式选定扣中区域。这个能够通过设置容差调节抠图选择精度。

   第二步：鼠标右键选择复制图层，将抠图部分加入到新的图层。并设置原图图层不可见。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="600" height="300" alt="">

   第三步：选择切片工具，将新图层抠图部分选中，构成单独一个切片。

  第四步：文件里选中存储为web所用格式。此时切片被存储到本地。

  第五步：去桌面找到image目录，找到切好的图标。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="600" height="300" alt="">

 
2.Fiddler2使用

    前端开发很注重所见即所得的问题，但开发移动端微信项目，仅仅能到远程server上操作才干实现此功能，但远程server上的操作笨重且缓慢。这里採用了一个软件fiddler。

    此软件能够截获本机HTTP请求。

  并通过加入规则。如果请求匹配就採用本地相应文件响应，这样就能够将远程项目，在本地开发并实时查看效果，注意点选同意自己主动响应选项才干開始此功能。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="600" height="300" alt="">

   六、实际项目图

   见乐帝网盘分享地址：http://yunpan.cn/cAm6Z5zgHyqzv  訪问password b663