疫情信息查询微信小程序的实现

一.小程序的整体结构和界面展示

本人所用的全部疫情数据的信息来源于腾讯提供的API接口，这里给出一个连接你也可以调用想要用的其他疫情数据API接口

新型冠状病毒全国疫情Api接口

1.首页国内疫情信息界面

该界面展示了今日国内的疫情信息动态，包括国内总体动态疫情数据以及每个省份地区的动态疫情数据，还包括新冠肺炎的预防须知。

点击具体的省市地区可查看该地区的详细疫情数据，比如想获取陕西今日的疫情信息

点击后的展示结果

 2.国外疫情信息界面

获取到全球所有国家当日的总体疫情动态信息

 3.我的界面

评价与反馈的界面

 

点击提交后可在管理员后台处获取用户提交的信息

管理员后台界面添加了输入账户和密码之后才能查看的功能

登录后可获取用户提交的所有反馈结果。

4.小程序代码的整体结构

二。代码展示

1.首页国内疫情信息代码 inde

inde.wxml

<view class="top">
  <text>国外疫情信息查询</text>
</view>
<view class="middle">
  <view class="middle1" style="border-bottom: none;">
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>现有确诊</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: red;">{{nowConfirm}}</text></view>
    </view>
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>累计确诊</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: red;">{{confirm}}</text></view>
    </view>
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>累计治愈</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: green;">{{heal}}</text></view>
    </view>
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>累计死亡</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: grey;">{{dead}}</text></view>
    </view>
  </view>
  <view class="middle2">
    <view class="add">
      <view class="middle5">
        <view class="middle6"><text>地区</text></view>
        <view class="middle6"><text>累计确诊</text></view>
        <view class="middle6"><text>新增确诊</text></view>
        <view class="middle6"><text>治愈</text></view>
        <view class="middle6"><text>死亡</text></view>
      </view>
    </view>
    <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>
  </view>
</view>

inde.wxss

/* pages/inde/inde.wxss */
.top {
  width: 100%;
  height: 30px;
  font-weight: 800;
  margin-top: 20px;
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}

.middle {
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
}

.middle1 {
  width: 100%;
  height: 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.middle3 {
  width: 24%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12px;
}

.body text {
  font-size: 12px;
  font-weight: 700;
}

.body1 text {
  font-size: 12px;
}

.middle2 {
  width: 100%;
  height: 65%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.middle4 {
  width: 95%;
  height: 100%;
  background-color: #f5deb3;
  margin-bottom: 40px;
  border-radius: 10px;
}

.add {
  width: 95%;
  height: 100%;
  font-weight: 700;
}

.middle5 {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-around;
  margin-top: 3%;
}

.middle6 {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.body {
  width: 100%;
  height: 30%;
}

.body1 {
  width: 100%;
  height: 18%;
}

inde.js

// pages/inde/inde.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    index:0,
    list:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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
     })
   }
 })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

2.国外疫情信息代码 inde1

inde1.wxml

<view class="top">
  <text>国外疫情信息查询</text>
</view>
<view class="middle">
  <view class="middle1" style="border-bottom: none;">
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>现有确诊</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: red;">{{nowConfirm}}</text></view>
    </view>
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>累计确诊</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: red;">{{confirm}}</text></view>
    </view>
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>累计治愈</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: green;">{{heal}}</text></view>
    </view>
    <view class="middle3">
      <view class="body" style="border-top: 1px solid grey;"><text>累计死亡</text></view>
      <view class="body1" style="border-bottom: 1px solid grey;"><text style="color: grey;">{{dead}}</text></view>
    </view>
  </view>
  <view class="middle2">
    <view class="add">
      <view class="middle5">
        <view class="middle6"><text>地区</text></view>
        <view class="middle6"><text>累计确诊</text></view>
        <view class="middle6"><text>新增确诊</text></view>
        <view class="middle6"><text>治愈</text></view>
        <view class="middle6"><text>死亡</text></view>
      </view>
    </view>
    <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>
  </view>
</view>

inde1.wxss

/* pages/inde/inde.wxss */
.top {
  width: 100%;
  height: 30px;
  font-weight: 800;
  margin-top: 20px;
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}

