微天气 终篇

起源

天气小程序产生于2022年年初，目的是用于验证自己是否有进入全栈开发（仅前后端）的能力。

受新冠疫情影响，2022年的春节是在杭州过的。还记得当时附近好几个地方都被划为了高风险，对整个区进行了管控。如果选择回家的话，得到将是14天的隔离，还不确定能否回来上班。因此便没有回去了。好在所在的区域情况并没有那么的严重，还是可以去买菜的。领了消费券，再加上公司发的年货，也没有想象中的那么糟糕。

所以，既然没有回去，又有十来天的时间，总得做点什么东西才行，对吧 🙄！

2022年，是我工作的第四个年头。受多方面的信息影响，我也想看看验证自己是否有进入全栈开发（仅前后端）的能力。

历程

拂衣天气，又名微天气。

一个集地理信息与天气预报为一体的天气预报类小程序，界面精美，使用便捷。【致敬：和风天气】！

💡 主要是有人给我说拂衣天气，听着还以为是卖衣服的。so，我就想着换个名字，就有了微天气。但是由于微信认证的原因，所以有些地方还是拂衣天气。现在细细想来，好像也没有什么关系，那就先这样吧 🙄

1. 该项目从2022年1月12号正式启动，于2022年3月19日发布一阶段最终版本（1.1.9），总体耗时2个月零7天。从内容完整度以及界面友好程度来说，我给自己70分。
2. 此前实在是没有经验，也没有相关的习惯，天气小程序开发过程中并没有编写相关的文档。所以在小程序开发完成之后，本来计划是将拂衣天气完整的开发过程通过文章的方式记录下来，并将该项目开源出去，甚至还想将该项目提交给和风天气。但最后的结果就是：文章就完成了四篇，也就是一个开头，没啥实际内容。@time 2022年8月16日
3. 好的，现在时间来到2023年12月，我又有点时间了，因为我离职了（不是被裁）。这次的目标是完善文档，修复发现的一些BUG，然后新增一些内容，最终将该小程序开源，并贡献给和风天气。

接下来，让我来回忆一下每个阶段的详细内容 🤔

项目初始

为什么会想到做一个天气小程序呢？

嗯，首先我是一个做服务端开发的GIS开发工程师。在当时刚结束一个小程序的开发工作，觉得小程序这个东西还挺有意思。同时受到周边各种信息的影响，也想试一试写点前端的内容，最好是可以方便发布的那种，也算是自己的作品不是。为什么会选择天气类别，好像是当时刷网页还是什么，看到一个人分享自己做了一个天气机器人，然后给女朋友推天气信息。so， 🫣

所以，我当时就想做一个天气类别的小程序，以此进行全栈开发能力的试炼。我想这会是一个微信小程序、是一个可以正常使用的小程序，以Java进行服务端开发，以Mapbox实现天气数据可视化。

本阶段事务分为了三个阶段，分别是：调研、学习、实现

调研

天气小程序什么最重要？当然是天气数据最为重要，所以首要内容便是确定天气数据的来源。其次便是确定本次天气小程序的技术实现构成。

• 天气数据

  天气数据需要是真实的、可用的。那么可以通过网络中提供的天气API进行获取。

  通过一定的检索后，我选定了两个天气平台，分别是：和风天气、心知天气。

  高德天气：大平台，但是目前服务类目比较少

  彩云天气：免费接口几乎没有，收费又太贵

  • 心知天气

    心知天气试用版与开发者版开发产品几乎等同，且开发者版收费也不贵。最为关键的是，支持以经纬度方式进行天气查询。

    

  • 和风天气

    几乎可以免费使用其提供的所有 API，且同样支持经纬度方式进行天气查询。

    

    

  对比了这两者，发现至少都需要注册为开发者之后，才可以较好的使用其服务。且两者的开发者认证均需要实名。

  关于天气API的选择，我最终选择了和风天气，倒不是因为它可以免费使用。其实，刚开始的时候我更倾向于使用心知天气，因为它还可以直接查昨天的天气（和风对于历史天气的查询比较麻烦）。但是和风天气首页结合了地图进行可视化，而且还提供有APP可以使用（方便参考）。再加上，我想了想，其实我并没有迫切的需要知道昨天的天气情况。 🙄

  💡 其实最重要的原因在于：我先注册了心知天气（需要审核），过了半天后再去注册了和风天气（需要审核），但是最先通过审核的是和风天气（耗时大概也就半天左右，我是在春节期间注册的啊）。

• 技术实现构成

  这里存在一个遗憾，小程序原生并不支持使用如mapbox这样的第三方地图框架，初始想法是通过webview的方式使用mapbox，但是遗憾的是，webview并不对个人类型的小程序开放使用。

  所以，退而求其次，选择腾讯地图（及其提供的样式）实现地图浏览。

  服务端程序则使用Java语言开发，天气数据是经过服务端代理的方式形成内部的数据接口，并非是小程序直接调用和风的接口

  最终将服务端程序部署到阿里云

学习

我是一个后端开发工程师，我不怎么会写页面，我特别的讨厌写CSS。我也没有接触过前端开发和微信小程序开发，所以需要提前储备一下相关知识。

• 前端知识

  我并没有想要精通前端技术，但是我需要比较体系的了解一下前端技术，方便进行小程序开发。所以我在B站找了两门前端视频学习（粗略的刷了一遍）

  • 尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
  • 千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到精通

• 微信小程序知识

  其实就看官方文档就足够了，不过心虚的我还是在极客时间找了门课。最终发现：就官方文档就足够了，因为我并不需要很深入的东西

实现

