小程式元件開發 -- 疫情動態

之前有很多疫情相關的專案湧現，本弱雞的作品至今只有一點點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;
}

開發需求請點選

QQ： 1025584691