小程序组件开发 -- 疫情动态
之前有很多疫情相关的项目涌现，本弱鸡的作品至今只有一点点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> <view> <view>全国疫情 </view> <view>截至{{map.times}}数据统计</view> </view> <view> <view> <view> <view>现存确诊</view> <view>{{map.econNum}}</view> <view>{{map.add_daily.addecon_new}}</view> </view> <view> <view>累计境外输入</view> <view>{{map.jwsrNum}}</view> <view>{{map.add_daily.addjwsr}}</view> </view> <view> <view>现存无症状</view> <view>{{map.asymptomNum}}</view> <view>{{map.add_daily.addasymptom}}</view> </view> <view> <view>现存重症确诊</view> <view>{{map.heconNum}}</view> <view>{{map.add_daily.addhecon_new}}</view> </view> </view> <view> <view> <view>累计确诊</view> <view>{{map.gntotal}}</view> <view>{{map.add_daily.addcon_new}}</view> </view> <view> <view>累计死亡</view> <view>{{map.deathtotal}}</view> <view>{{map.add_daily.adddeath_new}}</view> </view> <view> <view>累计治愈</view> <view>{{map.curetotal}}</view> <view>{{map.add_daily.addcure_new}}</view> </view> <view> <view>现存疑似</view> <view>{{map.sustotal}}</view> <view>{{map.add_daily.wjw_addsus_new}}</view> </view> </view> </view> <view>各省疫情</view> <view> <view> <view>省份</view> <view>现存确诊</view> <view>累计确诊</view> <view>无症状</view> <view>死亡</view> <view>治愈</view> </view> <view wx:for="{{map.list}}" wx:key="index"> <view>{{item.name}}</view> <view>{{item.econNum}}</view> <view> <view>{{item.value}}</view> <view>({{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; }