实验2：天气查询小程序

一、实验目标

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

二、实验步骤

1. 首先到和风天气开发服务 ~ 强大、丰富的天气数据服务 (qweather.com)官网注册账号。进入控制台，创建项目。设置项目名称，选择订阅为“免费订阅”，设置KEY为“Web API”并填写名称。

   

2. 然后到微信公众平台中对小程序进行配置，在“开发管理”中选择“开发设置”。

   

   然后配置服务器域名https://devapi.qweather.com，添加和风天气免费订阅域名，注意此处付费订阅和免费订阅域名不一样。

   

3. 接下来打开微信开发者工具，创建一个新项目，不使用云服务，不使用模板，注意AppID要使用刚刚配置服务器域名的小程序账号的ID。

   

4. 从实验手册中提供的网址https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip中下载天气图片和utils.js，解压后添加到新项目中，添加后文件目录如下。

   

5. 导航栏设计是在app.json中修改，代码如下图所示：

   

   修改后保存可以看到导航栏的变化效果：

   

6. 页面设计是在pages/index/index.wxml中修改，根据实验文档编写代码即可：

   

7. 在app.wxss中设置容器样式，代码如下：

   

8. 在pages/index/index.wxml和pages/index/index.wxss中对应修改4个区域内的代码。

   • 区域1：地区选择器设计<picker>

     wxml代码及其效果如下：

     

   • 区域2：文本设计<text>

     wxml和wxss代码分别如下：

     

   • 区域3：天气图表设计<image>

     wxml和wxss代码分别如下：

     

   • 区域4：多行天气信息设计<view>

     wxml和wxss代码分别如下：

     

9. 在pages/index/index.js中进行逻辑实现，data中是页面初始数据，regionChange函数可以更新省、市、区信息，onLoad函数用于监听页面加载。

   

   切换地区可以在AppData中看到region中信息发生了改变。

   

10. 编写getWeather函数获取实时天气信息，添加和风天气中的KEY，通过console.log(res.data)输出可以知道天气所在属性为now。

11. 然后在pages/index/index.wxml和pages/index/index.wxss中将数据替换为实时数据，然后编译运行即可。

    

三、程序运行结果

未切换地区时的界面如下：

切换地区后的界面如下：

四、问题总结与体会

1. 实验中因为和风天气更新，和实验文档中不一样，所以需要到官网中阅读官方文档。

2. 实验中region的location的id无法获取，可以通过实验文档中的下载链接下载utils，并使用其中的getLocationID函数遍历获取location的id。

   

3. 通过这次实验，熟悉了 wx.request 接口的用法。