《移动软件开发》实验二天气查询小程序实验报告

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

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

添加 picker（地区选择器）、text（文本）、image（图片）和多层嵌套 view 组件

通过 class 指定容器样式类名（container、detail、bar、box 等）

在 wxss 文件中使用 flex 布局设置页面整体结构和元素样式

在 data 中初始化变量（region 存储地区信息，now 对象存储天气数据）

为 picker 组件绑定地区选择事件 bindregionChange，当选择地区后触发

注册和风天气并获取API

在 bindregionChange 函数中更新选中的地区信息，并调用 getWeather 函数获取天气数据

在 getWeather 函数中，先调用地理编码 API 将地区转换为 locationId

使用 locationId 调用天气 API 获取实时天气数据

将获取到的天气数据更新到 data 中的 now 对象，实现页面数据绑定展示

通过数据绑定将 now 对象的属性（温度、天气状况、图标等）展示在对应组件上使用多层 view 嵌套和 class 命名实现网格状天气详情布局

• data 中初始化了默认地区（北京市）和天气数据结构

• bindregionChange 函数用于处理地区选择变化，更新 region 并调用 getWeather

• getWeather 函数实现了两步 API 调用：

  1. 先通过地理编码 API 将地区名称转换为 locationId

  2. 再使用 locationId 调用天气 API 获取实时天气数据

• 使用 that 保存 this 上下文，确保在回调函数中正确更新页面数据

• 成功获取天气数据后，通过 setData 更新 now 对象，实现页面数据刷新

• onLoad函数通过调用getWeather函数保证每次初始化后显示的数据均为默认地址的数据

• 

• 全局 text 样式设置了较大字号和蓝色，突出显示温度信息

• box 类设置宽度为 33.3%，实现三列等分布局

• bar 类使用横向 flex 布局，实现每行三个元素的排列

• detail 类设置为 100% 宽度，内部元素垂直排列

• container 类使用 flex 布局，使页面元素垂直排列并均匀分布

• image 组件通过动态路径/images/weather_icon/{{now.icon}}.png显示对应天气图标
• 天气数据通过 {{now. 属性名}} 的方式绑定到对应组件
• 通过 {{region}} 绑定显示当前选择的地区
• 使用 picker 组件并设置 mode=\'region\' 实现省市区三级选择

三、程序运行结果

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

四、问题总结与体会

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

1. 地理编码 API 无有效数据

   • 现象：部分地区（如 “石家庄长安区”）无法返回locationId，天气 API 断连。

   • 解决：补充adm参数明确上级市，添加默认城市（北京），避免无数据空白。

2. 天气图标加载失败

   • 现象：图标显示 “裂图”，控制台报 404。

   • 解决：统一图标文件名为 “纯数字.png”（如 101.png），匹配 API 返回的icon代码，补充缺失图标。

3. 数据驱动视图的高效性：仅通过setData更新now对象，页面自动同步渲染，无需手动操作 DOM，深刻体会小程序 “数据变则视图变” 的便捷性。

4. API 调用需重视异常处理：密钥失效、地区识别失败等问题频发，需设置默认值、捕获fail错误、阅读 API 文档，避免流程中断或用户无感知。