移动软件开发-lab2天气查询小程序

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

一、实验目标

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

二、实验步骤

1. 准备工作

• API密钥申请：在和风开发控制台创建项目，得到个人KEY
  

• 服务器域名配置：在和风天气开发服务的开发文档中，获取需要用到的接口，然后登录小程序开发工具，将接口添加到request合法域名中。https://geoapi.qweather.com 用于获取查询地区的LocationID，从而用于https://devapi.qweather.com 的请求参数location，来获取实时天气数据
  

2. 创建项目，删除和修改文件，引入天气图标素材。
   

3. 视图设计

• 导航栏设计：修改app.json中的导航栏样式

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

• 页面设计：将页面分为4个区域：地区选择器（picker组件）；显示当前城市的温度和天气状况的文字说明；天气图标；分多行显示湿度、气压等其他天气信息。整体使用嵌套view组件实现，wxss样式使用flex布局实现。index.wxss代码如下：

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
text{
  font-size: 80rpx;
  color: #3C5F81;
}
image{
  width: 220rpx;
}
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
.box{
  width: 33.3%;
  text-align: center;
}

• 实现效果
  

4. 逻辑设计

• 更新地区信息：为picker组件追加自定义bindchange事件，监听选项变化;在JS文件的data中定义region包含初始城市信息;定义regionChange函数更新城市信息及对应天气信息。

data: {
    region:['山东省','青岛市','黄岛区'],
    locationId:'', //初始化为空
  },
regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getLocationIdAndWeather();
  },

• 获取实况天气数据：调用GeoAPI来获取LocationID，然后使用该LocationID请求天气信息。具体代码如下：

//定义getLocationIdAndWeather函数调用GeoAPI，根据城市名称获取对应的LocationID。成功获取LocationID后，将其保存在 locationId中，并调用getWeather函数来获取天气信息
 getLocationIdAndWeather:function(){
    var that = this;
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?',
      data:{
        location:that.data.region[1],
        key:'a7e20169641040e29b3f2235a730e894'
      },
      success:function(res){
        if(res.data.code === "200" && res.data.location.length > 0){
          that.setData({
            locationId:res.data.location[0].id
          });
          that.getWeather();
        }
        else{
          console.log("获取LocationId失败");
        }
      },
      fail:function(err){
        console.log("请求失败",err);
      }
    });
  },

//getWeather函数使用获取到的LocationID进行天气查询，并在控制台输出天气信息
//通过控制台信息，可以看到返回的天气信息存储到now数据对象中，获取成功。然后更新getWeather函数，将数据存到JS文件的data中
getWeather:function(){
    var that = this;
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:that.data.locationId,
        key:'a7e20169641040e29b3f2235a730e894'
      },
      success:function(res){
        console.log(res.data);
        that.setData({now:res.data.now});
      },
      fail:function(err){
        console.log("获取天气信息失败",err);
      }
    });
  },

//生命周期函数--监听页面加载
//在页面加载时获取LocationID和天气信息
  onLoad: function (options) {
    this.getLocationIdAndWeather();
  },

• 控制台信息输出：

• 更新页面天气信息：将index.wxml页面上的所有临时数据都替换为{{now.属性}}形式，实现动态更新天气信息。完整的index.wxml代码如下：

<view class="container">
  <picker mode="region" bindchange="regionChange">
    <view>{{region}}</view>
  </picker>
  <text>{{now.temp}}℃{{now.text}}</text>
  <image src="/images/icons/{{now.icon}}.svg" mode="widthFix"></image>
  <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>

• 考虑网速受限的情况，在JS文件的data中1为now规定初始数据，用于临时显示。代码如下：

data: {
    region:['山东省','青岛市','黄岛区'],
    locationId:'',
    now:{
      tmp:0,
      text:'未知',
      icon:'999',
      humidity:0,
      pressure:0,
      vis:0,
      windDir:0,
      windSpeed:0,
      windScale:0
    }
  },

三、程序运行结果

• 初始页面显示：

• 更改城市信息：

可知程序运行正确。

四、问题总结与体会

• 问题：实验文档中获取到的location为城市名，但更新后的location参数要求为LocationID格式，原有的请求方式会失败
• 解决方法：引入GeoAPI，获取LocationID，然后再使用该LocationID来请求天气信息。
• 收获：学会了基本的服务器域名配置和如何实现接口请求、获取数据的方法，也学到了一些基础的JS语法和函数功能的实现。