2024ouc《移动软件开发》Lab2

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

一、实验目标

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

二、实验步骤

2.1 实验前准备

1、访问和风天气官方网址 https://dev.qweather.com/ 进行账号注册，注册成功后进入开发服务控制台，然后点击左侧项目管理创建一个新项目，新项目选择免费订阅，适用平台选择Web API，然后输入key的名称后点击创建。

2、登录mp.wexin.qq.com进入开发者后台，点击左侧管理-开发管理，在服务器域名中将 https://devapi.qweather.com 添加到request合法域名中。

3、下载demo2_file.zip压缩包，内部包含天气图标以及util.js文件。

2.2 小程序设计

1、将下载好的天气图标存放在images文件夹中
2、修改引导栏

2、整体容器设计
wxss内容如下：

.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.3%;
  text-align: center;
}   //下方每一行中的每个元素，各占33.3%
text{
  font-size: 80rpx;
  color: #3c5f81;
}   //温度的文本大小、颜色
image{
  width: 420rpx;
}   //图片大小

wxml内容如下：

<view class="container">
  <picker mode="region">
    <view>北京市</view>
  </picker>
  <text>26℃ 晴</text>
  <image src = '/images/weather/100.png'></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">0%</view>
      <view class="box">0hPa</view>
      <view class="box">oKm</view>
    </view>

    <view class="bar">
      <view class="box">风向</view>
      <view class="box">风速</view>
      <view class="box">风力</view>
    </view>

    <view class="bar">
      <view class="box">0</view>
      <view class="box">0 Km/h</view>
      <view class="box">0Km</view>
    </view>

  </view>
</view>

效果图如下：

3、编写getWeather函数获取目标地区的天气信息
这里用到了wx.request函数，其作用为发起https网络请求，其中url为开发者服务器接口地址，data是请求的参数。最后定义一个success函数，将结果输出到控制台中。

  getWeather:function(){
    var that=this;
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:util.getLocationID(that.data.region[1]),
        key:'575e153b1fa94bffaf878dc828a1196a'
      },
      success:function(res){
        console.log(res.data)
      }
    })
  },

下图为从控制台查看得获取到的数据。

5、将wxml中各固定值改为变量并从js中初始化，修改getWeather函数中的success部分，将得到的值传给data的now中，在changeRegion函数和生命周期函数onLoad中调用getWeather函数，使得页面加载时和更新城市时获取城市天气情况并输出到屏幕上。
以下为js中修改或新增的函数：

success:function(res){
    // console.log(res.data)
    that.setData({now:res.data.now})
}

changeRegion:function(e){
    this.setData({
      region:e.detail.value
    })
    this.getWeather();
},

onLoad(options) {
    this.getWeather();
},

以下为修改后的wxml：

<view class="container">
  <picker mode="region" bindchange="changeRegion">  <!--这里增加了bindchange事件，用于监听选项变化-->
    <view>{{region}}</view>  <!--将原"北京市"变为{{region}}-->
  </picker>
  <!--后面将所有常量都改为{{now.xx}}，这样后续才能修改数据-->
  <text>{{now.temp}}℃ {{now.text}}</text>  
  <image src = '/images/weather/{{now.icon}}.png'></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}}Km</view>
    </view>

  </view>
</view>

三、程序运行结果

运行后：

更改城市后：

四、问题总结与体会

问题

1、和风天气需要的url，温度、湿度等变量的名称，变量所在的位置都与实验手册中给的不同，这些问题通过查询和风天气官方网站、观察控制台等方式得到了解决。
2、和风天气现在不支持直接用中文作为查询的参数，需要先查询地区对应的数字ID。这一问题有两种解决方法：
第一种是可以将准备阶段提到的util.js粘贴至小程序文件夹中，调用其中的getLocationID函数找到城市对应的ID并将ID传给location，本人用到的就是这种方法。
第二种是可以通过和风天气官方给的城市搜索API，即https://geoapi.qweather.com/v2/city/lookup?{查询参数}来进行查询。

体会

问题有两种解决方法：
第一种是可以将准备阶段提到的util.js粘贴至小程序文件夹中，调用其中的getLocationID函数找到城市对应的ID并将ID传给location，本人用到的就是这种方法。
第二种是可以通过和风天气官方给的城市搜索API，即https://geoapi.qweather.com/v2/city/lookup?{查询参数}来进行查询。

体会

经过本次实验，我学到了<picker>这一组件，对于wxml、wxss的编写更加熟练，学到了更多的函数及其用法。同时我学会了API的调用方法，能够通过调用API获取并简单处理一些信息。在遇到与实验手册不同的情况时，我通过上网查询资料、查询官方的开发文档等方式解决了遇到的问题，这提高了我的信息获取、解决问题的能力。