天气查询小程序

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

一、实验目标

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

二、实验步骤

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

1.准备工作。

（1）首先在和风天气官网 https://www.qweather.com上的天气API进行注册，获得key；

（2）接着配置服务器域名，登录mp.weixin.qq.com进入管理员后台->设置->开发设置->将https://devapi.qweather.com添加到”request合法域名“中；

（3）在https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip下载天气图标，（解压后放在新建项目的新建images文件夹下）。

2.新建项目，选择不适用云服务，命名为Weather。

3.视图设计。

（1）导航栏设计。在app.json中进行修改：

编译结果为：

（2）页面设计。

在index.wxml中，首先设计页面容器container，并在index.wxss中设计布局：

接着，分别设计区域1：地区；区域2：单行天气信息——温度；区域3：天气图标；区域4：多行天气信息，实现如下：

同时在index.wxss设计相应大小颜色：

3.逻辑实现，需要切换为游客模式。

（1）首先更新市区信息，先在picker中添加事件处理函数regionChange，再在index.js中实现函数（上述index.wxml展示的是已修改后的），index.js实现如下：

（2）接着，获取天气数据，在index.js文件中实现getWeather函数如下，实现时需要用到两个网址，

获取城市id：https://geoapi.qweather.com/v2/city/lookup?；

获取城市天气：https://devapi.qweather.com/v7/weather/now?。以及之前在和风天气官网得到的key。

同时需要在regionChange函数中调用该函数用于实现天气随地区变化而变化；

以及在onLoad函数中调用该函数用于实现天气的初始化：

（3）更新天气信息，在index.wxml中进行修改，之前图片展示的即为已更改过的，其中now保存的即为当前城市的天气情况。

三、程序运行结果

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

初始页面：

点击地点可进行修改：

结果为：

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

​ 通过本次实验学习了配置服务域名以及wx.request接口的用法，实验中在实现获得天气信息函数getWeather函数时遇到了问题，无法进行实时更改，通过和同学讨论以及在CSDN上查询问题解决方法得到了解决。
源码：https://github.com/learningyjz/Lab