实验 2：天气查询小程序

一、实验目标

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

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

二、实验步骤

1.API调用

        在和风天气开发控制台创建项目，选择免费订阅，设置KEY，选择适用平台为Web API。创建成功后，获取KEY值。后续通过接口https://devapi.qweather.com/v7/weather/now调用API，获取实时天气信息。

2.服务器域名配置

        登录小程序平台，在开发管理的服务器域名添加https://devapi.qweather.com，用于通过域名校验。

        或者，在微信开发者工具中选择【不校验请求域名、 web-view（业务域名）、 TLS版本及HTTPS证书】 选项。

3.导入素材

        在和风天气平台图标说明 | 和风天气开发服务下载要使用的天气图标，放在创建的项目下。

4.导航栏设计

        在app.json文件中设计导航栏效果，背景为蓝色，文本为黑色，文本为“今日天气”。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

5.页面设计

        页面上主要包含4个区域：

1. <picker>组件，地区选择器，用户可以自行选择查询的省市区；

2. <text>组件，显示当前城市的温度和天气状态的文字说明；

3. <image>组件，显示当前城市的天气图标；

4. <view>组件，分多行显示其他天气信息，例如湿度、气压、能见度和风向等。

index.wxml:

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

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;
}
​
/*区域4整体样式*/
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
/*区域4单元行样式*/
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx;
}
/*区域4单元格样式*/
.box{
  width: 33.3%;
  text-align: center;
}

6.更新省、市、区信息

        在index.wxml文件中的<picker>组件中使用了bindchange绑定，用于监听选项变化。

        在index.js文件中，定义初始值，编写regionChange函数用于更新省、市、区信息。

  data: {
    region:['安徽省','芜湖市','镜湖区'],
    now:{
      tmp:0,
      cond_txt:'未知',
      cond_code:'999',
      hum:0,
      pres:0,
      vis:0,
      wind_dir:0,
      wind_spd:0,
      wind_sc:0
    }
  },
  /**
   * 更新省、市、区信息
   */
  regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getWeather();
  },

7.获取实况天气数据

        在index.js文件中：

• getWeather 函数用于获取当前天气数据。

• var that = this; 保存当前上下文的引用，以便在回调函数中使用。

• var location_name = util.getLocationID(that.data.region[1]); 获取位置 ID。

• wx.request 发起一个网络请求，向 https://devapi.qweather.com/v7/weather/now 发送请求，获取天气数据。

• data 参数包含 location 和 key，分别是位置 ID 和 API 密钥。

• success 回调函数在请求成功时执行，打印返回的数据并将 now 数据设置到当前页面的数据中。

• onLoad 函数在页面加载时调用。

• this.getWeather(); 调用 getWeather 方法，获取并显示天气数据。

/**
   * 获取实况天气数据
   */
  getWeather: function(){
    var that = this;
    var location_name=util.getLocationID(that.data.region[1])
    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now',
      data:{
        location:location_name,
        key:'(根据自己的KEY写)'
      },
      success:function(res){
        console.log(res.data)
        that.setData({now:res.data.now});
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather();
  },

        在 util.js 文件中，有一个city_list_json包含城市信息的数组，每个城市对象包含 Location_ID、Location_Name_EN 和 Location_Name。这个数组可以用于根据城市名称获取对应的 Location_ID。

   getWeather 函数调用了 util.getLocationID(that.data.region[1])，其中 that.data.region[1] 是当前选择的城市名称。getLocationID 函数会遍历 city_list_json 数组，找到匹配的城市名称，并返回对应的 Location_ID。例如，如果 that.data.region[1] 是 '北京'，getLocationID 函数会返回 '101010100'，然后这个 Location_ID 会被用于请求天气数据。

var city_list_json =[
  {Location_ID:'101010100',Location_Name_EN:'beijing',Location_Name:'北京'},
  {Location_ID:'101010200',Location_Name_EN:'haidian',Location_Name:'海淀'},
  {Location_ID:'101010300',Location_Name_EN:'chaoyang',Location_Name:'朝阳'},
  {Location_ID:'101010400',Location_Name_EN:'shunyi',Location_Name:'顺义'},
  {Location_ID:'101010500',Location_Name_EN:'huairou',Location_Name:'怀柔'},
 ]
  
// 查找城市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'
}
​
module.exports = {
  getLocationID:getLocationID
}

三、程序运行结果

四、问题总结与体会

        在开发和风天气查询微信小程序的过程中，我学到了许多宝贵的经验和技术。和风天气查询微信小程序的主要功能是通过调用和风天气的API，获取并显示当前的天气信息。用户可以选择不同的城市，查看实时的天气数据。这不仅提高了用户体验，还展示了如何在微信小程序中集成第三方API。

        使用wx.request方法调用和风天气的API，获取实时天气数据。通过传递城市的Location_ID和API密钥，成功获取了所需的天气信息。在API调用成功后，通过setData方法将获取到的数据更新到页面上，确保用户可以实时查看最新的天气信息。

        我在util.js文件中，定义了一个包含城市信息的数组city_list_json，并实现了getLocationID函数，用于根据城市名称获取对应的Location_ID。这使得用户可以通过选择城市名称来获取准确的天气数据。通过遍历city_list_json数组，找到了匹配的城市名称，并返回了对应的Location_ID，确保了数据的准确性和可靠性。

        在页面加载时，通过onLoad方法调用getWeather函数，确保用户在打开小程序时就能看到最新的天气信息。

   <image src="/images/weather_icon_s1_color/{{now.icon}}.png" mode="widthFix"></image>报错渲染层网络层错误，是因为初始状态值为空，只有在 now.icon 有值时，图像才会被渲染。

        通过这个项目，我不仅掌握了微信小程序的开发技巧，还学会了如何集成第三方API，处理和显示数据。这个项目让我深刻体会到，细节决定成败。在开发过程中，遇到的问题和挑战都是宝贵的经验，帮助我不断成长和进步。我希望能够将这些经验应用到其他项目中，不断提升自己的开发能力。