一，引言
微信相信已经成为当下社会人手机必装的几个App之一，从一开始的饱受质疑以及不被看好到如今的将近八亿用户量，微信一直在以一种独特的方式影响着中国移动互联网App生态链。2017年1月9日，微信掌门人张小龙宣布微信小程序正式上线。什么是微信小程序，张小龙说： “小程序是一种不需要下载、安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即开打开应用，也出现了用完即走的理念，用户不用关心安装太多应用的问题，应用随处可用，但又无须安装卸载”。这段话体现了小程序的作用和意义，总结一下就是：“用完即走，无额外负担的轻量化工具”。最近几天看网页版Boss直聘，觉得整体风格很不错，结合Boss直聘作为工具类产品的定位，很符合微信小程序“用完即走”的理念，便萌生了做一个Boss直聘的微信小程序的想法，话不多说
先贴出效果图
我们做的这个微信小程序功能上很明确，就是为用户提供一个方便的查找信息的入口，在首页你可以在搜索框输入你想要查找的职位信息，比如搜索“北京”会跳出北京市的职位，搜索“Web前端”会出来对应的结果，点击每个结果会跳转到对应的信息详情页，在详情页你可以查看具体岗位需求和联系人以及公司信息等信息。
项目路径：
二，准备工作
1.微信Web开发者工具（我用的是0.15.152900版本，其他版本可能会有些许变化，具体请参考微信官方更新日志）。
2.一个顺手的编辑器，虽然微信官方提供的开发工具编辑功能也不错，不过还是比较喜欢自己调教好的Atom(毕竟是来自未来的“hackable text editor“，笑~)。
3.Easy-Mock，一项简单好用的数据生成服务，她可以帮助我们模拟后台数据。
4.一颗不轻言放弃的心（逃~）。
先来看一波开发工具界面
毕竟”鹅厂“出品，还是很漂亮的有木有~
我们主要用到的就是位于开发工具最左边靠上的三个选项卡
1.编辑，顾名思义，就是我们主要的代码显示和编辑区域。
2.调试，和chrome自带的调试器很像，主要输出调试信息，基本功能都实现了。
3.项目，在这里你主要可以生成二维码以便在手机上直接查看真机运行效果，另外还提供一些其他的实用设置。
编辑和调试选项卡在右边都会显示一个实时预览的小程序界面，每次保存都会实时刷新，很方便~
相信细心的你一定发现了文章一开始贴出的项目路径里显示的文件里奇怪的文件后缀名，其实这不是什么新东西哦，这只是微信小程序官方为了和传统意义上的HTML/CSS区分开而新推的专门用于小程序开发的文件格式，wxml对应传统的html，wxss对应css，js后缀格式保持不变。
到这里是不是手已经开始痒了？现在就开始动手吧~
三，Link-Start！！！
1.定义全局样式
先让我们创建一个新项目
创建好项目后，一些文件夹开发者工具会自动帮我们创建好，如图
1.pages是小程序的主要目录，里面放着你的小程序的页面文件（比如自动生成的index文件夹下放着的就是主页的结构以及样式等文件）。
2.utils里放着一些微信自带的处理函数，当然你也可以自己编写。
3.名字为app的三个文件定义了全局的一些数据和样式等等。
现在先让我们到app.json文件定义一些全局的数据
这是JSON格式的数据，里面的一些API定义了我们微信小程序的外貌基本样式，pages表示的是微信小程序的page页面路径，window定义的是内容区以外的样式，比如”navgationBarBackgroundColor“,意思就是标题栏的背景颜色。以下是一些常用的配置属性
另外值得一提的是微信小程序官方原生提供了对tabBar开发的支持，只需要在app.json文件里简单配置一下tabBar的属性，就可以直接生成对应的tabBar，省去了自己写样式的时间，提高了开发效率，给企鹅点个赞~详情请看微信小程序开发者文档。
2.完成主页的开发
先来看看我们的主页
可以看到，页面上部是一个搜索框，负责帮助使用我们小程序的人快速找到自己想要的职位，搜索框以下的部分是我们的职位分类以及细化岗位，整个页面结构还是很清晰的，这里实现的功能有在搜索框搜索关键词会跳转到搜索页并显示对应的搜索结果，当然你也可以直接点击搜索框下面的细分职位，也能跳转到对应的搜索结果界面。
什么？view是什么标签？text又是什么标签？怎么都是些没见过的标签名呢？哈哈，其实她们都是纸老虎，并不是什么全新的东西，相信聪明的你也看出来了，view标签对于着的是我们平时开发是用的最多的类似div一样的块级标签。text标签对应着的是span，p标签，不过和view标签不同的是text可是一个行内标签哦。想知道更多框架请参考微信开发者文档组件篇。
代码中的bindTap，data-index则是负责数据绑定的，比如给一个view标签添加一个bindTap属性，其实就是为该标签添加了一个手势单击事件，后面的属性名表示对应着index.js部分的事件处理函数，如bindtap = "bindSesrch"则表示为该标签绑定一个Tap事件触发bindSearch函数处理，同理，bindinput = "bindInput"就是为当前输入框绑定一个输出事件触发时对应的bindInput处理函数（双引号内的是自己定义的函数名，虽然没有硬性规范，但最好还是取个自己和他人都能一眼看出函数作用的名字吧~），在wxml页面对应标签绑定好相应的函数后，我们就可以跳到对应的js页面编写我们的函数了。
从前面的分析我们知道搜索页其实是由一个搜索框和几条搜索项组成，这和我们现在模拟的情况有哪些相同又有哪些不同呢？
对，没错，那就是对于每条搜索结果来说，信息在每个项里的位置和格式基本是不变的，只是数据上发生了变化，那么我们就可以这样考（tou）虑（lan）：只编写一个项目的模版，但是在对应需要存放数据的地方留好接口，这样我们可以调用微信小程序官方提供block标签的"wx:for","wx:key"属性来把对应的数据通过循环来插入我们的模版里，有多少数据就生成多少个实例。
页面数据部分我们采用Easy-Mock来模拟后台数据，登陆Easy-Mock后建立新项目编辑好我们需要的数据，因为我们后面会涉及根据不同的搜索关键词返回对应的结果，所以这里模拟数据可以多元化一些，尽量体现每个数据的差异性。这是我们模拟好的数据接口（Easy-Mock官网有详细的文档介绍使用，对这一步感觉有些陌生的同学可以去官网看文档）。
那么数据我们有了，接下来怎么把她放到页面上去呢？
这时我们就需要在需要放置数据的地方先定义好一个变量，采用双大括号包裹一个变量的形式，类似这样"{{你自己定义的变量名}}"。接下来只要在search.js文件写好对应的实现函数就能把模拟的数据给渲染上去了。
页面样式部分编写和传统CSS样式编写一致，需要查看的同学请到我的github上查看样式源码。
到这里我们搜索页部分的静态部分就介绍完了。
现在让我们来到JS部分，进行功能的编写
第一项“var app = getApp”用于获取应用实例，Page项则存放我们需要的一些数据以及函数。
当页面中元素绑定的事件产生时便会触发这里定义好的函数以实现对应的功能，我们这里详细讲述下使用官方API实现数据渲染的实现细节：
如图，data对象存放我们需要的数据，因为我们的数据是从后台渲染的，所以这里先定义一个空数组用以接收等下传过来的数据，onLoad函数是指页面加载完成后生效的函数，在这里我们使用了官方提供的一个API，"wx.request"，这个API用以对我们的数据url发起https请求，获取到我们需要的数据，接下来我们用setData方法把数据放到我们需要她的地方。
有数据了，我们就可以开始编写我们的搜索部分了，先在home.js做好传递用户搜索值的判断逻辑，如图
我们这里可以看出，用户搜索关键词有至少四种情况
1. 用户搜索工作城市
2. 用户搜索岗位名称
3. 用户搜索公司名字
3.用户在没输入值的情况下点击了搜索按钮
（还有更多的情况比如搜索薪资，工作经验等等实现逻辑基本相同，这里仅提出部分情况供参考）。
这样主页部分的编写基本可以告一段落了。
3. 完成搜索页的开发
现在我们来到搜索页，搜索页的结构和样式在我的GitHub上有源码，欢迎指点:），
还记得我们在home.js页面定义过一个searchValue值，用以在页面之间传参吗？现在我们可以用上她啦，我们在search.js的onLoad事件（页面加载完成后执行）里也定义一个叫searchValue的值来存放从home.js页面接受到的用户输入的值
，获取到了用户输入的值，我们就可以根据用户输入的值做搜索逻辑的判断啦
如图，我们先定义好一个空数组resultArr用来存放搜索的结果，再定义一个searchArr用来存放我们的数据，下面就是用if语句来进行一个搜索的匹配。从代码可以看出，我们目前做的只是一个简单的值对值匹配，用户输入“北京”，就会显示所有在北京的职位，输入“搜狗”，则显示搜狗公司的所有职位，那么当用户输入“北京市”时，我们的小程序就找不到北京的结果了，这个时候我们可以采用正则表达式来完成一个模糊搜索功能的开发，篇幅有限就不细讲了，同学们可以自行完成。
现在再来看看我们的搜索页
我们在这里也做了一个 搜索框，方便用户想进一步搜索时直接在本页面进行搜索而不用回退到主页，这里的搜索逻辑和上面提到的基本一样接下来。有需要的同学可以去我GitHub上看源码。
我们在主页搜索完跳转到搜索页显示结果的这个过程中，可以调用官方提供的API，wx.showLoading来显示一个搜索中的提示，wx.showToast也能完成同样的目的，她们的区别在于showLoading要手动调用hideLoading在合适的时候关闭，shouToast可以自定义显示的图标以及持续事件，但整体上不如前者使用灵活。
4.完成详情页的开发
详情页主要负责信息的显示，整体思路和主页基本一致，在这里我们又用到了官方的一个地图组件用以显示不同公司的公司地址
--
map标签可以为我们创建一个地图组件，我们只要传入对应的经纬度就可以让地图显示对应的位置，添加一个show-locaton属性就可以显示一个带有方向的定位点。其他属性请参考微信官方文档。
四.尾语
到此，我们的Boss直聘微信小程序开发就告一段落了，整个小程序功能不算复杂但该有的都有，也还有很多可以继续完善的地方，笔者也是刚开始接触小程序没多久，这次抱着学习的心态把自己做小程序的过程和一些心得分享出来，希望能和大家交流以提升自己，对这个微信小程序有疑问或者建议的同学可以在评论中提出，谢谢大家！另外，贴出我的项目的GitHub地址，喜欢的可以点个star或者fork。
另外打个广告：2017年6月毕业生求实习求收留~ 逃~
最后
