疫情信息查询微信小程序的实现
2024-04-21 16:06:46
一.小程序的整体结构和界面展示
本人所用的全部疫情数据的信息来源于腾讯提供的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}} </text></view><view class="middle6"><text decode="{{true}}">{{item.confirmAdd}} </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}} </text></view><view class="middle6"><text decode="{{true}}">{{item.confirmAdd}} </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() {}
})这里贴出了此小程序最重要的三个展示界面，其余的代码片段感性趣的朋友想要获取可私信我，欢迎大家一起学习讨论。
疫情信息查询微信小程序的实现相关推荐
- 【附源码】Java计算机毕业设计计算机配件价格查询微信小程序（程序+LW+部署）
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- 可运营快递查询微信小程序源码
小程序源码说明 快递查询微信小程序源码,无需要数据库,内置天行数据API接口,大家也可以自行更换接口,搭建即可直接运营. 源码搭建教程 1. 去微信公众平台注册小程序 2. 下载微信开发者工具 3. ...
- 星座运势查询微信小程序源码 周公自定义解梦源码
源码介绍 这是一款以星座运势查询,周公自定义解梦为主的一款小程序 内支持流量主模式插入 多个功能包含如下: 星座查询 星座运势查询 十二生肖查询 生肖运势查询 星座配对 生肖配对 配对排行榜 星盘查询 ...
- 十二星座运势查询微信小程序源码
不错,这是一款星座查询小程序 该款小程序支持分男女查询 支持给综合运势,爱情运势,事业运势,财富运势等等打星 支持每种运势解说,支持查看特点等等功能 另外该款小程序还支持提前查看明日往后日子的运势 总 ...
- 十二星座运势查询微信小程序源码支持多流量主提前查看
不错,这是一款星座查询小程序 该款小程序支持分男女查询 支持给综合运势,爱情运势,事业运势,财富运势等等打星 支持每种运势解说,支持查看特点等等功能 另外该款小程序还支持激励视频提前查看明日往后日子的 ...
- 小程序源码：十二星座运势查询微信小程序
不错,这是一款星座查询小程序 该款小程序支持分男女查询 支持给综合运势,爱情运势,事业运势,财富运势等等打星 支持每种运势解说,支持查看特点等等功能 另外该款小程序还支持激励视频提前查看明日往后日子的 ...
- 微信小程序：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询
这是一款战力查询的微信小程序源码 源码内自带了接口 目前支持了微信,QQ,苹果,安卓全区都可以查询 支持流量主收益,而且搭建安装简单 使用微信开发者工具打开源码然后设置一下合法域名上传审核即可 该小程 ...
- 北京实时公交查询微信小程序
目录 实现效果 源代码 实践报告 摘要 概述 题目的背景及研究意义 本系统主要研究内容 系统需求分析 公交路线查询模块需求分析 附近公交站点信息查看模块需求分析 公交实时信息查看模块需求分析 实时公交 ...
- 小程序源码：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询-多玩法安装简单
这是一款战力查询的微信小程序源码 源码内自带了接口 目前支持了微信,QQ,苹果,安卓全区都可以查询 支持流量主收益,而且搭建安装简单 使用微信开发者工具打开源码然后设置一下合法域名上传审核即可 该小程 ...
最新文章
- aws lambda使用， aws无服务器部署应用。 aws ecr凭证获取和使用。
- AI芯片进入新阶段 哪种企业能胜出？
- HDU - 1051 Wooden Sticks
- 【Tools】VNC Viewer 6.20安装详解
- C++ 解决enum redeclaration的冲突
- SpringMVC与Ajax交互
- Storm编程模型总结
- java getipaddress_教你java用getAddress方法取得IP地址
- python函数对变量的作用_python函数局部变量用法
- Verilog HDL 学习笔记3-Latch
- 【Elasticsearch】elasticsearch 磁盘相关常用配置 磁盘优化
- Java中文汉字转汉语拼音
- wps带阴影的边框怎么设置_win7系统下wps阴影边框如何设置
- （微信定时发送消息）一个java文件，完成可配置的微信定时发送消息任务
- CentOS 6.4 x64 Cacti 监控安装配置
- python之selenium和xpath简单知晓国服魔兽世界正式服人口普查
- 蓝牙耳机选哪种的比较好、高端蓝牙耳机推荐
- 用 Uno Platform 构建一个 Kanban-style Todo App
- MATLAB | 一文解决各类曲面交线绘制，包含三维隐函数曲面交线
- 什么是Asterisk？