小程序组件开发 -- 疫情动态
之前有很多疫情相关的项目涌现,本弱鸡的作品至今只有一点点star,本着骗star的原则,把一个比较常用的功能组件进行封装,方便各位小程序开发者使用,组件代码放在文章最后,只求一个小star ⭐。
项目地址 https://gitee.com/Kindear/m_epidemic
该项目疫情动态组件开发者 @WindrunnerMax
组件预览
组件引入
使用该组件不需要进行额外的修改操作,只需要作为 Component 组件进行引入即可使用。
具体引入路径和文件名称根据个人配置进行修改。
{
"usingComponents": {
"ddextend":"/pages/DiseaseDefend/DDExtend/DDExtend"
}
}
组件使用
配置合法域名 https://news.sina.cn
<ddextend></ddextend>
组件代码
右键新建Component -> 导入如下代码
DDExtend.wxml
<view class="page">
<view class="title">
<view>全国疫情 </view>
<view class="times">截至{{map.times}}数据统计</view>
</view>
<view class="overview card">
<view class="y-center-container">
<view>
<view class="description">现存确诊</view>
<view class="statistics" style="color: #ff3535;">{{map.econNum}}</view>
<view class="new">{{map.add_daily.addecon_new}}</view>
</view>
<view>
<view class="description">累计*输入</view>
<view class="statistics" style="color: #FE6B23;">{{map.jwsrNum}}</view>
<view class="new">{{map.add_daily.addjwsr}}</view>
</view>
<view>
<view class="description">现存无症状</view>
<view class="statistics" style="color: #FE9986;">{{map.asymptomNum}}</view>
<view class="new">{{map.add_daily.addasymptom}}</view>
</view>
<view>
<view class="description">现存重症确诊</view>
<view class="statistics" style="color: #8A121C;">{{map.heconNum}}</view>
<view class="new">{{map.add_daily.addhecon_new}}</view>
</view>
</view>
<view class="y-center-container">
<view>
<view class="description">累计确诊</view>
<view class="statistics" style="color: #B10000;">{{map.gntotal}}</view>
<view class="new">{{map.add_daily.addcon_new}}</view>
</view>
<view>
<view class="description">累计死亡</view>
<view class="statistics" style="color: #4B4B4B;">{{map.deathtotal}}</view>
<view class="new">{{map.add_daily.adddeath_new}}</view>
</view>
<view>
<view class="description">累计治愈</view>
<view class="statistics" style="color: #13B593;">{{map.curetotal}}</view>
<view class="new">{{map.add_daily.addcure_new}}</view>
</view>
<view>
<view class="description">现存疑似</view>
<view class="statistics" style="color: #A36FFF;">{{map.sustotal}}</view>
<view class="new">{{map.add_daily.wjw_addsus_new}}</view>
</view>
</view>
</view>
<view class="title">各省疫情</view>
<view class="card">
<view class="line">
<view>省份</view>
<view>现存确诊</view>
<view>累计确诊</view>
<view>无症状</view>
<view>死亡</view>
<view>治愈</view>
</view>
<view class="line" wx:for="{{map.list}}" wx:key="index">
<view>{{item.name}}</view>
<view>{{item.econNum}}</view>
<view>
<view>{{item.value}}</view>
<view style="margin-top: 5px;">({{item.conadd === "待公布" ? "待公布" : "+"+item.conadd}})</view>
</view>
<view>{{item.asymptomNum ? item.asymptomNum : "--"}}</view>
<view>{{item.deathNum}}</view>
<view>{{item.cureNum}}</view>
</view>
</view>
</view>
DDExtend.js
// pages/DiseaseDefend/DDExtend/DDExtend.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
map: {}
},
created: function () {
wx.showLoading({
title: '请求中',
mask: true
})
wx.request({
url: 'https://news.sina.cn/zt_d/yiqing0121',
success: res => {
try {
var data = JSON.parse(/ window.SM = (.*)/.exec(res.data)[1]);
var dataMap = data.data.apiRes.data.meta.datasource.rawdata.yiqingMapData.data;
console.log(dataMap);
this.setData({
map: dataMap
})
} catch (error) {
wx.showToast({
title: "请求失败",
icon: "none",
duration: 2000
})
console.warn(error);
}
},
fail: () => {
wx.showToast({
title: "请求失败",
icon: "none",
duration: 2000
})
},
complete: () => {
wx.hideLoading();
}
})
},
/**
* 组件的方法列表
*/
methods: {
}
})
DDExtend.wxss
/* pages/DiseaseDefend/DDExtend/DDExtend.wxss */
.page{
box-sizing: border-box;
padding: 10px;
margin-bottom: 50px;
}
.title{
display: flex;
padding: 12px 7px;
margin-top: 10px;
background-color: #fff;
border-bottom: 1px solid #eee;
}
.title::before{
content: "";
display: block;
width: 2px;
background-color: #4C98F7;
margin:0 5px;
}
.card{
padding: 0 5px 10px 5px;
background-color: #fff;
}
.times{
font-size: 13px;
margin-left: 5px;
align-self: flex-end;
}
.overview{
padding-top: 5px;
}
.overview > view{
padding-top: 10px;
}
.overview > view > view{
flex: 1;
text-align: center;
line-height: 27px;
}
.x-center-container {
display: flex;
justify-content: center;
}
.y-center-container {
display: flex;
align-items: center;
}
.description{
font-size: 13px;
}
.statistics{
font-size: 20px;
font-weight: bold;
}
.new{
font-size: 13px;
font-weight: bold;
}
.line{
display: flex;
padding: 20px 0;
font-size: 12px;
border-bottom: 1px solid #eee;
align-items: center;
}
.line > view{
flex: 1;
text-align: center;
}