知识点

组件：

view 视图容器
picker 地区选择器
images 图片
text 文本

网络api：

wx.request 发起请求

框架：

this.setData 重置数据

描述：

与第三方服务器交互，获取实况天气数据，并显示在小程序页面上。
可手动变换省市区，获得实时数据变化效果。

步骤：

1 准备工作

• 注册和风天气免费key

• 接口调用方法

例如：https://free-api.heweather.com/s6/weather/now 实况天气数据获取
参数：location=地区&key=密钥

• 服务器域名配置（非必需）

开发者登陆mp.weixin.qq.com进入管理员后台，选择【开发】->【开发设
置】->【服务器域名】即可进行添加或修改需要进行网络通讯的服务器域名
地址。

2 页面配置

• 创建小程序：创建应用文件，创建页面文件
• 创建其他文件：images

3 视图设计

• 导航栏设计
  在app.json中自定义导航栏标题和背景颜色
• 页面设计
  页面上主要包含4个区域，具体内容解释如下：
  区域1：地区选择器，用户可以自行选择查询的省市区；
  区域2：显示当前城市的温度和天气状态的文字说明；
  区域3：显示当前城市的天气图标；
  区域4：分多行显示其他天气信息，例如湿度、气压、能见度和风向等。
  面板之间需要有一定的间隔距离

4 逻辑实现

• 更新省市区信息
• 获取实况天气数据
• 更新页面天气信息

关键源码

• index.js

/**
   * 页面的初始数据
   */
  data: {
    region: ['上海市', '上海市', '浦东新区'],
    now: {
      "cond_code": "999",
      "cond_txt": "未知",
      "hum": "0",
      "pres": "0",
      "tmp": "0",
      "vis": "0",
      "wind_dir": "0",
      "wind_sc": "0",
      "wind_spd": "0"
    }
  },
  /**
   * 自定义函数--更新城市信息
   */
  regionChange: function(e) {
    // e.detail.value
    this.setData({
      region: e.detail.value
    })
    this.getWeather()
  },
  /**
   * 自定义函数--获取实况天气
   */
  getWeather: function() {
    var that = this
    wx.request({
      url: 'https://free-api.heweather.com/s6/weather/now', //接口地址
      data: {
        location: that.data.region[1],//精确到市级
        key: '注册和风天气生成'
      }, //附带参数
      success: function(res) {
        // console.log(res.data.HeWeather6[0].now)
        that.setData({
          now: res.data.HeWeather6[0].now
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getWeather()
  },

• index.wxml

<!--index.wxml-->
<view class="container">
  <!-- 区域1：地区选择器 -->
  <picker mode='region' bindchange="regionChange">
    <view>{{region}}</view>
  </picker>
  <!-- 区域2： 单行文本显示温度和天气 -->
  <text>{{now.tmp}}°C {{now.cond_txt}}</text>
  <!-- 区域3：天气图标 -->
  <image src="/images/weather_icon/{{now.cond_code}}.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.hum}} %</view>
      <view class="box">{{now.pres}} 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.wind_dir}}</view>
      <view class="box">{{now.wind_spd}} km/h</view>
      <view class="box">{{now.wind_sc}} 级</view>
    </view>
  </view>
</view>

• index.wxss

/** index.wxss **/
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color:lightblue;
}
/* 文本样式 */
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 0;
}
/* 区域4单元格样式 */
.box{
  width: 33.3%;
  text-align: center;
}