OUC 2024夏移动软件开发实验二：天气查询小程序

归零者007

已于 2024-08-27 08:52:48 修改

阅读量710

点赞数 11

文章标签：微信小程序小程序 javascript 课程设计

于 2024-08-20 23:45:14 首次发布

本文链接：https://blog.csdn.net/m0_73384012/article/details/141370766

版权

一、实验准备

课程主页：课程主页(gitee.com)

实验文档：lab2.pdf (gitee.com)

学习视频：第二个小程序（1）bilibili.com

二、实验目标

1、掌握服务器域名配置和临时服务器部署；

2、掌握 wx.request 接口的用法。

三、实验步骤

1、“和风天气”API密钥申请

和风天气官方网址为和风天气 (qweather.com)。

和风天气开发服务提供了API、iOS SDK和Android SDK用以访问基于位置的天气数据，包括实况天气、30天预报、逐小时预报、空气质量AQI，灾害预警、分钟级降水、生活指数等天气数据服务。

当我们选择“免费用户”类型，使用邮箱进行注册并激活后可以获取三天之内全球各地区的实时天气，支持的免费接口调用流量基本上可以满足我们这次试验的开发学习要求。

密钥申请步骤如下：

(1) 进入开发服务控制台

(2) 进入项目管理

(3) 创建项目

填写项目名称
选择“免费订阅”
设置KEY，适用平台为“Web API”，并填写KEY的名称
点击“创建”

（4）添加KEY

设置KEY，适用平台为“Web API”，并填写KEY的名称
点击“创建”

(5)查看密钥并保存

密钥申请
密钥查看

2、服务器域名配置

当我们从小程序中读取天气有关的信息时，需要访问“和风天气”的服务器，因此需要对相关域名地址进行服务器配置。所需的域名地址如下：

https://devapi.qweather.com

https://geoapi.qweather.com

服务器域名配置步骤如下：

进入微信公众平台
登陆，进入“管理”
进入“开发管理”
进入“开发设置”
下拉到服务器域名，点击修改，将上述两个接口添加到“request合法域名”中。结果如下图：

服务器域名配置

3、项目配置

（1）创建新项目

类似实验一，这里不再赘述。

（2）导入和风天气图标素材

项目新建images文件夹
进入和风天气图标 (qweather.com)，下载图标素材压缩包，并解压到项目images文件夹

4. 视图设计

4.1 导航栏设计

在 app.json 文件中自定义导航栏标题和背景颜色。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "实验二：天气查询小程序", 
    "navigationBarBackgroundColor": "#3C5F81"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

4.2 页面设计

（1）页面结构

index.wxml代码如下：

<!--index.wxml-->
<view class='container' >
<!-- 区域1：地区选择器 -->
<picker mode='region' bindchange="changeRegion">
  <view>{{region}}</view>
</picker>

<!-- 区域2：文本区域 -->
<text>{{now.temp}} {{now.text}}</text>

<!-- 区域3：图片区域 -->
<image src='/images/QWeather-Icons-1.6.0/icons/{{now.icon || 999}}.svg'></image>

<!-- 区域4: 多行天气信息 -->
<view class='detail'>
  <view class='bar'>
    <view class='box'>湿度</view>
    <view class='box'>气压</view>
    <view class='box'>能见度</view>
  </view>
  <view class='bar'>
    <view class='box'>{{now.humidity}}%</view>
    <view class='box'>{{now.pressure}}hPa</view>
    <view class='box'>{{now.vis}}Km</view>
  </view>
  <view class='bar'>
    <view class='box'>风向</view>
    <view class='box'>风速</view>
    <view class='box'>风力</view>
  </view>
  <view class='bar'>
    <view class='box'>{{now.windDir}}</view>
    <view class='box'>{{now.windSpeed}} Km/h</view>
    <view class='box'>{{now.windScale}} 级</view>
  </view>
</view>
</view>

（2）页面样式

index.wxss代码如下：

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}

.box{
  width: 33%;
  text-align: center;
}

text{
  font-size: 80rpx;
  color: #3C5F81;
}

5. 逻辑实现

5.1 主要数据：

region: [‘山东省’, ‘青岛市’, ‘黄岛区’]，region以数组的形式表示地区信息，默认为黄岛
location: ‘山东省青岛市黄岛区’，location以字符串的形式表示地理位置信息
id: 101120206，id表示城市的Locaion ID
now: ‘’ ，now表示当前天气信息，默认为空

