一、引言

微信相信已经成为当今社会人们必备的APP之一。从最初被质疑、不被看好，到如今拥有近8亿用户，微信一直以独特的方式影响着中国移动互联网App生态。2017年1月9日，微信负责人张小龙宣布微信小程序正式上线。什么是微信小程序？张小龙说：“小程序就是不用下载、不用安装，就可以使用的应用程序，它带来了触手可及的梦想，用户只要扫一扫或者搜索就可以打开应用，它还有即用即走的概念，用户不用担心安装太多应用，应用随处可用，却无需安装、卸载。”这段话体现了小程序的作用和意义。总结起来就是：“即用即走，没有额外负担的轻量级工具。” 这几天在看Boss直聘的网页版，觉得整体风格很不错。结合Boss直聘作为工具产品的定位，很符合微信小程序“用了就走”的理念。于是就萌生了做Boss直聘微信小程序的想法。废话不多说，

先贴出效果图

2.1 主页

2-2 搜索页面

2-3-1 职位详情页面

2-3-2 职位详情页面

我们做的微信小程序的功能很明确，就是给用户提供一个便捷的查找信息的入口。在首页，你可以在搜索框中输入想要查找的职位信息。比如搜索“北京”会弹出北京的职位，搜索“Web前端”也会弹出相应的结果。点击每个结果都会跳转到相应的信息详情页，在详情页可以查看具体的职位要求、联系方式、公司信息等信息。

项目路径：

2-4 项目路径

2. 准备

1、微信Web开发者工具（我用的是0.15版本，其他版本可能会有细微变化，详情请参考微信官方更新日志）。

2、好用的编辑器。虽然微信提供的开发工具的编辑功能也不错，但我还是更喜欢自己***过的Atom（毕竟是来自未来的“文本”，哈哈~）。

3.Easy-Mock，一个简单易用的数据生成服务，可以帮助我们模拟后台数据。

4.永不轻易放弃的心（逃跑~）。

我们先来看一下开发工具界面

4-1 界面

毕竟是“鹅厂”出品，所以还是很漂亮的~

我们主要使用位于开发工具左上角的三个选项卡

1.编辑，顾名思义，就是我们主要的代码展示和编辑区域。

2、调试和自带的调试器很相似，主要输出调试信息，基本功能都实现了。

3、，主要可以生成二维码，方便在手机上直接查看实机运行效果，此外还提供了一些其他实用的设置。

Edit 和 选项卡右侧会显示实时预览小程序界面，每次保存都会实时刷新，很方便~

相信大家一定注意到了文章开头贴出的项目路径中显示的文件中奇怪的文件后缀，其实这并不是什么新鲜事，这只是微信小程序官方为了区别于传统 HTML/CSS 而推出的一种专门用于小程序开发的新文件格式，wxml 对应传统 html，wxss 对应 css，js 后缀格式保持不变。

是不是迫不及待地想要开始行动了呢？现在就开始行动吧。

3. 链接！！！1. 定义全局样式

我们先创建一个新项目

4-1 新建项目

创建完项目之后一些文件夹开发者工具会自动帮我们创建，如图

4-2 新建项目路径

1、这是小程序的主目录，里面存放的是你的小程序的页面文件（例如自动生成的文件夹中存放的是首页的结构和样式文件）。

2.微信内置了一些处理函数，当然你也可以自己写。

3.三个名为app的文件定义了一些全局的数据，样式等。

现在我们去 app.json 文件定义一些全局数据

4-3 一些全局样式数据

这是JSON格式的数据，里面的一些API定义了我们微信小程序的基本外观，代表微信小程序的页面路径，定义了内容区域以外的样式，比如“”，代表标题栏的背景颜色，下面是一些常用的配置属性

4- 物业配置项

另外值得一提的是，微信小程序官方已经为开发提供了原生支持，只需要在 app.json 文件中配置属性，就可以直接生成对应的，省去了自己写样式的时间，提升了开发效率。给企鹅点个赞吧~ 详情请见微信小程序开发者文档。

2.完成首页开发

我们先来看看我们的主页

4-2-1 主页

大家可以看到，在页面顶部有一个搜索框，这个搜索框负责帮助使用我们小程序的人快速找到自己想要的职位。搜索框下方的部分是我们的职位分类和详细职位。整个页面结构还是很清晰的。这里实现的功能包括在搜索框中搜索关键词跳转到搜索页面并展示相应的搜索结果。当然你也可以直接点击搜索框下方的详细职位，跳转到相应的搜索结果界面。

4-2 搜索“广州”

4-3 搜索“Web 前端”

4-4 搜索页面的结构

啥？什么是view标签？什么是text标签？为啥都是我没见过的标签？呵呵，其实都是纸老虎，不是什么新鲜事。相信大家已经看出来，view标签对应的是开发中我们常用的类似p的块级标签。text标签对应的是span、p标签，不过和view标签不同的是，text是行内标签。想了解更多框架内容，可以参考微信开发者文档组件。

代码中data-负责数据绑定，比如给view标签添加属性，其实就是给这个标签添加手势点击事件。后面的属性名表示.js部分对应的事件处理函数，比如=“”表示给标签绑定一个Tap事件触发函数。同样的=“”就是给当前输入框绑定一个输出事件触发对应的处理函数（双引号里面的函数名自己定义，虽然没有硬性规定，但最好能起一个自己和别人都能一眼看出作用的名字~）。在wxml页面把对应的函数绑定到对应的标签上之后，我们就可以跳转到对应的js页面去写我们的函数了。

