移动软件开发 微信小程序 第二次实验

2022年夏季《移动软件开发》实验报告

实验名称:实验2：天气查询小程序

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1、准备工作

（1）API密钥申请

（2）API调用方法

（3）服务器域名配置

2、项目创建（太简单，就不放截图了）

3、页面配置

（1）创建页面文件

（2）删除和修改文件

​ 这两步与第一次实验差不多，这里就不截图了

（3）创建其他文件

4、视图设计

（1）导航栏设计

（2）页面设计

整体容器设计

区域1（地区选择器）设计

区域2（文本）设计

区域3（天气图标）设计

区域4（多行天气信息）设计

5、逻辑实现

更新省、市、区信息

获取实况天气数据

这里研究了好久，因为网站的更新，以前直接根据城市名称访问天气数据的方法不行，现在得先获得城市编号，再根据编号搜索天气，但是因为js是异步执行的，所以我这里采用了回调函数的方法。

更新页面天气信息

三、程序运行结果

列出程序的最终运行结果及截图。

四、问题总结与体会

问题：

1、主要就是版本更新导致请求的数据不一样

解决方法：使用了两次请求，第一次获取了城市的Id，第二次根据城市Id获取天气信息

2、因为使用了两次请求，而js有异步执行的机制，所以导致第一次得到的数据在第二次才会显示出来

解决方法：通过回调函数，在第一次请求中就调用第二次请求，使两次请求同步执行，解决问题

体会：

第一次获取了城市的Id，第二次根据城市Id获取天气信息

2、因为使用了两次请求，而js有异步执行的机制，所以导致第一次得到的数据在第二次才会显示出来

解决方法：通过回调函数，在第一次请求中就调用第二次请求，使两次请求同步执行，解决问题