小程序组件开发 -- 疫情动态

之前有很多疫情相关的项目涌现，本弱鸡的作品至今只有一点点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;
}