微信小程序笔记二：天气应用

源码github地址在此，记得点星：
https://github.com/brandonxiang/weapp-weatherfine

前言

本项目更多是对小程序的一个实验，已经上线。在小程序搜索“小好天气”，或者扫描下方二维码，或者在本人公众号的实验室专栏即可查看该应用。

小好天气

构思

查询用户位置的天气

我的构思非常简单，主体的功能是做一款基于位置的天气预报的程序，利用的是免费的气象预报api接口（就此说明一下本项目主要采用的是心知天气的接口）。小程序可以获取用户的位置数据，通过位置信息来查询该城市的天气信息。最终的实现效果是让全国各个城市的人查询到自己城市的天气信息。

与此同时，问题也来了，在调用微信小程序定位服务的过程中，只会返回坐标位置，并不会返回城市信息。由于天气状况的查询是根据城市的信息来查询。这是我们需要进行一次“将坐标转换成为城市名称”的反地址编码转换（这里说明一下本项目采用的是高德地图的接口）。

自定义城市

辅助的功能是根据用户本地缓存的用户信息，每个用户可以自定义自己所选的城市。由于每个用户的信息不同，这需要使用到小程序的缓存功能。

该功能在v1.1.0版本已经实现，只满足包括北京，上海在内的27座城市天气的切换，默认是北上广深四座城市。

自定义语言

考虑到微信是个国际化的软件，小程序是个国际化的产品，我造了一个翻译小轮子--weapp-i18n，详情可以参考微信小程序笔记四：翻译小轮子weapp-i18n。该项目也让小程序的国际化i18n得到了一个很好的表现，包括中文和英语的自由切换。

自定义温度单位

考虑到项目已经是国际化的，温度单位也要兼容华氏度，加入在设置界面加入了华氏度和摄氏度的切换。

缓存

考虑到小程序的渲染效率。我对天气预报的数据更新的频率进行统计。小程序在渲染的过程中优先读取缓存数据。过时则重新获取数据。

跨页面事件调用

本项目的界面很简单，主要分为天气和设置两方面。两者之间有很多的数据调用和事件触发。我在这里使用比较简单的事件监听方法weapp-event。

界面

在v1.1.0的版本中，我引入了由有赞推出的zan-ui，易用，低门槛，易扩展，它有专门的官方介绍，使用方法参考源码。

界面

总结

小程序开发的最基本流程可以归纳为下图。

小程序开发流程

关于小程序的一些思考

优缺点

经过一番的“小程序”体验后，说说它的优缺点：

优点
- 接口完整度高
- 极其容易上手，如果有vue经验的工作者更佳
缺点
- 缺乏第三方库支持，不能用包管理工具
- 很其他框架缺乏通用性，想转成web app非常麻烦
- css语法没有扩展sass等

总体用下来，wx.request和wx.login等接口给人一种似曾相识的感觉，但是小程序有诸多的限制，可说明了它的不成熟性。

有人说微信有野心做成一款wechatOS，但是我觉得还是不太可能。从两个方面，第一，不是所有厂家愿意重新写一款应用去满足现有的功能。因为小程序对用户的“黏度”不大，还不如自己开发一款App，满足ios和安卓的用户。往往小程序不过成为“试验品”或者是“玩具”，不过是一款简化版的应用。第二，代码并不具备通用性，代码不能重复用于网页版当中。同时，其扩展性也非常差，就像少了几个“键”的键盘，用的时候会捉襟见肘。所以，这样引发了关于小程序和PWA之间的讨论。

详情参考说说 PWA 和微信小程序，PWA（Progressive Web App）是Google在2015年提出来，还不过是网页应用，但是实现类似原生App的功能，包括消息推送，后台加载，离线使用，原生应用界面和桌面图标等类似桌面应用的功能。当然前提是浏览器对它的支持。PWA与生俱来的优点就是它的代码的通用性和延续性，这是小程序所不具有的。

注意

由于高德地图和心知天气的key是个人开发者的key，如果你需要fork，请自行更换key。

转载，请表明出处。总目录跨平台快速开发

欢迎关注我的微信公众号。

请关注我的微信公众号

微信小程序笔记二：天气应用--小好天气