【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中如何實(shí)現(xiàn)天氣預(yù)報(bào)功能

這篇文章主要介紹了微信小程序中如何實(shí)現(xiàn)天氣預(yù)報(bào)功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。微信小程序天氣預(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)緯度，而不是真正的城市名稱，但我們可以根據(jù)這個(gè)經(jīng)緯度來(lái)獲取城市名稱等信息（需要用到第三方接口），再通過(guò)城市名稱和城市ID獲取對(duì)應(yīng)的天氣信息。在.js邏輯層增加函數(shù)：data:{

weatherApikey:'',

//天氣apikey，在

上申請(qǐng)

city:'',

//城市名稱

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)緯度獲取城市

loadCity:

function(latitude,

longitude)

{

var

page

=

this;

//這個(gè)key是自己在上申請(qǐng)的

var

key

=

"XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL";

var

url

=

"/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ò)城市名稱獲取城市的唯一ID

loadId:

function(city)

{

var

page

=

this;

var

url

=

"/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ò)城市名稱和城市ID獲取天氣情況

loadWeather:

function(city,

areaId)

{

var

page

=

this;

var

url

=

"/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)類似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