实验2报告

m0_73624048

已于 2024-08-20 21:16:55 修改

阅读量1.5k

点赞数 40

文章标签： uni-app

于 2024-08-20 20:58:57 首次发布

本文链接：https://blog.csdn.net/m0_73624048/article/details/141368377

版权

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

姓名和学号？
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验2：天气查询小程序
博客地址？
Github仓库地址？	miniprogram-2 · gugugg/移动软件开发课程作业 - 码云 - 开源中国 (gitee.com)

一、实验目标

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

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

二、实验步骤

1.准备工作

1)API密钥申请

访问和风天气官方网址，选择“天气API”，进入相关界面后选择“免费注册”进行注册。

在这里插入图片描述

访问控制台 | 和风天气 (qweather.com)，选择“项目管理”->“创建项目”，填写项目名称，选择“免费订阅”，“Web API”，填写KEY的名称后点击“创建”。

可以访问控制台 | 和风天气 (qweather.com)查看Key。

2)服务器域名配置

登录https://mp.weixin.qq.com/进入管理员后台，选择“开发与服务”->“开发管理”->“开发设置”即可进行添加或修改需要进行网络通讯的服务器域名地址。

将https://devapi.qweather.com;https://geoapi.qweather.com;添加到“request”合法域名中。

在这里插入图片描述

2.项目创建

3.页面配置

创建页面文件、删除和修改文件与上一实验步骤一致，此处不再赘述。直接进行其他文件（图标）的创建。

在和风天气图标(qweather.com)页面进行图标下载，新建目录“images”和二级目录“weather_icon”，将图片导入文件夹中。

4.视图设计

1)导航栏设计

将导航栏改为蓝底白字，标题改为”今日天气“，更改app.json中window属性如下：

  "window": {
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气"
  },

效果：

2)页面设计

页面上主要包含四个区域，区域1使用picker组件完成一个地区选择器，区域二使用text组件显示当前城市的温度和天气状态，区域三使用image组件显示当前城市的天气图标，区域四用多组view组件嵌套分行显示其他天气信息。

WXML代码片段如下：

<view class="container">
    <!--区域 1:地区选择器 -->
    <picker mode = 'region' bindchange="regionChange">
        <view>{{region}}</view>
    </picker >
    <!--区域2:单行天气信息-->
    <text>{{now.temp}}℃ {{now.text}}</text>
    <!--区域3:天气图标 -->
    <image src="/images/weather_icon/{{ now.icon }}.png" mode="widthFix"></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>

3)样式设计

设计四个区域样式。WXSS代码片段如下：

.container{
    height:100vh;                   /*高度为 100 视窗,写成100%无效*/
    display: flex;                  /*flex布局模型*/
    flex-direction:column;          /*垂直布局*/
    align-items:center;             /*水平方向居中*/
    justify-content:space-around;   /*调整间距*/

}
/*文本样式*/
text{
    font-size:80rpx;
    color:#3C5F81;
}
/*图标样式*/
image{
    width: 220rpx;
}
/*区域4整体样式*/
.detail{
    width:100%;
    display:flex;
    flex-direction: column;
}
/*区域4单元行样式*/
.bar{
    display: flex;
    flex-direction: row;
    margin:20rpx 0;
}
/*区域4单元格样式*/
.box{
    width:33.3%;
    text-align: center;
}

页面效果如下：

5.逻辑实现

1)更新省、市、区信息

设置初始参数，注意需要设置图标序号初始值，否则会报”渲染层网络层错误“，此处JS代码如下：

  /**
   * 页面的初始数据
   */
  data: {
    region:['北京市','北京市','东城区'],
    now:{
        icon:100
    }

完成regionChange函数逻辑，更新省市区信息，代码片段如下：

  /**
   * 更新省市区函数
   */
  regionChange:function(e){
      this.setData({region:e.detail.value});
  },

2)获取实况天气数据

根据和风天气官方文档实时天气 for API | 和风天气开发服务 (qweather.com)以及城市搜索 for API | 和风天气开发服务 (qweather.com)可知，要从和风天气调用接口首先需要请求https://geoapi.qweather.com/v2/city/lookup获取location ID，再根据location ID和key请求https://devapi.qweather.com/v7/weather/now得到天气数据。因此编写两个异步函数完成：getLocationID函数用于通过QWeather API查询给定城市的location ID，而getWeather函数则用于根据location ID获取该城市的实时天气数据。

JS代码如下：

/**
 * 获取城市LocationID
 */
getLocationID: async function() {
    const that = this;
    try {
        const response = await new Promise((resolve, reject) => {
            wx.request({
                url: 'https://geoapi.qweather.com/v2/city/lookup',
                data: {
                    location: that.data.region[2].slice(0,-1),
                    adm: that.data.region[1].slice(0,-1),
                key: '###'				//替换成自己的key
                },
                success: function(res) {
                    resolve(res.data);
                },
                fail: function(err) {
                    reject(err);
                }
            });
        });

        console.log(response);
        return response;
    } catch (error) {
        console.error('Error getting location ID:', error);
        throw error;
    }
},

/**
 * 获取实时天气数据
 */
getWeather: async function() {
    try {
        const locationData = await this.getLocationID();
        const firstLocationId = locationData.location[0].id;
        console.log(firstLocationId);

        const that = this;
        wx.request({
            url: 'https://devapi.qweather.com/v7/weather/now',
            data: {
                location: firstLocationId,
                key: '###'				//替换成自己的key
            },
            success: function(res) {
                that.setData({now:res.data.now});
                console.log(res.data.now);
            }
        });
    } catch (error) {
        console.error('Error getting weather data:', error);
    }
},

另外，需要在生命周期函数onLoad和更新省市区函数regionChange中调用getWeather函数，表示当页面加载时和切换城市时均主动获取一次实况天气数据。

两个函数的最终JS代码如下：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      this.getWeather();        //更新天气
  },
  /**
   * 更新省市区函数
   */
  regionChange:function(e){
      this.setData({region:e.detail.value});
      this.getWeather();                    //更新天气
  },

三、程序运行结果

四、问题总结与体会

本次实验完成了一个天气查询小程序，主要遇到的问题是提供的接口地址已经不能用了，通过找官方文档找到了最新的接口地址解决。另外还学习了如何使用异步方式处理请求以保证用户体验流畅，在getLocationID和getWeather函数中使用了Promise和async/await来处理异步请求，用Promise对象来封装wx.request调用，能够更灵活地处理成功和失败的情况。