微信小程序天氣預(yù)報(bào)開(kāi)發(fā)實(shí)例代碼源碼

2019-11-19 17:50:39

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

微信小程序天氣預(yù)報(bào)

實(shí)例主要功能

自動(dòng)定位所在城市
根據(jù)所定位的城市獲取天氣信息
顯示未來(lái)幾天的天氣情況
查看當(dāng)天天氣的詳情信息

先看效果圖

微信小程序-天氣首頁(yè)

微信小程序-天氣詳情頁(yè)

思路及編碼部份自動(dòng)定位所在城市

wx.getLocation：通過(guò)官方文檔的API中可以看到wx.getLocation可以獲取到當(dāng)前的地理位置和速度，不過(guò)獲取到的地理位置只是經(jīng)緯度，而不是真正的城市名稱(chēng)，但我們可以根據(jù)這個(gè)經(jīng)緯度來(lái)獲取城市名稱(chēng)等信息（需要用到第三方接口），再通過(guò)城市名稱(chēng)和城市ID獲取對(duì)應(yīng)的天氣信息。

在.js邏輯層增加函數(shù)：

data:{ weatherApikey:'', //天氣apikey，在http://apistore.baidu.com 上申請(qǐng) city:'', //城市名稱(chēng) areaid:'', //城市對(duì)應(yīng)的id curWd:{}, //當(dāng)天天氣情況 indexs:{}, //當(dāng)天天氣詳情說(shuō)明 forecast:{} //未來(lái)4天的天氣情況},onLoad:function(options){ // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 this.setData({weatherApikey:getApp().globalData.weatherApikey}); this.loadLocation();},//獲取當(dāng)前的位置信息，即經(jīng)緯度loadLocation: function() { var page = this; wx.getLocation({ type: 'gcj02', // 默認(rèn)為 wgs84 返回 gps 坐標(biāo)，gcj02 返回可用于 wx.openLocation 的坐標(biāo) success: function(res){  // success  var latitude = res.latitude;  var longitude = res.longitude;  //獲取城市  page.loadCity(latitude, longitude); } })},//通過(guò)經(jīng)緯度獲取城市l(wèi)oadCity: function(latitude, longitude) { var page = this; //這個(gè)key是自己在http://apistore.baidu.com上申請(qǐng)的 var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL"; var url = "http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key="+key+"&get_poi=1"; wx.request({ url: url, data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 設(shè)置請(qǐng)求的 header success: function(res){  // success  var city = res.data.result.address_component.city;  city = city.replace("市", ""); //將“市”去掉，要不然取不了天氣信息  page.setData({city: city});  page.loadId(city); } })},//通過(guò)城市名稱(chēng)獲取城市的唯一IDloadId: function(city) { var page = this; var url = "http://apis.baidu.com/apistore/weatherservice/citylist"; wx.request({ url: url, data: {  cityname: city }, header: {  apikey:page.data.weatherApikey },  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function(res){  // success  var cityid = res.data.retData[0].area_id;  page.setData({areaid: cityid});  page.loadWeather(city, cityid); } })},//通過(guò)城市名稱(chēng)和城市ID獲取天氣情況loadWeather: function(city, areaId) { var page = this; var url = "http://apis.baidu.com/apistore/weatherservice/recentweathers"; wx.request({ url: url, data: {  cityname:city,  cityid: areaId }, header: {  apikey: page.data.weatherApikey }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function(res){  // success  page.setData({curWd : res.data.retData.today, indexs: res.data.retData.today.index, forecast:res.data.retData.forecast}); } })},//事件綁定，跳轉(zhuǎn)到天氣詳情頁(yè)面gotoDetail: function(event) {// console.log(this.data.areaid+"==在這里跳轉(zhuǎn)=="+this.data.city);wx.navigateTo({ url: '../detail/detail?city='+this.data.city+"&cityid="+this.data.areaid})}

注意：page.setData或this.setData都是用來(lái)設(shè)置data中的數(shù)據(jù)值的。通過(guò)上面的邏輯層可以看出在這里基本都是處理數(shù)據(jù)和一些事件綁定，而且微信本身已經(jīng)為我們封裝了很多實(shí)用的功能，這里用到的比如：wx.navigateTo、wx.request、wx.getLocation，在與視圖通訊時(shí)有點(diǎn)類(lèi)似AngularJS的雙向數(shù)據(jù)綁定。

index.wxml解析

<view class="main-container"> <import src="../templates/today-tpl"/> <view bindtap="gotoDetail"> <template is="today-tpl" data="{{city, curWd}}"/> </view> <import src="../templates/index-tpl"/> <view class="index-content">  <block wx:for="{{indexs}}" wx:key="item" wx:for-index="idx">   <template is="index-tpl" data="{{item,idx}}"></template>  </block> </view> <import src="../templates/forecast-tpl"/> <view class="forecast">  <block wx:for="{{forecast}}" wx:key="item">   <template is="forecast-tpl" data="{{item}}"/>  </block> </view></view>

說(shuō)明：在這里用到了微信的一些組件，如：view：視圖容器；block：不會(huì)在頁(yè)面上留下任何東西，循環(huán)時(shí)使用這個(gè)不會(huì)增加額外的標(biāo)簽；template：引用模板；import：導(dǎo)入模板信息，只有導(dǎo)入后才能引用；{{}}：引用數(shù)據(jù)；wx:for：循環(huán)。

模板文件

模板文件其實(shí)就是wxml文件

<template name="today-tpl"> <view class="today">  <view class="city">{{city}}</view>  <view class="date">{{curWd.date}} {{curWd.week}}</view>  <view class="temp">{{curWd.curTemp}}</view>  <view class="weather">{{curWd.type}} {{curWd.lowtemp}}/{{curWd.hightemp}}</view>  <view class="wd">{{curWd.wd}}</view> </view></template>

注意：關(guān)于模板的描述可以參考官方文檔模板和引用。

源碼下載：http://xiazai.VeVB.COm/201701/yuanma/weather(VeVB.COm).rar

另外，本站在線工具小程序上有一款天氣查詢工具，工具中還添加了城市選擇切換的功能，感興趣的朋友可以掃描如下小程序碼查看：