拂衣天气(微天气) 终篇

起源

天气小程序产生于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开发工程师 🫡

相关推荐
丁总学Java2 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
丁总学Java19 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
mosen86821 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650221 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong1 天前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
2 天前
微信小程序运营日记(第四天)
微信小程序·小程序
qq22951165022 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app