微信小程序 天氣預(yù)報(bào)
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:申請(qǐng)域名、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、象州網(wǎng)站維護(hù)、網(wǎng)站推廣。
實(shí)例主要功能
先看效果圖

微信小程序-天氣 首頁(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,在http://apistore.baidu.com 上申請(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是自己在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ò)城市名稱獲取城市的唯一ID
loadId: 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ò)城市名稱和城市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)類似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.jb51.net/201701/yuanma/weather(jb51.net).rar
另外,本站在線工具小程序上有一款天氣查詢工具,工具中還添加了城市選擇切換的功能,感興趣的朋友可以掃描如下小程序碼查看:

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
新聞標(biāo)題:微信小程序天氣預(yù)報(bào)開(kāi)發(fā)實(shí)例代碼源碼
網(wǎng)站路徑:http://chinadenli.net/article44/ipcche.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站、域名注冊(cè)、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)