移动开发作业实验2

实验2：天气查询小程序

一、实验要求

主要介绍使用小程序网络API的相关应用制作一款天气查询小程序。学习目标为：1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、准备工作

1. 首先我们需要申请实时天气的API，即注册账号之后申请key
   
2. 申请key之后如下
   
3. 把需要访问的接口地址添加到小程序的服务器域名管理中
   
4. 添加完成后

5. 获取的JSON数据的意义

三、页面创建

3.1 基础设置

1. 创建页面文件，类似于实验1
2. 删除和修改文件，类似于实验1中的手动创建项目文件
3. 创建images文件夹，把天气图标添加到代码文件夹中去
   
4. 修改导航栏的文字和背景颜色

3.2 页面设计

• 页面上主要包含4个区域
  1. 区域1：地区选择器，用户可以自行选择查询的省、市、区
  2. 区域2：显示当前城市的温度和天气状态的文字说明
  3. 区域3：显示当前城市的天气图标
  4. 区域4：分多行显示其他天气信息，例如湿度、气压、能见度和风向
• 页面使用的组件
  1. 区域1：picker组件
  2. 区域2：text组件
  3. 区域3：image组件
  4. 区域4：view组件
• 基本实现页面的架构之后
  

3.3 逻辑实现

1. 修改picker组件中的内容为{{region}}，然后再使用bindchange监听选项变化
   
2. 在JS文件中使用自定义函数getWeather进行实况天气数据的获取，但是在获取数据的过程中，我们只有城市的名字，而没有ID，所以我们要先通过另一个接口来先获取到城市的ID之后再进行天气数据的获取。
3. 通过在实时天气的官方文档上，可以找到获取城市ID的接口，如下图
   
4. 每次在调用getWeather函数之前调用一下getID函数，获取到ID之后，再获取天气数据
   
5. 每次在调用getWeather函数之前调用一下getID函数，获取到ID之后，再获取天气数据
   
6. 最后成功地调用到了天气数据
   
7. 最后成功展示了天气数据

四、实验体会

这次实验较上次实验花费的时间明显要多一些了，主要是还是由于获取城市的天气需要城市的ID，但是文档中没有给出这一项。所以在网上找了许多工具都无果，最后在实时天气的官方API上发现了有可以通过城市的名字获取城市的ID的接口。在这期间还遇到了另外一个问题：那就是如何保证在获取实时天气之前getID函数已经把ID给提前获取到了。因为wx.request函数是异步进行的，也就会造成“看得见但抓不住”数据的情况。对于这种情况，可以提前在data里面存储一个id，那么就算一开始没有获取到id，getWeather函数也可以直接利用静态的id进行访问天气数据。