自从小程序对个人开发者开放，就一直心痒痒的想做个小程序练练手，偶然发现百度地图开放平台提供了几个小程序 API，于是经过几天的调研，决定做一个天气查询的小程序。
功能设计
在微信小程序入口搜索天气关键词，可以看到不少相关小程序，那么同样是天气查询，我要做的小程序和他们相比有什么优势呢，对用户来说有什么特别的意义呢？
于是我花了一些时间体验检索列表中 Top 20 的小程序，发现如下问题：
- 切换城市大都需要输入城市名字
- 内容过多，重点不够突出
- 服务不稳定，一些固定文案已经展示，动态数据却还在加载，加载失败时也没有断网提示
- 设计风格相近，大多是蓝色背景加灰色蒙版，配上白色字体的商务风
针对上面几个自己比较在意的问题，我对自己的小程序做了如下的功能规划：
- 减少用户的输入，采用点选操作
- 首页只展示最关键的信息，包括温度、空气质量、天气状况和日期，非关键信息，如穿衣、洗车等放在下拉页面
- 断网、loading 等提示，确保用户体验
- 采用自己喜欢的纯色风格设计小程序
界面设计
作为一个程序媛，PS、AE 都是 just so so 水平，每次思考要把产品做成什么样子的时候，都很头疼。在 Dribbble 看过那么多太美的作品，脑海中也总构思自己可以做一个这样或那样的东西。然而，理想很丰满，现实太骨感，能把自己的 idea 重现真的有点难呀。搭建这个 Blog 时也是改了好几版才终于比较满意。等毕业之后，没有科研压力了，自己一定要利用业余时间好好学设计~
回归正题，自己一直喜欢纯色系的设计方案，简约大方。那么采用什么配色方案呢，毫无疑问，蓝色啊（捂脸遁，真的是太爱蓝色了，其实中间尝试过粉色和绿色的配色，但还是觉得蓝色最好看，而且小程序会根据早晚切换背景颜色，浅蓝和深蓝也更能体现夜空）。
确定设计方案后一切就比较简单啦，按照设计稿开始码代码！
写代码 ing
这部分只想写一下自己的思路，我要慢慢摆脱贴代码这个习惯！
由于微信小程序支持 ES6 转码，自己刚好也没有太多的 ES6 实践基础，于是果断选择用 ES6 语法完成代码的编写。编写之前需要熟悉小程序的官方开发文档，这里不再赘述，相信对于一个 FE 来说都不是问题啦。
编写第一步就是数据的获取，这里按照百度地图 API 的文档说明很容易就可以实现。由于地图 API 的封装问题，目前不能通过城市名进行数据请求，只支持根据经纬度获取天气信息，因此自己写了个脚本抓取每个城市的中心点坐标，再根据坐标请求相应的天气数据。由于请求数据有一定的耗时，因此需要在请求前加一个 loading 的动作，在请求失败时跳转失败页面。
获取到数据后，需要对数据进行处理，再将其渲染到前端页面。这一步需要判断当前为白天还是黑夜、根据当前 PM 2.5 值设置进度条的位置、根据天气状况设置天气动画等。值得一提的是 PM 2.5 的设置，系统默认最大值为1000，当用户所在城市空气质量爆表之后，把最大值存储在localStorage中，并更新滚动条的取值范围。
测试
大致开发完了，我们开始测试吧！首先可以在微信小程序开发工具的模拟器中大致测试下功能，断网提示、请求失败、文本截断、部分异常值的处理等等。没有什么功能性 Bug 之后，可以扫码进行真机测试，看看一些 CSS 样式是否存在兼容性问题。我主要用 iPhone 6P、7、华为大屏、中屏手机进行了测试，修改了两个样式上的问题。
发布线上
自测完毕后，就可以在开发工具中提交代码啦。接着就是给自己的小程序起一个辨识度高的名字、设置一个好看的 Logo、添加几个标签，完成这些内容后，就可以在微信开放平台中申请审核。审核期大概是两天，审核通过后直接发布线上！大功告成。
下面是口袋天气的小程序码，可以直接使用微信扫一扫打开小程序，或在微信-发现-小程序中搜索口袋天气。
后期版本规划
初版已经上线了，后续会继续对口袋天气进行优化，目前有如下计划：
- 在支持城市点选的同时，引入地图选点，使天气信息更加精准
- 支持常用城市收藏
- 优化天气动画
- 增加更多背景色，如雾霾天为灰色等