在有一定准备后，就开始进入实现环节了。

在这里有一个大问题就是UI设计问题，我看和风天气APP就挺好看的，有天气有地图，身为GIS开发的我就很喜欢。又发现无论是和风天气官方，还是其他天气小程序应用，基本都没有携带地图的。

所以，我当即决定参考和风天气官方APP界面，做一个类似的天气小程序。当然，我做的这个小程序就是奔着开源，同时将作为作品分享给和风天气，才想着如此操作的。请务必慎重 🤔

在经过简单的设计过后，于2022年1月18日正式进行开发，2022年3月19日发布一阶段最终版本1.1.9。

文档补充

今天偷的懒，明天都会让你加倍还回来。此前一是没意识，二是认为没必要，三还是太懒，所以并没有同步编写文档。

现在计划将拂衣天气开发的完整过程通过文章的方式记录下来，下面是我对该整体内容的编写计划：

但是，我又要开始说但是了。打工人还是打工人！

天气小程序于2022年4月前就已经完成了开发，直至到今天（2022年8月16日）也就才完成了三篇文章，不得不说拖延症是真的严重。天气小程序只是一个应用，就目前的投入收益来说，不应该把过多的时间放在小程序上面。在加上距离开发已经过去了4个月，开发之时并没有进行文档产出，所以现在才进行复盘则是相当于重新实现了一遍。就目前来看，核心的行政区划数据合并已基本完成，所以，后面将暂停小程序相关内容，变更为GIS基础与计算机基础的学习。

💡 对的，停更说明。

死灰复燃

打工是不可能打工的，只要我不打工，我就有时间了 🙄

那就修复、优化、新增 😎

• BUG修复
• 逻辑优化
• 文档编写
• 新增Web端、消息推送、接入AIGC
• 将作品分享给和风天气

我还特意画了两张图呢

好的，我又要开始说但是了。但是，我错误估计了自己的空闲时间。所以，无情的鸽了新增的部分以及此前计划的开发过程文档。截至到2024年3月12日，已完成如下内容：

• 既有BUG修复

• 关注城市、登录、海报部分优化

• 提供Docker Compose脚本，同时将阿里云的部署全部变更为使用Docker

• 编写项目Readme文档

• 已经给和风天气提了作品分享的PR，并联系他们表达了诉求 😃

• 更新了3篇开发过程文档

  

那么，小程序的版本也来到了1.1.12，当前就到这里了。 😮‍💨

仓库地址：

服务端：micro-weather-backend

小程序端：micro-weather-wechat

文档库：micro-weather-docs

小结

拂衣天气从2022年1月12号正式启动，于2022年3月19日发布1.1.9版本，2024年3月14日发布1.1.12版本，时间几乎跨了2年。从内容完整度以及界面友好程度来说，我给自己75分。

我知道，这个东西没有什么难度，整体也是很简单。但我就是感觉还不错的，哈哈哈！

反正这2年间，我倒是一直在用，期间只出现因为更换服务器，证书等问题短暂的停过几天。

不过，经过这个项目，也比较清晰的暴露出来我的几个问题：

• 拖延症问题，执行力不够高
• 思考问题不够线性，有些散乱（好 也不好）
• 写文档的能力比较差 ☹️
• 比较内向敏感，当时不太敢把自己的东西放出来，怕被人别吐槽

剩下的事情就是，一一克服咯！

快速体验

• 微信搜索：拂衣天气

• 扫描下方小程序码

  

声明与致谢

• 天气数据均由和风天气免费提供
• 天气小程序的界面设计与交互设计主要参考和风天气APP
• 行政区域数据最终使用锐多宝提供的省市县数据，我仅在此基础上做了些许处理
• 部分图标来自阿里巴巴矢量图标库
• 天气预报模块的图标由和风天气提供
• echarts组件由Apache Echarts提供
• 小程序内地图由腾讯地图提供
• 容器镜像仓库服务由阿里云提供
• 代码仓库以及服务端CI由Github提供

感谢和风天气、Github、微信、腾讯地图、阿里云、阿里巴巴矢量图标库、锐多宝以及所有为本项目提供支持的主体。

吐槽

实在是不吐不快……

腾讯地图自定义样式收费

其实，我是想说什么。就是你收费是可以的，但是对于个人开发者能不能单独拉个套餐啊。

你说你要是399一年，我也就冲了。一个月399，我哪里买得起啊，这就不搭理个人开发的了啊 🙄

看一下前后的对比图，左边的使用了个性化地图，右边的就是默认样式了。

阿里云免费SSL证书收费

也就是说，此前一个域名每年有20个免费的单域名SSL证书还是可以使用的，但是每个单域名证书的有效期只有三个月。要是只是用来测试开发倒是没啥问题，但是如果如我这边，三个月换一次域名部的麻烦死。你只要花68块钱，你就可以获得一个和此前一摸一样的，有效期12个月的单域名证书 😯

微信小程序认证收费

总体来说，就是：

• 一年一审
• 审核费用按次数收费，失败也是要收费的哦
• 我付了30元，也就是30元/次。我是个人认证，不是企业

展望

拂衣天气（微天气）没做完的内容，我肯定还是会继续做的，不过内容可能会跟随着见闻发生变化。只不过当前它暂停了，因为我还有更重要的东西要写。

下一个要做的就是：地图服务程序，它是一个类如Geoserver的中间服务程序，但是它需要是简单的，更容易上手的，以MVT为主的，程序性能和瓦片质量更好的程序。

就如同geojson-vt一样的精简，但却是实用的。

毕竟，我是一名以服务端开发为主的GIS开发工程师 🫡