天气预报微信小程序设计与实现-蒲公英云

目录
摘要 I
Abstract II
第1章绪论 1
1.1课题研究背景及意义 1
1.2国内外研究动态 2
1.2.1国外发展现状 2
1.2.2国内发展现状 3
1.3论文研究的主要内容 4
1.4论文组织结构 5
第2章系统关键技术 6
2.1 MVC模式 6
2.2 微信小程序平台 9
2.2.1 微信小程序特性 9
2.2.2 微信小程序系统架构 10
2.2.3 微信小程序的常用基本组件 11
2.3本章小结 13
第3章系统分析 14
3.1系统设计目标 14
3.1.1设计目标 14
3.1.2设计原则 14
3.2系统需求分析 15
3.3性能分析 17
3.4本章小结 17
第4章系统设计 18
4.1程序设计 18
4.1.1用户界面设计 18
4.1.2程序模块设计 19
4.1.3程序开发 21
4.2系统总体架构设计 22
4.2.1基于MVC的系统架构设计 22
4.2.2视图层设计 24
4.2.3模型层设计 24
4.2.4控制层设计 25
4.3本章小结 25
第5章系统实现 26
5.1系统开发环境以及设计思路 26
5.2系统关键技术实现 26
5.2.1数据存储 26
5.2.2 Files 27
5.3系统功能模块实现 31
5.4系统界面的实现与展示 32
5.5本章小结 37
第6章系统测试 38
6.1系统测试方法介绍 38
6.2系统部分功能模块测试 38
6.3系统部分性能测试 42
6.3.1指标定义 43
6.3.2测试结果记录 43
6.3.3测试结论 44
6.4本章小结 44
第7章总结与展望 45
7.1总结 45
7.2未来展望 45
参考文献 47
致谢 49
1.3论文研究的主要内容
本文主要研究的是如何实现一个相对完整的，界面舒适的天气预报系统。该系统主要是基于微信小程序微信开发者开发工具的，使用的是java编程语言。在参照市面上现有的天气预报系统的基础上，力争做到界面美观大方，功能简洁齐全。而研究的就是如何设计前端的界面，以及如何实现前端与后台的交互。而最重要的则是如何联网获取天气信息以及获取天气信息以后显示在界面上并根据天气信息给出相关的出行生活建议。综上所述便是我们认为的一个合格的天气预报系统。
课题主要的研究内容如下：
（1）首先是系统的需求分析，通过网络调查以及统计身边同学手机上是否需求天气预报这一微信小程序，来客观分析我们的系统在市场上有无需求，以及通过从互联网上搜集出来的现有的天气预报微信小程序的源代码拿来研究。研究其系统的复杂性来考虑是否能够实现。
（2）介绍并分析了天气预报系统的相关开发技术以及特性。最为主要研究的是系统开发中涉及到的必要技术，这包括基于微信小程序微信开发者的开发模式和MVC模式，以及如何联网获取天气信息，主要需要获取的资源有温度、天气信息和出行建议等等。前端方面需要设计的联系和通信。通过分析和对比各种技术的特性及不足之处，基于笔者的掌握情况和系统的具体需求，明确了本系统的开发技术和工具选择，根据需求分析的结果，完成这样一个系统的总体设计。
（3）设计实现基于微信小程序微信开发者的总体构架，数据库方面因为本系统主要是通过联网获取的，所以不需要数据库的支持。
（4）设计实现完成天气预报系统，实现系统的功能分析和模块划分，并对研发的产品进行全面的测试，根据测试结果反映的问题进行修复和优化处理。
1.4论文组织结构
本论文共计七章，组织结构安排内容如下：
第一章，绪论。着重介绍了课题研究背景及意义，国内外研究动态，以及论文研究的主要内容。
第二章，系统关键技术研究。这一章详细介绍了本次毕业设计所必须的技术，其中包括微信小程序系统、微信小程序的基本框架和组件、MVC框架以及微信小程序微信开发者开发工具环境，介绍了如何构建一个合格的天气预报系统。目的是为了为以后的正式工作夯实基础，把每一个看似不重要的准备做好才能够在正式工作开始的时候游刃有余。
第三章，系统需求分析。本次设计的主要要求是要设计出一个天气预报系统，在正式设计之前必须要按照流程做出需求分析和可行性研究报告等。这些工作虽然繁琐却是在正式工作开始之前必备的，必须搞清楚本次设计的系统的市场需求。这一章明确了功能需求并将其总结成需求分析说明。
第四章，系统总体设计。本章在第二章的关键技术研究和第三章的需求分析的基础之上，对系统的整体架构设计进行了介绍，并阐释了系统的功能模块划分和数据库设计等，对微信营销管理系统的最终实现做出了必要的准备。
第五章，天气预报系统的实现。实现整个系统是本次课程设计的主要目标，本章主要介绍了本系统的开发环境和关键技术的实现，以及系统功能模块和系统界面的实现问题。本系统的实现需要的代码量很大，无法将代码全部写入文档中，因此本章只对核心模块重点叙述实现的方法和过程。
第六章，系统性能测试与分析。本章对系统的部分功能模块以及系统的性能进行了测试，详细分析了系统是否充分符合了需求，并给出了相关的修改意见。
第七章，总结与展望。本章对系统的实现过程进行总结和归纳，并针对系统的具体实现情况提出了系统有待改进之处，最后对后续工作进行了描述。
3.2系统需求分析
不同用户查看天气预报可能会有各不相同的原因，但是总结起来其本质都是一样的，即通过天气预报信息来指导自己的行为。从这个本质的需求可以得到一些常见的具体场景。想在未来某一天安排一项活动，看看天气是否适合。晚上睡觉前看看天气来决定第二天穿什么衣服。去某个地方出差或者旅游，根据当地天气情况来选择携带合适的行李。想了解一下当天不同时段的天气情况，最高温度有多少，是否会下雨。看看未来几天天气的趋势，是会凉快一点还是会更热，有没有降雨等。看看室外的空气状况，是否适合进行户外活动。
以上是一些比较常见的场景，由于不同用户的生活习惯不同，所以可能还会有很多其他使用场景。但是这些基础的使用场景基本上可以涵盖了大多数用户的使用情况，从这些场景中可以抽象出用户一些基本需求，进一步得到一款天气预报微信小程序需要具有的一些基本功能。有未来几日的天气预报信息，一天中不同时段的温度以及晴雨情况，可以查看多个城市的天气情况，能够查看空气质量。
其中温度和晴雨情况是用户最为关注的信息。由于天气预报类微信小程序的数据都是调用气象局的信息，因此在数据源上各类应用并未太大差异。要想赢得用户的青睐，就需要在信息的处理以及界面设计上下功夫。因此天气预报微信小程序的任务就是让用户用最直观的方式获取最有效的信息，并且在这个过程中有很好的体验，产生愉悦的心情。
本项目是一个安卓客户端应用软件，通过从气象局提供的数据接口获取实时的气象数据，将获取到的实时数据进行解析，然后提取对应的信息，通过安卓用户界面，将信息显示出来，包括日期，城市，风向，气温，天气以及对出行的着装的建议，而且数据包含今天，明天以及后天三天的数据，通过友好的交互界面，方便用户的查看。从功能上来说，用户第一次运行天气预报软件，会进行地理位置的设置，可以自行勾选城市，也可以通过定位来判断当前位置，从而记录自己所要查询的天气信息，系统会自动缓存用户所选的内容，然后将这些信息以及获取到的天气信息记录进数据库，方便用户查看，以及当数据过时会自动更新最新的数据。本程序主界面采用ViewFlipper视图，实现微信小程序界面滑动效果，主界面分为四个一面，第一页显示用户选定的首要城市的当天天气详细情况，以及未来三天天气的概况，并提供手动更新天气的按钮；第二页是城市设置页面，用户可以在设定最多9个城市作为用户关注的城市，并提供当天天气概览，用户可以在这里设定选择已经关注的城市作为首要关注城市；第三页是用户选定的首要城市天气情况的各种生活指数，包括晾晒指数、旅游指数、路况指数、舒适度指数、空气污染指数、紫外线指数，用户可以根据各种生活指数安排自己日常生活；第四页用一个可以上下滑动的ScrollView（卷轴视图）显示用户选定的首要城市的城市简介。
系统提供定时更新功能，根据用户选择可以设置每天天气自动更新的起始时间及更新时间间隔。根据我们面对的人群以及本软件应当实现的功能，本文转载自http://www.biyezuopin.vip/onews.asp?id=13979我们认为本系统应该有以下的几点功能需要实现：
（1）城市选择以及管理界面，这一界面的主要功能是手动定位需要了解天气的目标省份城市以及县区，通过每一级的详细显示来选择用户需要获取天气信息的城市，选择城市界面结束后进入到下一界面。
（2）显示具体天气信息的主界面，这一界面显示了包含当前城市，当前时间以及当前时间对应的温度，还应当显示空气质量和PM指数，并且给出当前时间后的三天的天气信息。这一界面还应当包含根据当前天气给出的诸如舒适度，洗车指数以及运行建议等等，作为主界面我们要求这一界面简洁明快，突出重点。
（3）在主界面中我们必不可少的模块是城市切换模块，可以在获取到当下地区的天气情况之后切换地区来获取我们想了解的大陆范围内的另一地区的天气情况。
（4）作为系统的界面设计，我们的背景图片不是一成不变的，我们通过联网从必应获取的每日一图作为界面的背景图片。

//app.js
App({
  onLaunch: function() {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo: function(cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      //调用登录接口
      wx.getUserInfo({
        withCredentials: false,
        success: function(res) {
          that.globalData.userInfo = res.userInfo
          typeof cb == "function" && cb(that.globalData.userInfo)
        }
      })
    }
  },
  globalData: {
    userInfo: null
  }
})