介紹

這里是小編成長(zhǎng)之路的歷程，也是小編的學(xué)習(xí)之路。希望和各位大佬們一起成長(zhǎng)！

以下為小編最喜歡的兩句話：

要有最樸素的生活和最遙遠(yuǎn)的夢(mèng)想，即使明天天寒地凍，山高水遠(yuǎn)，路遠(yuǎn)馬亡。

一個(gè)人為什么要努力？ 我見過最好的答案就是：因?yàn)槲蚁矚g的東西都很貴，我想去的地方都很遠(yuǎn)，我愛的人超完美。因此，小編想說：共勉！?

目錄

前言

顯示效果

一、注冊(cè)和風(fēng)天氣的賬號(hào)（具體過程就不演示了）

二、獲取和風(fēng)天氣的key

1、創(chuàng)建項(xiàng)目

?2、獲取key

?三、在小程序中的使用

第一步：創(chuàng)建包

第二步：示例代碼

workweather.wxml

workweather.wxxs

workweather.js

顯示效果

注意：如果各位大佬們，按照該博客不能出現(xiàn)自己想要的效果，那么可以去找其他的方法實(shí)現(xiàn)，可將該博客當(dāng)做一個(gè)小小的參考。感謝各位大佬的觀看！

一、注冊(cè)和風(fēng)天氣的賬號(hào)（具體過程就不演示了）

和風(fēng)天氣的官網(wǎng)

和風(fēng)天氣插件 | 和風(fēng)天氣插件產(chǎn)品，免費(fèi)、跨終端。適配你的網(wǎng)站、APP、公眾號(hào) (qweather.com)

二、獲取和風(fēng)天氣的key

1、創(chuàng)建項(xiàng)目

控制臺(tái)===》項(xiàng)目管理===》創(chuàng)建項(xiàng)目 就可以看到以下頁面（注意：如果頁面不一樣的話，可能是更新了）

這個(gè)地方注意一下，看你是做案例還是，公司使用，如果是做案例，可以和小編一樣選擇免費(fèi)訂閱。設(shè)置key的地方你可以選擇Web API，如果你選擇了 Android SDK / iOS SDK，那么生成的密鑰只能使用官方的 SDK 進(jìn)行數(shù)據(jù)訪問，如果是 Web API的話，可以自己編程獲取并解析數(shù)據(jù)。（當(dāng)然WebAPI解析比較慢一點(diǎn)，可以稍微等一會(huì)）

?2、獲取key

?三、在小程序中的使用

如果是小白的話，沒有賬號(hào)，建議注冊(cè)一個(gè)小程序的賬號(hào)，具體看小編的這篇文章。有賬號(hào)跳過這個(gè)步驟

【微信小程序】注冊(cè)小程序賬號(hào)、做一個(gè)案例——你好我的小程序_determine ZandR的博客-CSDN博客

第一步：創(chuàng)建包

第二步：示例代碼

workweather.wxml

<view class="header-modular" wx:if="{{now}}">
	<image class="bg-wave" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
	<view class="row">
		<view class="row location-wrap" bindtap="selectLocation">
			<image class="icon" src=""></image>
			<view class="title">{{City}} {{County}}</view>
		</view>
 
	</view>
	<view class="row">
		<view class="tmp">{{now.temp}}°</view>
		<image class="icon-weather" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{now.icon}}.png"></image>
	</view>
	<view class="tips-wrap">
		<view class="tips ">{{now.windDir}} {{now.windScale}}級(jí)</view>
		<view class="tips ">濕度 {{now.humidity}}%</view>
		<view class="tips ">氣壓 {{now.pressure}}Pa</view>
	</view>
</view>
 
<view class="card-modular " wx:if="{{hourly}}">
	<view class="title">24小時(shí)預(yù)報(bào)</view>
	<view class="card-wrap">
		<block wx:for="{{hourly}}" wx:key="index">
			<view class="item hourly">
				<view class="text-gray">{{item.time}}</view>
				<image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.icon}}.png"></image>
				<view class="text-primary mb-32">{{item.temp}}°</view>
				<view>{{item.windDir}}</view>
				<view class="text-gray">{{item.windScale}}級(jí)</view>
			</view>
		</block>
	</view>
</view>
 
