云诺说 - 小程序开发 - 软件定制

疫情答题微信小程序毕设源码之首页开发

2021-02-27 09:38 分类:毕设教程_分享微信小程序,Java,php,python毕业设计系统,springboot,爬虫,数据分析可视化等毕业设计作品案例 作者:云诺 阅读(2210)

版权声明:本文为博主原创文章,如果转载请给出原文链接: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
  }


})

界面截图

QQ截图20210227212844.jpg

今天先展示下疫情答题小程序的主页界面和代码实现,下篇博客具体介绍疫情答题小程序的实现细节。今天达叔走了,打的装备没人回收了,没心思多写,如果有疑问、有想交流的或者需要做小程序系统的可以加我微信(LGY178888),请备注来意!

相关推荐

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

共有 0 条评论 - 疫情答题微信小程序毕设源码之首页开发

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、软件服务定制和生活记录的技术服务型学习博客网站。

微信 :LGY178888

职业 :小程序开发、软件定制

现居 :广东省-广州市-天河区

最近更新

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:170 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:180 个
  • 评论总数:0 条
  • 访问总量: 854116次
  • 最近更新:2024年12月10日