5.2 主要逻辑：

getlocationId 函数：获得查询地址的唯一的Location ID，并将其保存在id中
getWeather 函数：调用getlocationId 函数，对获得的 Location ID获取实时的天气数据，并将其保存在now中
changeRegion 函数：一个 picker 地址选择器，以三级列表的形式筛选想要查询的城市。当城市地址变化时，调用getWeather 函数。

index.js文件代码如下：

// pages/index/index.js
Page({
  data: {
    region: ['山东省', '青岛市', '黄岛区'], // 默认地区
    location: '山东省青岛市黄岛区', // 地理位置
    id: 101120206, // 城市ID
    now: '' // 当前天气信息
  },

  // 当地区改变时调用
  changeRegion: function(e) {
    this.setData({
      region: e.detail.value // 更新地区数据
    });
    this.getWeather();
  },

  // 获取城市Location ID
  getLocationId: function() {
    let that = this;
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup',
      data: {
        location: that.data.region, // 使用当前地区数据
        key: 'Your_key' //使用你保存的key
      },

      success(res) {
        console.log(res.data.location[0].id)
        that.setData({
          id: res.data.location[0].id // 设置城市ID
        });
      }
    });
  },

  // 获取当前天气信息
  getWeather: function() {
    let that = this;
    that.getLocationId();
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now',
      data: {
        location: that.data.id, // 使用获取到的城市Location ID
        key: 'Your_key' 
      },
      success(res) {
        console.log(res.data.now)
        that.setData({
          now: res.data.now // 设置当前天气信息
        });
      }
    });
  },

  // 页面加载时调用
  onLoad(options) {
      this.getWeather();

  },

  onReady() {}, // 页面初次渲染完成时调用

  onShow() {}, // 页面显示时调用

  onHide() {}, // 页面隐藏时调用

  onUnload() {}, // 页面卸载时调用

  onPullDownRefresh() {}, // 用户下拉动作时调用

  onReachBottom() {}, // 页面上拉触底事件的处理函数

  onShareAppMessage() {} // 用户点击右上角分享时调用
});

四、程序运行结果

程序的最终运行结果如下：
运行结果1
运行结果2

五、问题总结与体会

问题：wx.request方法调用异常

问题描述：

wx.request方法使用实验文档提供的请求URL和两个查询参数，返回错误代码 400，说明请求错误，可能包含错误的请求参数或缺少必选的请求参数。
解决方法：

通过查阅实时天气API使用方法后发现，该请求需要两个必选的请求参数，分别为key 和 location ，其中 key 需要传递的参数是之前保存的密钥，与实验文档的描述相一致； location 需要传递的参数是和风天气查询地区的唯一标识Location ID，与实验文档的描述不同。

阅读开发文档后，发现问题可以通过城市搜索API城市搜索 for API | 和风天气开发服务 (qweather.com)获得，因此在JS文件中加入了getLocationId 函数，用来获得查询城市的locationID，并将其作为参数传递到getWeather函数中。
- getLocationId方法如下：
```
  // 获取城市ID
  getLocationId: function() {
    let that = this;
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://geoapi.qweather.com/v2/city/lookup',
        data: {
          location: that.data.region, // 使用当前地区数据
          key: 'Your_key' 
        },
        success(res) {
          if (res.data && res.data.location && res.data.location[0]) {
            that.setData({
              id: res.data.location[0].id // 设置城市ID
            });
            resolve(); // 成功后调用resolve
          } else {
            reject('Location ID not found'); // 如果未找到城市ID，调用reject
          }
        },
        fail(err) {
          reject(err); // 请求失败时调用reject
        }
      });
    });
  },
```
3. 收获与体会：

在遇到wx.request方法调用异常的问题之后，我从官网找到正确的 API 接口，在使用过程中，与实验文档给出的内容对比，发现传入参数的错误，从而想到仿照已有的范例函数getWeather，编写类似的函数 getLocationId获得Location ID作为中转，再将Location ID返回到函数 getWeather 中获取实时天气数据，从而完成实验二的任务。

在这个过程中，我提高了分析问题、解决问题的能力，顺利完成了实验目标，即掌握服务器域名配置和临时服务器部署，以及掌握 wx.request 接口的用法。