<view class="card-modular" wx:if="{{daily}}">
	<view class="title">7天預(yù)報(bào)</view>
	<view class="card-wrap">
		<block wx:for="{{daily}}" wx:key="index">
			<view class="item daily">
				<view>{{item.dateToString}}</view>
				<view class="text-gray">{{item.date}}</view>
				<image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.iconDay}}.png"></image>
				<view class="text-primary ">{{item.tempMin}}°~{{item.tempMax}}°</view>
				<image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.iconNight}}.png"></image>
				<view>{{item.windDirDay}}</view>
				<view class="text-gray">{{item.windScaleDay}}級(jí)</view>
			</view>
		</block>
	</view>
</view>

workweather.wxxs

  page {
    background-color: linear-gradient(to bottom, #ffffff,#ffffff, #F6F6F6);
    padding-bottom: 60rpx;
  }
   
  /* 工具類 */
  .row {
    display: flex;
    align-items: center;
  }
   
  .mb-32{
    margin-bottom: 32rpx;
  }
   
  /* 頁面樣式 */
  .header-modular {
    height: 400rpx;
    background-color: #64C8FA;
    background: linear-gradient(to bottom, #56CCF2, #2F80ED);
    position: relative;
    padding: 30rpx;
  }
   
  .header-modular .bg-wave {
    width: 100vw;
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 120rpx;
    mix-blend-mode: screen;
  }
   
  .header-modular .location-wrap {
    color: #ffffff;
    font-weight: bold;
    font-size: 36rpx;
  }
   
  .header-modular .location-wrap .icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 8rpx;
  }
   
  .header-modular .tmp {
    font-size: 200rpx;
    /* font-weight: bold; */
    color: #ffffff;
    margin-right: auto;
  }
   
  .header-modular .icon-weather {
    width: 200rpx;
    height: 200rpx;
  }
   
  .header-modular .tips-wrap {
    display: flex;
    justify-content: space-between;
  }
   
  .header-modular .tips {
    font-size: 28rpx;
    opacity: 0.8;
    color: #ffffff;
    flex: 1;
  }
   
  .header-modular .tips:nth-child(3) {
    text-align: right;
  }
   
  .header-modular .tips:nth-child(2) {
    text-align: center;
  }
   
  .card-modular {
    padding:0 30rpx;
    margin-top: 30rpx;
  }
   
  .card-modular>.title {
    font-size: 40rpx;
    font-weight: bold;
    position: relative;
    margin-left: 14rpx;
    margin-bottom: 16rpx;
  }
   
  .card-modular>.title::before {
    content: "";
    position: absolute;
    left: -14rpx;
    top: 10rpx;
    bottom: 10rpx;
    width: 8rpx;
    border-radius: 10rpx;
    background-color: #2F80ED;
  }
   
  .card-modular .card-wrap {
    width: 690rpx;
    border-radius: 18rpx;
    background-color: #ffffff;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
    overflow-x: auto;
    white-space: nowrap;
  }
   
  .card-modular .card-wrap .item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 28rpx;
    padding: 18rpx 0;
  }
  .card-modular .card-wrap .item.hourly{
    width: 138rpx;
  } 
  .card-modular .card-wrap .item.daily{
    width: 172.5rpx;
  }
  .card-modular .card-wrap .item .icon {
    width: 60rpx;
    height: 60rpx;
    margin: 64rpx 0;
  }
   
  .card-modular .card-wrap .item .text-gray {
    color: gray;
  }
   
  .card-modular .card-wrap .item .text-primary {
    color: #2F80ED;
  }
  
  
  

workweather.js