通过前面的分析我们知道，搜索页面其实是由一个搜索框和若干个搜索项组成的，这和我们现在模拟的情况有何相似和不同呢？

对，没错。对于每一条搜索结果，信息在每一项中的位置和格式基本不变，只有数据在变化。那么我们可以这样考虑：只为一个项目写一个模板，但在需要存放数据的地方留一个接口。这样，我们就可以调用微信小程序官方提供的标签的“wx:for”和“wx:key”属性，通过循环把相应的数据插入到我们的模板中，有多少数据就生成多少个实例。

对于页面数据部分，我们使用Easy-Mock来模拟后台数据。登录Easy-Mock之后，新建一个项目，编辑我们需要的数据。因为后面会涉及到根据不同的搜索关键词返回相应的结果，所以这里模拟的数据可以更加多样化，尽量体现出每一条数据的差异性。这是我们模拟的数据接口（Easy-Mock官网有详细的使用文档，对这一步不熟悉的同学可以去官网看文档）。

现在我们有了数据，如何将其放到页面上呢？

这时候我们就需要在需要放置数据的地方定义一个变量，使用双花括号把一个变量包起来，像这样“{{自己定义的变量名}}”。然后我们只要在.js文件中编写相应的实现函数，就可以把模拟的数据渲染出来了。

页面样式的写法和传统CSS样式是一样的，如需查看请到我的网站查看样式源码。

这就是我们搜索页面静态部分的介绍。

现在我们进入 JS 部分并编写函数

4-5 搜索部分用到的几个函数

靠前项“var app = ”用于获取应用程序实例，Page项中存储了我们需要的一些数据和功能。

当页面中元素绑定的事件发生时，就会触发这里定义的函数，实现相应的功能。这里我们详细描述一下使用官方API实现数据渲染的实现细节：

4-6 数据渲染

如图，data对象中存放的是我们需要的数据。因为我们的数据是从后台渲染出来的，所以这里先定义一个空数组，用来接收往下传递的数据。函数指的是页面加载完成后生效的函数。这里我们用了一个官方的API，就是“wx.”。这个API用来向我们的数据URL发起请求，获取我们需要的数据。接下来，我们用方法把数据放到我们需要的地方。

现在我们有了数据，就可以开始写我们的搜索部分了，首先在home.js中我们需要制定传递用户搜索值的判断逻辑，如图所示。

4-7 向搜索页面传递值

我们可以看到，用户搜索关键词时至少有四种情况

1. 用户搜索工作城市

2. 用户搜索职位

3. 用户搜索公司名称

3. 用户点击搜索按钮时没有输入任何值

（还有很多情况，比如搜索薪资、工作经验等，实现逻辑基本相同，这里只列出部分情况，供参考）。

主页的编写到此结束。

3.完成搜索页面的开发

现在我们进入搜索页面，搜索页面的结构和样式都在我的源代码里，欢迎指正：）。

还记得我们在 home.js 页面中定义了一个值来在页面之间传递参数吗？现在我们可以使用它了。我们还在 .js 事件（页面加载后执行）中定义了一个值来存储从 home.js 页面收到的用户输入的值

4-8 接受来自 home.js 页面的值

，获取到用户输入的值之后，我们就可以根据用户输入的值进行搜索逻辑判断

4-7 搜索逻辑

如图所示，我们先定义一个空数组用来存放搜索结果，再定义一个用来存放我们的数据。下面就是利用if语句来进行搜索匹配了。从代码中我们可以看到，我们目前做的只是简单的值对值的匹配。如果用户输入“北京”，那么就会显示北京的所有职位。如果用户输入“搜狗”，那么就会显示搜狗的所有职位。那么当用户输入“北京”的时候，我们的小程序是查不到北京的结果的。这时候，我们就可以利用正则表达式来完成一个模糊搜索功能的开发了。限于篇幅，我就不详细讲解了，同学们可以自行完成。

现在让我们看一下我们的搜索页面。

4-8 搜索页面

我们在这里还做了一个搜索框，这样用户在需要进一步搜索的时候，就可以直接在这个页面进行搜索，而不需要回到首页。这里的搜索逻辑和上面说的基本上是一样的。有需要的可以去我的网站看源码。

在首页搜索后跳转到搜索页显示结果的过程中，我们可以调用官方API wx.来显示一个搜索提示。wx.也可以达到同样的目的，区别在于需要手动调用并在合适的时候关闭，显示的图标和连续事件可以自定义，但总体来说不如前者灵活。

4.完成详情页开发

详情页主要负责信息的展示，整体思路和首页基本一致，这里我们使用一个官方的地图组件来展示不同公司的公司地址。

--

4-9 工作地址

4-10 地图组件

map标签可以为我们创建一个地图组件，我们只需要传入相应的经纬度，就可以让地图显示相应的位置，增加一个show-属性可以显示一个带方向的定位点，其他属性请参考。

4-11 创建地图上下文

4。结论

至此，我们Boss直招微信小程序的开发就告一段落了。整个小程序并不复杂，但是该有的功能也都有了，还有很多可以完善的地方。笔者刚开始使用小程序，这次是抱着学习的态度来分享我制作小程序的过程和心得，希望和大家交流，提高自己。对这个微信小程序有疑问或者建议的同学可以在评论里提出，谢谢！另外我贴出了我项目的地址，大家喜欢的话可以点个star或者fork。

另一个广告：2017 年 6 月毕业生寻找实习和住处~逃离~

终于

祝福开源世界！