共克时疫，https+小程序为“战疫”献上一份技术力量

Posted 2021-03-11 wenbinjiang

前言

新型冠状病毒笼罩下的新年，让每个中国人都感到恐慌和揪心。我们每天为前线的白衣天使和平民英雄们的事迹感动而落泪，也为不法分子哄抬物价，无良个人以权谋私等自私自利的行为而感到痛心疾首。作为普通人，我们最大的贡献就是宅在家里，响应钟南山院士的号召，做好个人防护，不为疫情添负担，不为他人添麻烦。最近看到很多大佬都为“战疫”贡献了自己的技术力量，有的人提供了数据和接口支持，有的人做了app，有的人做了webapp。看到这些举动，我也跃跃欲试，静下心去做，总会做点东西出来，于是我做了一版微信小程序，主要是想方便自己和家人朋友们查询下最新的数据，毕竟大家都用微信。

微信小程序的版本审核实在太慢了，昨天提交版本审核的，现在还没通过，唉，心累。

数据获取和处理

首先要感谢丁香园，数据源于丁香园-丁香医生。

重点要感谢掘金@普通程序员提供的数据接口能力，让我们菜鸡也有机会做一点微小的工作。

为了防止给大佬的服务器增加访问压力，我每15分钟抓取一次接口数据，存储于个人服务器上，供自己和他人访问和使用。

Q: 为什么别人有提供接口，你还要再多此一举？A：我要做小程序，没有https搞不了。

目前主要上线了以下接口：

在线接口基地址： https://wuhan.wbjiang.cn/api/

接口名	请求方式	接口描述
timeline	GET	获取发生的事件，支持分页参数pageNo和pageSize
stats	GET	整体统计数据
rumour	GET	最新辟谣
protect_wiki	GET	最新防护知识
wiki	GET	最新知识百科
help_links	GET	便民信息/诊疗信息
province_stats	GET	全国省份级患者分布数据
city_stats/:areaName	GET	根据省份查市县疫情数据，areaName传入省级行政区的简写，如“湖南”
oversea_stats	GET	全球海外其他地区患者分布数据

可以点击在线访问整体统计数据试试看呢！

https://wuhan.wbjiang.cn/api/stats

该服务的源码我也上传到了github，欢迎访问wuhan_best_wishes查看，如果能顺手给个star那是极好的，感谢感谢！

HTTPS支持

由于微信小程序需要调用https协议的接口，所以我利用nginx的能力和阿里云提供的SSL证书，对上述接口提供了https支持。

服务整体框架

接口服务：使用的是nodejs语言，技术框架是express。

应用管理：利用pm2来管理node应用。

代理服务器：利用Nginx监听80端口，转发到node服务所在的内部端口。

小程序概述

取名挺烦的，拟的名字要么是被行业限制，要么已经有人用了。最后就随便取了个名wuhan速报。

技术方面，我暂时没有使用框架，用的是小程序原生的开发语言。为了快速出第一版效果，UI部分用到了我熟悉的vant-weapp。

相关代码已开源，请访问ncov-weapp查看源码。

先发个小程序码，方便大家直接访问小程序（暂时还没通过审核，微信小程序审核速度你懂的，如果想体验一下的话，欢迎加我微信ice_lloly使用体验版）。

小程序内容

内容上，主要做了四个页面，分为疫情地图，辟谣与防护，事件播报，疾病知识等几块。

疫情统计数据

疫情地图与趋势

国内省市疫情分布

海外疫情分布

辟谣与防护

最新事件实时播报

疾病知识

为了快速出效果，做的时候有参考丁香园的设计，感谢丁香园技术和设计团队！

结语

由于时间有限，大概花了一天多的时间吧，所以做出来的效果是比较粗糙的。接下来我会在有余力的情况下，继续迭代更新，毕竟还是要远程办公的，大部分时间还是要聚焦于公司业务。

我是Tusi，一个创业公司前端小leader，每天依然为写不完的业务代码烦恼，在打磨产品道路上沉淀技术，探索成长路线。如果你与我一样，正在思考自己的技术成长与价值，欢迎加我微信交流探讨，微信号ice_lloly。我会在公众号猿出道和小程序Tusi博客同步博客内容，快来撩我！