实验2 天气预报

chunk的博客地址

一、实验目标

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

二、实验步骤

（一）准备工作

1. 申请API密钥

   • 选择可以提供全球气象数据服务s接口得和风天气API，首先进入官方网址，输入邮箱免费注册；
     
   • 注册完成后访问控制台查看账号信息，依据官方文档成功生成API KEY，记录该key。（API KEY可以用于在小程序发出网络请求时作为身份识别的标识一起发送给和风天气的第三方服务器）
     

2. 调用API

   • 取出在和风天气中的API KEY及API Host
   • 访问https://mn5xmd96fj.re.qweatherapi.com//v7/weather/now?location=101010100&key=f40427d91c8c43a9a7db17aede262b09。

weather关键字代表获取实况天气，基于weather的接口有两个必填参数，分别为city和key，其中，city表示要查询的城市，此处选取城市ID为主要参数，key即为开发者的API KEY。

3. 服务器域名配置

   登录微信公众平台，进入小程序管理员后台，在“开发设置面板”的“服务器域名”中添加或修改所需要的网络通信的服务器域名地址。此小程序主要需要添加的为request合法域名，即为开发者在和风天气中的API Host。
   

（二）小程序开发

项目创建

在微信开发者工具新建空项目。

页面配置

1. 创建页面文件
   在根目录下生成文件夹pages存放页面文件，首页默认为index。
   

2. 删除和修改文件

   • 删除utils文件夹及其所有内容；
   • 删除pages文件夹下的logs目录及其所有内容；
   • 删除index.wxml、index.wxss和app.wxss的所有代码；
   • 删除index.js的全部代码，输入关键词"page"自动补全函数；
   • 删除的app.js的所有代码，输入关键词"app"自动补全函数。
     
     

3. 创建其他文件
   本项目还需要一个文件夹用存放天气图标素材，素材均来自于和风天气官网。在根目录下新建images文件夹及其子文件夹weather_icon，将图片文件全部复制进去。（需要注意的是，为了使图片更加覆盖各种天气，这里下载的是和风天气官网提供的完整zip，但图片格式为.svg）
   

视图设计

1. 导航栏设计
   更改app.json文件将导航栏标题和背景改为自定义颜色。
   图中所示代码改为蓝色背景色，预览效果如图。
   

2. 页面设计

   本小程序页面主要包含4个区域：

   1. 区域1： 地区选择器，用户可以自行选择查询的省、市、区；
   2. 区域2： 显示当前城市的温度和天气状态的文字说明；
   3. 区域3： 显示当前城市的天气图标；
   4. 区域4： 分多行显示其他天气信息，如湿度、气压、能见度和风向。
      具体使用的组件如下：

   • <view>

   • <picker>

   • <image>
     首先，定义页面的容器container并在app.wxss中设置容器样式，包括高度、布局、是否居中以及间距。
     
     接着，添加各种组件元素。

   • 区域1：使用<picker>组件完成，用户可以点击切换其他城市，组件内部随意填写一个城市名称（相当于默认城市），当点击城市名称时会从底部弹出控件让用户进行省、市、区的选择；
     

   • 区域2：主要是进行文字的设计，包括当前城市的温度和天气状况；
     

   • 区域3：将天气图标导入（由于文件中下载的是.svg的图标，因此在image组件内部必须注意要写为：/images/weather_icon/1.svg)；
     

   • 区域4：展示多行天气信息，使用detail，接着定义需要的单元行（bar），在每行内部定义单元格(box)。
     

逻辑实现

1. 更新省、市、区信息
   将picker组件中的具体省份改为{{region}}，接着为该组件追加自定义的bindchange事件，用于监听选项变化；
   
   由于地区选择器的返回结果是数组的形式，因此在JS文件的data中定义一个包含省、市、区三个项目的数组，初始信息由开发者自己定义。
   
2. 获取实况天气数据
   在JS文件中添加自定义getWeather函数进行实况天气数据的获取，后续的天气查询以城市作为查询依据。
   
   将定义的getWeather函数在生命周期函数onLoad和regionChange中分别调用，表示当页面加载时和切换城市时均主动获取一次实况天气数据。
   
   编译后重新运行会在控制台得到第三方服务器发挥的JSON数据，如图所示。
   
3. 更新页面天气信息
   将WXML页面上的所有零食数据都替换成{{now.属性}}的形式，为了加快获取数据的速度，最好在IS文件的data中为now规定初始数据，在获取到实际数据之前可以临时显示这些数据。
   
   

三、程序运行结果

可以成功获取动态获取各城市天气：

四、问题总结与体会

主要问题及解决方案

1. API配置问题

   • 问题：URL地址不完整，域名未加入白名单

   • 解决：配置完整API地址，在小程序后台添加域名白名单

2. 参数格式错误

   • 问题：使用城市名称而非城市代码

   • 解决：建立城市名称到代码的映射关系

3. 数据字段不匹配

   • 问题：API返回字段与代码期望字段不一致

   • 解决：修正字段映射关系

4. 图标格式错误

   • 问题：代码引用PNG格式，实际为SVG格式

   • 解决：修改图标路径为正确的SVG格式

5. 缺少动态更新

   • 问题：location参数硬编码，无法动态切换城市

   • 解决：实现getCityCode函数，支持动态城市代码获取

主要收获

1. 微信小程序开发技能
   • 学会了picker组件的多级联动，支持省市区三级选择
   • 理解了数据绑定机制和setData的使用方法
   • 更加熟悉小程序的生命周期函数（onLoad、onShow等）
2. 网络编程与API集成
   • 学会了使用wx.request接口，了解API及服务器域名配置
   • 掌握了JSON数据的解析和字段映射技巧
3. 调试与问题解决能力
   • 熟练使用微信开发者工具的调试功能和网络面板
   • 掌握了系统性的问题分析方法：问题定位→原因分析→解决方案→验证测试
   • 提升了阅读官方文档和API文档的能力