版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156244.html
最近在帮人开发一款疫情答题微信小程序，要求每日抓取最新的疫情数据展示在小程序里，而且需要有疫情答题的功能，疫情答题微信小程序是非常适合现在的疫情爆发期间的。所以打算把开发疫情答题微信小程序中的经验和遇到的困难记录下来，也算是自己经验的积累。提升自己写作能力的同时也能帮助到别人，今天分享一下疫情答题微信小程序的主页开发
主页布局代码如下
<image bindlongtap="getMessage" class="background" src="/images/background.png"></image>
<view style="position: relative;top: -180rpx;">
<view class="padding">
<view class="card shadow bg-white" bindtap="checkin">
<view class="content">
<view class="text-left padding text-lg">截止到{{updateTime}}</view>
<view class='overview'>
<view class='g'>
<view class="number confirm">{{overviewData.confirm}}</view>
<view class="text">全国确诊</view>
</view>
<view class='g'>
<view class="number suspect">{{overviewData.suspect}}</view>
<view class="text">疑似病例</view>
</view>
<view class='g'>
<view class="number cure">{{overviewData.heal}}</view>
<view class="text">治愈人数</view>
</view>
<view class='g'>
<view class="number dead">{{overviewData.dead}}</view>
<view class="text">死亡人数</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='canvas-container'>
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
</view>
<view class='list'>
<view class='desc'>
<view class='detail'>详情</view>
</view>
<view class="table">
<view class="table-tr">
<view class="table-th">地区</view>
<view class="table-th">现确诊</view>
<view class="table-th">累计确诊</view>
<view class="table-th">累计死亡</view>
<view class="table-th">累计治愈</view>
</view>
<view class="table-tr" wx:for="{{tableData}}" wx:for-item="row" wx:key="{{row.area}}">
<view class="table-td">{{row.area}}</view>
<view class="table-td confirm">{{row.nowConfirm}}</view>
<view class="table-td confirm">{{row.confirm}}</view>
<view class="table-td dead">{{row.dead}}</view>
<view class="table-td cure">{{row.heal}}</view>
</view>
<view class="table-tr"></view>
</view>
</view>主页逻辑处理如下
const globalData = getApp().globalData
import * as echarts from '../../ec-canvas/echarts';
import geoJson from './mapData.js';
Page({
/**
* 页面的初始数据
*/
data: {
ec: {},
timer: '',
overviewData: {
confirmCount: 0,
suspectCount: 0,
cure: 0,
deadCount: 0
},
data: null,
tableData: null,
provinces:null,
updateTime: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this
this.oneComponent = this.selectComponent('#mychart-dom-area');
this.loadData();
var timer = setInterval(function () {
_this.loadData();
}, 30000)
this.setData({ timer })
},
onUnload: function () {
clearInterval(this.data.timer)
},
initChart: function () {
var that = this
that.oneComponent.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
echarts.registerMap('china', geoJson);
const option = {
tooltip: {
show: false,
trigger: 'item'
},
visualMap: {
show: true,
type: "piecewise",
left: 0,
bottom: "0",
align: "left",
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 10
},
pieces: [
{ min: 1000, label: '1000人以上', color: '#ED514E' },
{ min: 100, max: 999, label: '100-999人', color: '#FF8F66' },
{ min: 10, max: 99, label: '10-99人', color: '#FFB769' },
{ min: 1, max: 9, label: '1-9人', color: '#FFE6BD' },
{ min: 0, max: 0, label: '0人', color: '#E2EBF4' }
]
},
series: [{
type: 'map',
mapType: 'china',
label: {
show: true,
fontSize: 8
},
itemStyle: {
normal: {
borderColor: '#389BB7',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: that.data.data
}]
};
chart.setOption(option);
chart.on('click', function (params) {
var city = params.data.name
console.log(city)
that.getProvince(city)
wx.navigateTo({
url: '../detail/detail',
})
});
return chart;
});
},
loadData: function () { //加载数据
var _this = this
wx.request({
type: "get",
dataType: 'jsonp',
data: {},
url: 'https://view.inews.qq.com?name=disease_h5&t=' + Date.now(),
success: function (res) {
const json = JSON.parse(res.data);
const data = JSON.parse(json.data);
const overview = data['chinaTotal']
const areaTree = data['areaTree']
const china = areaTree[0]
const provinces = china['children']
const provincesData = provinces.map(item => {
return {
name: item.name,
value: item.today.confirm
}
})
const detail = provinces.map(item => {
return {
area: item.name,
today:item.today,
...item.total,
}
})
_this.setData({
overviewData: overview,
data: provincesData,
tableData: detail,
provinces:provinces,
updateTime: data.lastUpdateTime.substring(0, 10) })
_this.initChart()
},
fail: function (res) {
console.log(res)
},
})
},
getProvince:function(name){
var provinces = this.data.provinces
var item = provinces.find(function(item){
return item.name == name
})
globalData.province = item
console.log(item)
return item
}
})界面截图
今天先展示下疫情答题小程序的主页界面和代码实现，下篇博客具体介绍疫情答题小程序的实现细节。今天达叔走了，打的装备没人回收了，没心思多写，如果有疑问、有想交流的或者需要做小程序系统的可以加我微信（LGY178888），请备注来意！
共有 0 条评论 - 疫情答题微信小程序毕设源码之首页开发