移动软件开发实验二

一、实验目标

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

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

二、实验步骤

js相关代码：

data: {
    region:['北京市','北京市','东城区'],
    regionID:101010100,
    icon:999,
    text:"未知",
    temp:0,
    hum:0,
    pressure:0,
    vis:0,
    windDir:0,
    windSpeed:0,
    windScale:0,
  },
​
  regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getWeather();
  },
​
  getRegion:function(){
    var that=this;
    wx.request({
      url:'https://geoapi.qweather.com/v2/city/lookup?',
      data:{
        location:that.data.region[1],
        key:'35fc57b95350441e8c06735d5ee25e49'
      },
    success:function(res){
      console.log(res.data.location[0].id),
      that.data.regionID=res.data.location[0].id
    },
    })
  },
​
  getWeather:function(){
    var that=this;
    this.getRegion();
    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:that.data.regionID,
        key:'35fc57b95350441e8c06735d5ee25e49'
      },
      success:function(res){
        console.log(res.data);
        console.log(res.data.now.temp);
        that.setData({
          icon:res.data.now.icon,
          text:res.data.now.text,
          temp:res.data.now.temp,
          hum:res.data.now.humidity,
          pressure:res.data.now.pressure,
          vis:res.data.now.vis,
          windDir:res.data.now.windDir,
          windSpeed:res.data.now.windSpeed,
          windScale:res.data.now.windScale,
        })
      },
    })
  },
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      this.getWeather();
  },

wxml相关代码：

<view class="container"> 
  <picker mode="region"bindchange='regionChange'>
    <view>{{region}}</view>
  </picker>
  <text>{{temp}}℃ {{text}}</text>
  <image src="/images/weather_icon/images/weather_icon_s1_bw/{{icon}}.png" 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">{{hum}}%</view>
      <view class="box">{{pressure}}hPa</view>
      <view class="box">{{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">{{windDir}}</view>
      <view class="box">{{windSpeed}}km</view>
      <view class="box">{{windScale}}级</view>
    </view>
  </view>
</view>

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;
}
.box{
  width: 33.3%;
  text-align: center;
}

三、程序运行结果

初始数据

启动后数据

切换城市后数据

四、问题总结与体会

问题

由于开发工具版本的更新，原先的风和天气url的request申请从城市名变成了城市id，所以无法获取request。为了获取request，又调用了一个接口geoapi来实现从城市名到城市id的转换。