const APIKEY = "";// 填入你申請(qǐng)的KEY
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    this.getLocation()
  },
  //選擇定位
  selectLocation() {
    var that = this
    wx.chooseLocation({
      success(res) {
        //console.log(res)
        that.setData({
          location: res.longitude + "," + res.latitude
        })
        that.getWeather()
        that.getCityByLoaction()
      }
      , fail() {
        wx.getLocation({
          type: 'gcj02',
          fail() {
            wx.showModal({
              title: '獲取地圖位置失敗',
              content: '為了給您提供準(zhǔn)確的天氣預(yù)報(bào)服務(wù),請(qǐng)?jiān)谠O(shè)置中授權(quán)【位置信息】',
              success(mRes) {
                if (mRes.confirm) {
                  wx.openSetting({
                    success: function (data) {
                      if (data.authSetting["scope.userLocation"] === true) {
                        that.selectLocation()
                      } else {
                        wx.showToast({
                          title: '授權(quán)失敗',
                          icon: 'none',
                          duration: 1000
                        })
                      }
                    }, fail(err) {
                      console.log(err)
                      wx.showToast({
                        title: '喚起設(shè)置頁失敗，請(qǐng)手動(dòng)打開',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  })
                }
              }
            })
          }
        })

      }
    })
  },
  /**
   * 獲取定位
   */
  getLocation() {
    var that = this
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          location: res.longitude + "," + res.latitude
        })
        that.getWeather()
        that.getCityByLoaction()
      }, fail(err) {
        wx.showModal({
          title: '獲取定位信息失敗',
          content: '為了給您提供準(zhǔn)確的天氣預(yù)報(bào)服務(wù),請(qǐng)?jiān)谠O(shè)置中授權(quán)【位置信息】',
          success(mRes) {
            if (mRes.confirm) {
              wx.openSetting({
                success: function (data) {
                  if (data.authSetting["scope.userLocation"] === true) {
                    wx.showToast({
                      title: '授權(quán)成功',
                      icon: 'success',
                      duration: 1000
                    })
                    that.getLocation()
                  } else {
                    wx.showToast({
                      title: '授權(quán)失敗',
                      icon: 'none',
                      duration: 1000
                    })
                    that.setData({
                      location: "地理位置"
                    })
                    that.getWeather()
                    that.getCityByLoaction()
                  }
                }, fail(err) {
                  console.log(err)
                  wx.showToast({
                    title: '喚起設(shè)置頁失敗，請(qǐng)手動(dòng)打開',
                    icon: 'none',
                    duration: 1000
                  })
                  that.setData({
                    location: "地理位置"
                  })
                  that.getWeather()
                  that.getCityByLoaction()
                }
              })
            } else if (mRes.cancel) {
              that.setData({
                location: "地理位置"
              })
              that.getWeather()
              that.getCityByLoaction()
            }
          }
        })
      }
    })
  },
  /**
   * 根據(jù)坐標(biāo)獲取城市信息
   */
  getCityByLoaction() {
    var that = this
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        if (res.code == "200") {
          var data = res.location[0]
          that.setData({
            City: data.adm2,
            County: data.name
          })
        } else {
          wx.showToast({
            title: '獲取城市信息失敗',
            icon: 'none'
          })
        }

      }
    })
  },
  /**
   * 獲取天氣
   */
  getWeather() {
    var that = this
    wx.showLoading({
      title: '加載中',
    })
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        //console.log(res)
        that.setData({
          now: res.now
        })
      }
    })
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        //console.log(res)
        res.hourly.forEach(function (item) {
          item.time = that.formatTime(new Date(item.fxTime)).hourly
        })
        that.setData({
          hourly: res.hourly
        })
      }
    })
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        //console.log(res)
        res.daily.forEach(function (item) {
          item.date = that.formatTime(new Date(item.fxDate)).daily
          item.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString
        })
        that.setData({
          daily: res.daily
        })
        wx.hideLoading()
      }
    })
  },
  // 格式時(shí)間
  formatTime(date) {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()
    const weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
    const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)
    return {
      hourly: [hour, minute].map(this.formatNumber).join(":"),
      daily: [month, day].map(this.formatNumber).join("-"),
      dailyToString: isToday ? "今天" : weekArray[date.getDay()]
    }
  },
  // 補(bǔ)零
  formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

注意： 如果復(fù)制上述代碼，出現(xiàn)wx.getLocation need to be declared in the requiredPrivateInfos field in app.json的問題，查看兩個(gè)地方

一、看全局json中是否有以下代碼

  "requiredPrivateInfos": [
    "getLocation"
  ]

?

?二、看版本(2.6.0以上版本無法使用)

以上就是小編做的一個(gè)小案例，希望各位大佬多多指教?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-400015.html

到了這里，關(guān)于【微信小程序】使用和風(fēng)天氣接口api（全過程）——獲取天氣的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！