码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-02-08 11:26:07      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:阿里云   poster   情况下   前言   https   ade   nginx   最大的   开发   

前言

新型冠状病毒笼罩下的新年,让每个中国人都感到恐慌和揪心。我们每天为前线的白衣天使和平民英雄们的事迹感动而落泪,也为不法分子哄抬物价,无良个人以权谋私等自私自利的行为而感到痛心疾首。作为普通人,我们最大的贡献就是宅在家里,响应钟南山院士的号召,做好个人防护,不为疫情添负担,不为他人添麻烦。最近看到很多大佬都为“战疫”贡献了自己的技术力量,有的人提供了数据和接口支持,有的人做了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博客同步博客内容,快来撩我!

技术图片

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

标签:阿里云   poster   情况下   前言   https   ade   nginx   最大的   开发   

原文地址:https://www.cnblogs.com/wenbinjiang/p/12275623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!