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

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

姓名：林佳欣 学号：22020007054

姓名和学号？	林佳欣，22020007054
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验2：API调用天气查询
博客地址？	LinJason.OUC-CSDN博客
Github仓库地址？	WechatMiniProgram: 2024年中国海洋大学移动软件开发作业 (gitee.com)

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

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

1、配置服务器

注册和风天气的免费账户获取密钥key

本次实验调用的是和风天气的API接口，调用的服务器域名为https://devapi.qweather.com

2、调用API接口编写小程序

（1）导入天气图片以及utils文件夹

其中util.js代码含有查找城市LocationID的函数getLocationID以及各个城市对应的LocationID

// 查找城市ID
function getLocationID(location_name){
  // 遍历查找
  for(var i=0;i<city_list_json.length;i++){
    if(location_name.indexOf(city_list_json[i].Location_Name)!=-1){
      // 返回当前位置ID
      return city_list_json[i].Location_ID
    }
  }

  // 如果没有查到，则返回初始城市ID
  return '101010100'
}

（2）导航栏设计

在app.json中写入代码

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "今日天气",
    "navigationBarBackgroundColor": "#3883FA"// 导航栏背景颜色设置为蓝色
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

（3）页面设计

在app.wxss中写入代码

.container{
  height: 100vh;/*设置高度为100%*/
  display: flex;
  flex-direction: column;/*从上到下排列*/
  align-items: center;/*居中对齐*/
  justify-content: space-around;/*均匀分布*/
}

在index.wxml中写入代码

<view class = 'container'>
  <!--区域1：地区选择器-->
  <picker mode="region"bindchange='regionChange'><!--当选择地区时，触发bindchange-->
    <view>{{region}}</view>
  </picker>
  <!--区域2：单行天气信息-->
  <text>{{now.temp}}℃{{now.text}}</text>
  <!--区域3：天气图标-->
  <image src='/images/weather_icon_s1_color/{{now.icon}}.png'mode='widthFix'></image><!--now.icon为图片标号-->
  <!--区域4：多行天气信息-->
  <view class='detail'>
    <view class='bar'><!--定义一行包括3个box的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>

根据所给的返回数据填入index.wxml

在index.wxss中插入代码

text{
  font-size: 80rpx;
  color: #3c5f81;/*设置文本为深蓝色*/
}

image{
  width: 200rpx;
}

.detail{
  width: 100%;
  display: flex;
  flex-direction: column;/*设置为从上到下排列*/
}

.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;/*设置元素的间距为20rpx*/
}

.box{
  width: 33.3%;/*设置box的宽度为bar的三分之一，正好每行有三个box*/
  text-align: center;
}

（4）获取实况信息数据

在index.js中增加函数getWeather函数来获取

  getWeather:function(){
    var that =this;
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now',//调用的API，由于是免费用户用的是devapi.qweather.com的API Host
      data:{
        location:getLocationID(that.data.region[1]),//调用util.js中的getLocationID函数来获取地理位置的LocationID
        key:'f7c3554cecdc485e918e294d6607fe4e'//本人自己申请的密钥
      },
      success:function(res){
        that.setData({now:res.data.now})//如果成功找到该地区就设置为结果的数据
      }
    })
  },
  regionChange: function(e){
    this.setData({region:e.detail.value});
    this.getWeather();//更新天气
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather();//更新天气
  },

三、程序运行结果

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

结果：正确调用和风天气的API，并且能够根据所选的地区更新天气数据：温度、天气图标、湿度、气压、能见度、风向、风速、风力

四、问题总结与体会

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

问题：根据教程写getWeather函数时，console报错代码code为400，参数不全

解决方法：教材中的location：that.data.region[1]并不是LocationID，而是需要通过调用util.js中的getLocationID函数来获取LocationID改为location：getLocation(that.data.region[1])

问题：根据教程中的URL出错

解决方法：通过查询和风天气的文档，现在的免费的API Host改为https://devapi.qweather.com/v7/weather/now

问题：教程中的返回数据出错

解决方法：需要根据实时天气 for API | 和风天气开发服务 (qweather.com)该文档中的返回数据进行修改

收获与体会：通过这次的实验，我了解了如何部署服务器，调用相关网站给出的API接口来获取相关网站的数据信息，并呈现在小程序中。此外，根据这次实验中所遇到的困难，我学会通过查询相关网站给出的调用文档来进行调整，也体会到了wx.request接口的用法，利用相关网站的URL和key以及必要的数据来获取。