微信小程序疫情信息板块（一）

因为我想开发一个关于疫情的小程序，需要有个界面，显示国内最新的疫情信息

参考了这篇博客：

疫情信息查询微信小程序的实现_一个帅气的人。。的博客-CSDN博客

但是博主没有贴出国内板块的代码，关于疫情信息的接口，一开始也没什么头绪

原始代码如下

onLoad(options) {
   var that=this;
    wx.request({
   url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoCountryConfirmAdd,WomWorld,WomAboard',
   success(res){
     that.setData({
       list:res.data.data.WomAboard,
       nowConfirm:res.data.data.WomWorld.nowConfirm,
       confirm:res.data.data.WomWorld.confirm,
       heal:res.data.data.WomWorld.heal,
       dead:res.data.data.WomWorld.dead
     })
   }
 })
  },

加了句控制台输出看看获取到的数据（res.data.data）

点开WomWorld——[0...99]

 

再看页面显示wxml的语句

​
<scroll-view class="middle4" scroll-y="{
   
   {true}}">
      <view class="middle5" wx:for="{
   
   {list}}">
        <view class="middle6"><text>{
   
   {item.name}}</text></view>
        <view class="middle6"><text decode="{
   
   {true}}">{
   
   {item.confirm}}&ensp;</text></view>
        <view class="middle6"><text decode="{
   
   {true}}">{
   
   {item.confirmAdd}}&ensp;</text></view>
        <view class="middle6"><text>{
   
   {item.heal}}</text></view>
        <view class="middle6"><text>{
   
   {item.dead}}</text></view>
      </view>
    </scroll-view>


​

 对比一下就明白是如何获取数据了

那么我们只要将接口url的api换成国内的就行

新型冠状病毒全国疫情Api接口_幕尘枫的博客-CSDN博客

这篇博客里的有列出一部分接口，我一开始选择了腾讯的

 如此繁杂的数据，肉眼看肯定是愚蠢的，再小程序的控制台里查看

竟然还是这么离谱的复杂，果断换api，换成163（网易的应该是）：https://c.m.163.com/ug/api/wuhan/app/data/list-total 

再次输出

果然正常了，但是发现结构好像有些许的不同，经过简单的阅读可以找到中国所在的数组，甚至贴心的把国内每天的数据单独列了出来： 

 中国：areaTree[2]

可以看到下面的分支today数组里的是当日，total数组里的是总计 

chinaDayList里是近60天的数据，最新的在下面也就是第59个（数组0开头）

 既然数据都找到了，下面就是一一对应的修改，我直接贴代码了

inde.js

onLoad(options) {
   var that=this;
    wx.request({
   url: 'https://c.m.163.com/ug/api/wuhan/app/data/list-total',
   success(res){
     that.setData({
       list:res.data.data.areaTree[2].children,
       nowConfirm:res.data.data.chinaDayList[59].today.confirm,
       confirm:res.data.data.chinaDayList[59].total.confirm,
       heal:res.data.data.chinaDayList[59].total.heal,
       dead:res.data.data.chinaDayList[59].total.dead
     })
     console.log(res.data.data)
   }
 })
  },

inde.wxml

<scroll-view class="middle4" scroll-y="{
   
   {true}}">
      <view class="middle5" wx:for="{
   
   {list}}">
        <view class="middle6"><text>{
   
   {item.name}}</text></view>
        <view class="middle6"><text decode="{
   
   {true}}">{
   
   {item.total.confirm}}&ensp;</text></view>
        <view class="middle6"><text decode="{
   
   {true}}">{
   
   {item.today.confirm}}&ensp;</text></view>
        <view class="middle6"><text>{
   
   {item.total.heal}}</text></view>
        <view class="middle6"><text>{
   
   {item.total.dead}}</text></view>
      </view>
    </scroll-view>

成功显示出来