微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能(附源碼)

更新時(shí)間：2020年12月10日 10:47:10 作者：摸魚moyv

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能(附源碼)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近在學(xué)小程序開發(fā),剛好學(xué)到天氣預(yù)報(bào)功能的制作,于是給大家分享下。

效果圖

天氣API獲取

這里我用的是和風(fēng)天氣的API，打開官網(wǎng)注冊(cè)或者登陸你的賬號(hào)

在這里插入圖片描述

進(jìn)入控制臺(tái),新建應(yīng)用

在這里插入圖片描述

這是剛剛我們創(chuàng)建好的應(yīng)用，點(diǎn)擊添加KEY

在這里插入圖片描述

選擇WebAPI

在這里插入圖片描述

這注冊(cè)好我們的API了

在這里插入圖片描述

微信小程序后臺(tái)域名配置

登陸小程序后臺(tái)，分別點(diǎn)擊開發(fā)和開發(fā)設(shè)置

在這里插入圖片描述

點(diǎn)擊修改，將我們API的域名添加到request合法域名里面https://free-api.heweather.net

在這里插入圖片描述

頁面代碼

.wxml

<view class="header">
 <view class="top">
 <view class="city">
  {{city}}
 </view>
 <view class="search">
  <input placeholder="輸入城市名" bindinput="bindKeyInput" placeholder-style="color:white"></input>
  <view class="bt_search" bindtap="search">
  <icon type="search" size="18" color="white"></icon>
  </view>
 </view>
 </view>

 <view class="center">
 <view class="tmp">
  {{tmp}}°
 </view>
 <image mode="widthFix" class="cond-image" src="https://moyv.top/wechat/images/weather/{{imgsrc}}.png">
 </image>
 </view>
 <view class="bottom">
 <view>{{wind_dir}} {{wind_sc}}級(jí)</view>
 <view>濕度 {{hum}}%</view>
 <view>氣壓 {{pres}}Pa</view>
 </view>
</view>
<view class="container">
 <view class="hourly_title">24小時(shí)預(yù)報(bào)</view>
 <scroll-view scroll-x="true" class="hourly">
 <view class="h_item" wx:for="{{hourly}}" wx:key="index">
  <text class="h_time">{{item.time}}</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{{item.imgsrc}}.png"></image>
  </view>
  <text class="h_tmp">{{item.tmp}}°</text>
  <text class="h_wind_dir">{{item.wind_dir}}</text>
  <text class="h_wind_sc">{{item.wind_sc}}級(jí)</text>
 </view>

 </scroll-view>
 <view class="hourly_title">7天預(yù)報(bào)</view>
 <scroll-view scroll-x="true" class="daily">
 <view class="d_item" wx:for="{{daily_forecast}}" wx:key="index">
  <text class="d_txt">{{item.d_txt}}</text>
  <text class="d_date">{{item.d_date}}</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{{item.imgsrc_d}}.png"></image>
  </view>
  <text class="h_tmp">{{item.tmp_min}}°~{{item.tmp_max}}°</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{{item.imgsrc_n}}.png"></image>
  </view>
  <text class="d_wind_dir">{{item.wind_dir}}</text>
  <text class="d_wind_sc">{{item.wind_sc}}級(jí)</text>
 </view>

 </scroll-view>
</view>

<view class="footer">
-天氣數(shù)據(jù)來自和風(fēng)天氣api-
</view>

.wxss

page {
 background-color: #f6f6f6;
}

.header {
 background-color:#64c8fa; 
 /* background-image: linear-gradient(to right, #64a0f8, #64c8fa); */
 height: 450rpx;
 padding-top: 32rpx;
 text-align: center;
}

.top {
 display: flex;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}

.city {
 text-align: center;
 color: white;
 display: inline-block;
 font-size: 52rpx;
 margin-left: 32rpx;
}

.search {
 margin-right: 32rpx;
 border-radius: 8rpx;
 display: inline-flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 background-color: rgba(0, 0, 0, 0.1);
 height: 70rpx;
}

.search input {
 width: 200rpx;
 padding: 18rpx 32rpx;
 text-align: left;
 color: white;
 display: inline-block;
}

.bt_search {
 border-radius: 0 8rpx 8rpx 0;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.1);
 display: inline-flex;
 justify-content: center;
 align-content: center;
 align-items: center;
}

.bt_search icon {
 margin: 8rpx 18rpx;
}

.center {
 display: flex;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}

.tmp {
 margin-left: 18rpx;
 display: inline-block;
 font-size: 180rpx;
 color: white;
}
.cond-image{
 width: 200rpx;
 margin-right: 32rpx;
 margin-top: 32rpx;
}
.bottom{
 display: flex;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}
.bottom view{
 color: white;
 margin: 32rpx;
}

