专栏首页算法与数据结构小程序组件开发 -- 疫情动态

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序--粉丝列表 样式实现

    Kindear
  • 蓝桥杯:兰顿蚂蚁

    问题描述 ?   兰顿蚂蚁,是于1986年,由克里斯·兰顿提出来的,属于细胞自动机的一种。   平面上的正方形格子被填上黑色或白色。在其中一格正方形内有一...

    Kindear
  • Java 对 Cookie增删改查

    Cookie的有效路径,/ 表示这个路径即该工程下都可以访问该cookie 如果不设置路径,那么只有设置该cookie路径和其子路径可以访问。

    Kindear
  • 微信小程序WXML页面常用语法(讲解+示例)

    官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

    BWH_Steven
  • Android中View研究自学之路

    写这篇博客呢是在研究了view将近一个月之后,算是对自己的学习做一个总结,进而反思一下学习方法,本博文不涉及代码分析。

    fanfan
  • 小程序url传参如何写变量

    蓓蕾心晴
  • Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)

    Android中View研究自学之路 http://blog.csdn.net/zrf1335348191/article/details/54171263 ...

    fanfan
  • Android6.0源码分析之View(一)

    目前对于view还处于学习阶段,本来打算学习结束之后再写一篇进行总结,但是发现自己自制力太差,学习效率太低,所以在此,边学边写博客,不仅督促自己完成对view的...

    fanfan
  • Android "巧"仿蚂蚁森林水滴动效

    本文重在思路和性能,就不介绍自定义view和handler避免内存泄漏或是导致空指针这些了,喜欢请clone项目并star、fork一下,感谢各位。

    CCCruch
  • View官方文档

    nimomeng

扫码关注云+社区

领取腾讯云代金券