简述

本文介绍 “公众空气质量” 小程序重构过程中遇到的问题及解决思路

需求分析

基于现有的用户反馈及自己使用过程中觉得比较繁琐的内容进行修改，重点修改以下内容：
1、原本站点分布（地图）隐藏太深
2、使用滚动选择器picker，切换城市不便
3、指示说明等概念太长，不易快速浏览

实现过程

功能拆分

0.0.9 功能拆分

0.1.5 功能拆分

功能实现

1、实时数据地图突出显示

原始cityitem跳转流程

简化后cityitem展示流程

  onShow: function () {
    var that = this
    try {
      const value = wx.getStorageSync('default_address')
      if (value) {
        that.setData({
          city: value
        })
      }
    } catch (e) {
    }
    //检索数据中最新时刻
    config.findTime_CityAqi(that.data.city)
      .then(d => {
        if (d.length > 0) {
          //保留到小时
          var time = d[0].time.substring(0, d[0].time.length - 3)
          that.data.boards_map[0].time = time
          that.setData({
            boards_map: that.data.boards_map
          })
        }
      })
      .catch(e => {
        this.setData({ title: '获取数据异常', aqi: {}, loading: false })
        console.error(e)
      })

    config.findTime_CityAqi_day(that.data.city)
      .then(d => {
        if (d.length > 0) {
          that.data.boards_map[1].time = d[0].time;
          that.setData({
            boards_map: that.data.boards_map
          })
        }
      })
      .catch(e => {
        this.setData({ title: '获取数据异常', aqi: {}, loading: false })
        console.error(e)
      })
  },
  onLoad: function () {
    var that = this
    //初次加载，默认时间
    that.data.boards_map[0].time = config.getDate('', 'Reduce', '时', 'yyyy-MM-dd HH:00')
    that.setData({
      boards_map: that.data.boards_map
    })
    that.data.boards_map[0].time = config.getDate('', 'Reduce', '天', 'yyyy-MM-dd')
    that.setData({
      boards_map: that.data.boards_map
    })
  }

2、切换城市优化
原始城市切换为滚动选择，需频繁切换城市时比较崩溃，参考其他类似代码进行实现（只显示接入空气质量监测的城市）

  //触发切换城市
  bindRegion: function () {
    wx.navigateTo({
      url: '../city-switch/city-switch'
    })
  }

城市切换

  //选择城后切换回原始菜单
  bindCity: function (e) {
    console.log("bindCity")
    this.setData({
      city: e.currentTarget.dataset.city
    })
    wx.setStorage({
      key: "default_address",
      data: e.currentTarget.dataset.city
    })
    wx.navigateBack()
  }

3、拆分说明内容
将原始内容按块拆分组织

其他

经验总结

同步与异步

感觉目前异步处理极其简单，同步处理反倒麻烦
之前使用 bluebird.js 封装一部请求，后续实际使用中需要先获取最新时间，再使用最新时间去获取数据，如直接嵌套使用会出现对应警告
为规避同步问题，目前将获取时间拆分至放主页自动 获取/设置，通过参数进行传递

初始化加载

使用'onLoad'默认菜单初次加载内容，使用'onShow'加载每次切换均需检查内容