.hourly_title{
 font-weight: bold;
 font-size: 42rpx;
 padding: 18rpx 32rpx;
}
.hourly {
 width: 718rpx;
 margin: 0 18rpx;
 border-radius: 18rpx;
 box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
 white-space: nowrap;
 background-color: white;
}
.h_item {
 margin: 18rpx 0;
 display: inline-block;
 width: 143.5rpx;
 text-align: center;
 font-size: 28rpx;
}

.h_img {
 margin: 64rpx 0;
}

.h_img image {
 width: 60rpx;
}

.h_item text {
 display: block;
}

.h_time {
 color: gray;
}

.h_wind_dir {
 margin-top: 32rpx;
}

.h_wind_sc {
 color: gray;
}

.h_tmp {
 color: #027aff;
}

.daily {
 width: 718rpx;
 white-space: nowrap;
 margin: 0 18rpx;
 background-color: white;
 border-radius: 18rpx;
 box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
}

.d_item {
 
 margin: 18rpx 0;
 display: inline-block;
 width: 179.5rpx;
 text-align: center;
 font-size: 28rpx;
}

.d_item text {
 display: block;
}

.d_date {
 color: gray;
}

.d_wind_dir {
 margin-top: 32rpx;
}

.d_wind_sc {
 color: gray;
}

.footer{
 font-size: 28rpx;
 color: gray;
 text-align: center;
 margin-top: 50rpx;
 margin-bottom: 18rpx;
}

.js

Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 search_city: '',
 imgsrc:100
 },
 /**
 * 根據(jù)城市獲取天氣預(yù)報(bào)
 */
 getWeather(city) {
 let that = this
 //獲取實(shí)況天氣
 wx.request({
  url: 'https://free-api.heweather.net/s6/weather/now?key=你后臺(tái)的key&location=' + city,
  success: function(res) {
  if (res.data.HeWeather6[0].status == 'unknown location') {
   wx.showToast({
   title: '抱歉！沒有該城市的天氣預(yù)報(bào)',
   icon: 'none',
   duration: 2000
   })
   return;
  }
  console.log(res)
  that.setData({
   city: city,
   tmp: res.data.HeWeather6[0].now.tmp,
   imgsrc: res.data.HeWeather6[0].now.cond_code,
   wind_dir: res.data.HeWeather6[0].now.wind_dir,
   wind_sc: res.data.HeWeather6[0].now.wind_sc,
   hum: res.data.HeWeather6[0].now.hum,
   pres: res.data.HeWeather6[0].now.pres
  })

  //獲取24小時(shí)天氣預(yù)報(bào)
  wx.request({
   url: 'https://free-api.heweather.net/s6/weather/hourly?key=你后臺(tái)的key&location=' + city,
   success: function(res) {
   var arr = res.data.HeWeather6[0].hourly
   var hourly = []
   for (var i = 0; i < arr.length; i++) {
    hourly[i] = {
    "imgsrc": arr[i].cond_code,
    "tmp": arr[i].tmp,
    "time": arr[i].time.substring(11),
    "wind_dir": arr[i].wind_dir,
    "wind_sc": arr[i].wind_sc
    }
   }
   that.setData({
    hourly: hourly
   })

   var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
   //獲取未來7天天氣預(yù)報(bào)
   wx.request({
    url: 'https://free-api.heweather.net/s6/weather/forecast?key=你后臺(tái)的key&location=' + city,
    success: function(result) {
    //console.log(result)
    var arr = result.data.HeWeather6[0].daily_forecast
    var daily_forecast = []
    for (var i = 0; i < arr.length; i++) {
     daily_forecast[i] = {
     d_txt: i == 0 ? "今天" : weekArray[new Date(arr[i].date).getDay()],
     d_date: arr[i].date.substring(5),
     imgsrc_d: arr[i].cond_code_d,
     imgsrc_n: arr[i].cond_code_n,
     wind_dir: arr[i].wind_dir,
     wind_sc: arr[i].wind_sc,
     tmp_max: arr[i].tmp_max,
     tmp_min: arr[i].tmp_min,
     cond_txt_d: arr[i].cond_txt_d
     }
    }
    that.setData({
     daily_forecast: daily_forecast
    })
    }
   })

   }
  })

  }
 })
 },
 bindKeyInput(e) {
 this.setData({
  search_city: e.detail.value
 })
 },
 search() {
 this.getWeather(this.data.search_city)
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function(options) {
 this.getWeather("廣州")
 },
})

.json

{
 "usingComponents": {},
 "navigationBarTitleText": "天氣預(yù)報(bào)"
}

注意問題（必看）

由于我的項(xiàng)目有用到天氣預(yù)報(bào)的逐小時(shí)預(yù)報(bào)和7天預(yù)報(bào)，和風(fēng)天氣又必須實(shí)名才能獲取到此數(shù)據(jù)，所以請(qǐng)登錄和風(fēng)天氣后臺(tái)進(jìn)行實(shí)名認(rèn)證

在這里插入圖片描述

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能(附源碼)的文章就介紹到這了,更多相關(guān)小程序?qū)崿F(xiàn)天氣預(yù)報(bào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: