頁面展示

項(xiàng)目鏈接

https://download.csdn.net/download/weixin_45525272/17842268

項(xiàng)目設(shè)計(jì)

獲取天氣數(shù)據(jù)API

進(jìn)入和風(fēng)天氣控制臺(tái)
https://console.qweather.com/#/console

沒有賬號(hào)的注冊(cè)一個(gè)賬號(hào)

申請(qǐng)成為個(gè)人開發(fā)者，上傳身份證信息認(rèn)證

小程序填寫key

小程序設(shè)計(jì)

wxml

<!--pages/index/index.wxml-->
<view class='container'>
  <!--區(qū)域1：地區(qū)選擇器-->
  <picker mode='region' bindchange='regionChange'>
    <view>{{region}}</view>
  </picker>

  <!--區(qū)域2：單行天氣信息-->
  <text>{{now.tmp}}°C {{now.cond_txt}}</text>

  <!--區(qū)域3：天氣圖標(biāo)-->
  <image src='/images/weather_icon/{{now.cond_code}}.png' mode='widthFix'></image>

  <!--區(qū)域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'>風(fēng)向</view>
      <view class='box'>風(fēng)速</view>
      <view class='box'>風(fēng)力</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}} 級(jí)</view>
    </view>
  </view>
</view>

wxss

/* pages/index/index.wxss */
/*文本樣式*/
text{
  font-size: 80rpx;
  color:#3C5F81;
}

/*圖標(biāo)樣式*/
image{
  width: 220rpx;
}

/*區(qū)域4整體樣式*/
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
/*區(qū)域4單元行樣式*/
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
/*區(qū)域4單元格樣式*/
.box{
  width: 33.3%;
  text-align: center;
}

js

// pages/index/index.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    region: ['河北省', '秦皇島市', '海港區(qū)'],
    now:{
      tmp:0,
      cond_txt:'未知',
      cond_code:'999',
      hum:0,
      pres:0,
      vis:0,
      wind_dir:0,
      wind_spd:0,
      wind_sc:0
    }
  },
  /**
   * 更新省市區(qū)信息
   */
  regionChange: function(e) {
    this.setData({
      region: e.detail.value
    });
    this.getWeather();//更新天氣
  },
  /**
   * 獲取實(shí)況天氣數(shù)據(jù)
   */
  getWeather: function () {
    var that = this;//this不可以直接在wxAPI函數(shù)內(nèi)部使用
    wx.request({
      url: 'https://free-api.heweather.com/s6/weather/now',
      data:{
        location:that.data.region[1],
        key:'1c570f246fe04fc9a81a115a60f35d5a'
      },
      success:function(res){
        //console.log(res.data);
        that.setData({now:res.data.HeWeather6[0].now});
      }
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    this.getWeather();//更新天氣
  },
})