微信小程式實現天氣預報功能(附原始碼)
阿新 • • 發佈:2020-12-11
前言
最近在學小程式開發,剛好學到天氣預報功能的製作,於是給大家分享下。
效果圖
天氣API獲取
這裡我用的是和風天氣的API,開啟官網註冊或者登陸你的賬號
進入控制檯,新建應用
這是剛剛我們建立好的應用,點選新增KEY
選擇WebAPI
這注冊好我們的API了
微信小程式後臺域名配置
登陸小程式後臺,分別點選開發和開發設定
點選修改,將我們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}}級</view> <view>溼度 {{hum}}%</view> <view>氣壓 {{pres}}Pa</view> </view> </view> <view class="container"> <view class="hourly_title">24小時預報</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}}級</text> </view> </scroll-view> <view class="hourly_title">7天預報</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}}級</text> </view> </scroll-view> </view> <view class="footer"> -天氣資料來自和風天氣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.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.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.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.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({ /** * 頁面的初始資料 */ data: { search_city: '',imgsrc:100 },/** * 根據城市獲取天氣預報 */ getWeather(city) { let that = this //獲取實況天氣 wx.request({ url: 'https://free-api.heweather.net/s6/weather/now?key=你後臺的key&location=' + city,success: function(res) { if (res.data.HeWeather6[0].status == 'unknown location') { wx.showToast({ title: '抱歉!沒有該城市的天氣預報',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小時天氣預報 wx.request({ url: 'https://free-api.heweather.net/s6/weather/hourly?key=你後臺的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天天氣預報 wx.request({ url: 'https://free-api.heweather.net/s6/weather/forecast?key=你後臺的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) },/** * 生命週期函式--監聽頁面載入 */ onLoad: function(options) { this.getWeather("廣州") },})
.json
{ "usingComponents": {},"navigationBarTitleText": "天氣預報" }
注意問題(必看)
由於我的專案有用到天氣預報的逐小時預報和7天預報,和風天氣又必須實名才能獲取到此資料,所以請登入和風天氣後臺進行實名認證
到此這篇關於微信小程式實現天氣預報功能(附原始碼)的文章就介紹到這了,更多相關小程式實現天氣預報內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!