.middle {
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
}

.middle1 {
  width: 100%;
  height: 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.middle3 {
  width: 24%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12px;
}

.body text {
  font-size: 12px;
  font-weight: 700;
}

.body1 text {
  font-size: 12px;
}

.middle2 {
  width: 100%;
  height: 65%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.middle4 {
  width: 95%;
  height: 100%;
  background-color: #f5deb3;
  margin-bottom: 40px;
  border-radius: 10px;
}

.add {
  width: 95%;
  height: 100%;
  font-weight: 700;
}

.middle5 {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-around;
  margin-top: 3%;
}

.middle6 {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.body {
  width: 100%;
  height: 30%;
}

.body1 {
  width: 100%;
  height: 18%;
}

inde1.js

// pages/inde/inde.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    index:0,
    list:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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
     })
   }
 })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

3.我的界面 my

my.wxml

<view class="top">
  <view class="top1">
    <view class="top2">
      <image src="{{userInfo.avatarUrl}}"></image>
    </view>

    <view class="top4">
      <text>{{userInfo.nickName}}</text>
    </view>
  </view>
</view>
<view class="body">
  <view class="body1" bindtap="aboutus">
    <view class="body2"><text>关于作者</text></view>
    <view class="body3"><image src="/pages/image/4.png"></image></view>
  </view>
  <view class="body1" bindtap="question">
    <view class="body2"><text>评价与反馈</text></view>
    <view class="body3"><image  src="/pages/image/4.png"></image></view>
  </view>
  <view class="body1"  bindtap="js">
    <view class="body2"><text>管理员后台</text></view>
    <view class="body3"><image  src="/pages/image/4.png"></image></view>
  </view>
</view>

my.wxss

.top{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top1{
  width: 95%;
  height: 80%;
  background-color: #f5deb3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 10px;
}
.top2{
width: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.top2 image{
  width: 60%;
  height: 80%;
  border-radius: 50px;
}

.top3{
width: 100%;
display: flex;
flex-direction: column;
}
.top4{
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.top4 text{
  margin-left: 10px;
}
.top5{
  width: 100%;
  display: flex;
align-items: center;
}
.top5 text{
  margin-left: 10px;
}
.body{
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
}
.body1{
width: 100%;
height: 50px;
border-bottom: 1px solid rgb(240, 229, 229);
display: flex;
justify-content: space-around;
}
.body2{
  width: 85%;
  display: flex;
  align-items: center;
}
.body3{
width: 8%;
display: flex;
align-items: center;
}
.body3 image{
  width: 50%;
  height: 30%;
}
.body2 text{
  font-size: 20px;
}

my.js

// pages/my/my.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that=this;
    wx.showModal({
      title:'温馨提示',
      content:'阳光的小程序需要获取您的昵称、头像等信息',
      success(res){
        if(res.confirm){
          wx.getUserProfile({
            desc: '需要获取您的昵称、头像等信息',
            success: res => {
              that.setData({   
                userInfo: res.userInfo
              })
            },
          })
        }else{
          wx.showToast({
            title: '获取您的信息失败，为了您更好的体验，请确定登录',
            icon: 'none',
            duration: 4000,
            success(res){
              wx.showModal({
                title:'温馨提示',
                content:'阳光的小程序需要获取您的昵称、头像等信息',
                success(res){
                  if(res.confirm){
                    wx.getUserProfile({
                      desc: '需要获取您的昵称、头像等信息',
                      success: res => {
                        console.log(res.userInfo)//控制台输出结果
                        that.setData({   
                          userInfo: res.userInfo
                        })
                      },
                    })
                  }
                }
              })
           }
          })
        }
      }
    })

  },
aboutus:function(res){
  wx.navigateTo({
    url: '/pages/about/about',
  })
},
question:function(res){
  wx.navigateTo({
    url: '/pages/question/question',
  })
},
js:function(res){
  wx.navigateTo({
    url: '/pages/js/js',
  })
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

        这里贴出了此小程序最重要的三个展示界面，其余的代码片段感性趣的朋友想要获取可私信我，欢迎大家一起学习讨论。