⼩程序天⽓预报开发实例代码源码
⼩程序天⽓预报
实例主要功能
1. ⾃动定位所在城市
2. 根据所定位的城市获取天⽓信息
3. 显⽰未来⼏天的天⽓情况
4. 查看当天天⽓的详情信息
先看效果图
⼩程序-天⽓⾸页
⼩程序-天⽓详情页
思路及编码部份⾃动定位所在城市
在.js逻辑层增加函数：
data:{
weatherApikey:'', //天⽓apikey，在apistore.baidu 上申请
city:'', //城市名称
areaid:'', //城市对应的id
curWd:{}, //当天天⽓情况
indexs:{}, //当天天⽓详情说明
forecast:{} //未来4天的天⽓情况
},
onLoad:function(options){
// ⽣命周期函数--监听页⾯加载
this.setData({weatherApikey:getApp().globalData.weatherApikey});
this.loadLocation();
},
//获取当前的位置信息，即经纬度
loadLocation: function() {
var page = this;
type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可⽤于 wx.openLocation 的坐标
success: function(res){
/
/ success
var latitude = res.latitude;
var longitude = res.longitude;
//获取城市
page.loadCity(latitude, longitude);
}
})
},
//通过经纬度获取城市
loadCity: function(latitude, longitude) {
var page = this;
/
/这个key是⾃⼰在apistore.baidu上申请的
var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL";
var url = "apis.map.qq/ws/geocoder/v1/?location="+latitude+","+longitude+"&key="+key+"&get_poi=1";
url: url,
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
var city = sult.address_component.city;
city = place("市", ""); //将“市”去掉，要不然取不了天⽓信息
page.setData({city: city});
page.loadId(city);
}
})
},
//通过城市名称获取城市的唯⼀ID
loadId: function(city) {
var page = this;
var url = "apis.baidu/apistore/weatherservice/citylist";
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 = Data[0].area_id;
page.setData({areaid: cityid});
page.loadWeather(city, cityid);
}
})
},
//通过城市名称和城市ID获取天⽓情况
loadWeather: function(city, areaId) {
var page = this;
var url = "apis.baidu/apistore/weatherservice/recentweathers";
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 : day, indexs: day.index, forecast:Data.forecast});
}
})
},
//事件绑定，跳转到天⽓详情页⾯
gotoDetail: function(event) {
// console.log(this.data.areaid+"==在这⾥跳转=="+this.data.city);
wx.navigateTo({
url: '../detail/detail?city='+this.data.city+"&cityid="+this.data.areaid
})
}
注意：page.setData或this.setData都是⽤来设置data中的数据值的。通过上⾯的逻辑层可以看出在这
⾥基本都是处理数据和⼀些事件绑定，⽽且本⾝已经为我们封装了很多实⽤的功能，这⾥⽤到的⽐如：wx.navigateTo、wx.request、
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>
说明：在这⾥⽤到了的⼀些组件，如：view：视图容器；block：不会在页⾯上留下任何东西，循
环时使⽤这个不会增加额外的标签；template：引⽤模板；import：导⼊模板信息，只有导⼊后才能引⽤；{{}}：引⽤数据；wx:for：循环。
模板⽂件
模板⽂件其实就是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">{{pe}} {{curWd.lowtemp}}/{{curWd.hightemp}}</view>
<view class="wd">{{curWd.wd}}</view>
</view>
</template>
注意：关于模板的描述可以参考官⽅⽂档模板和引⽤。
另外，本站在线⼯具⼩程序上有⼀款天⽓查询⼯具，⼯具中还添加了城市选择切换的功能，感兴趣的朋友可以扫描如下⼩程序码查看：
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。