预览图:
一、代码部分
1:WXML:
<!--pages/weather/weather.wxml-->
<view class="father_box">
<!--上 -->
<view class="top_box">
<!-- 背景图片 -->
<image class="bg-image" mode="widthFix" src="../../images/l.jpg"></image>
<text class="pm2_5">{{city}}:{{pm2_5}}</text>
<view class="temperature">{{weatherArray[0].temperature_curr}}</view>
<view class="weather">{{weatherArray[0].weather}}</view>
<view class="wind">{{weatherArray[0].wind}}</view>
<view class="pm2_5_remark">{{pm2_5_remark}}</view>
</view>
<!-- 下 -->
<view class="bottom_box">
<view class="bottom_box_father">
<view class="bottom_left">
<view class="bottom_left_left">
<view style="margin-bottom: 10rpx;">今天</view>
<view>{{weatherArray[0].weather}}</view>
</view>
<view class="bottom_left_right">
<view style="margin-bottom: 10rpx;">{{weatherArray[0].temperature}}</view>
<view><image class="icon" mode="widthFix" src="{{weatherArray[0].weather_icon}}"></image></view>
</view>
</view>
<view style="height: 120rpx;width: 3rpx;background-color: #b9b9b9;"></view>
<view class="bottom_right">
<view class="bottom_right_left">
<view style="margin-bottom: 10rpx;">明天</view>
<view>{{weatherArray[1].weather}}</view>
</view>
<view class="bottom_right_right">
<view style="margin-bottom: 10rpx;">{{weatherArray[1].temperature}}</view>
<view><image class="icon" mode="widthFix" src="{{weatherArray[1].weather_icon}}"></image></view>
</view>
</view>
</view>
</view>
</view>
2:WXSS:
/* pages/weather/weather.wxss */
page{
height: 100%;
width: 100%;
}
.bg-image
{
width : 100%;
position: fixed;
z-index: -1;
}
.father_box{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
/* 上 */
.top_box{
flex: 4;
}
.pm2_5{
color: white;
padding: 10rpx;
margin-left: 20rpx;
background-color:violet
}
.temperature{
text-align: center;
margin-top: 10%;
color: white;
font-size:100rpx;
}
.weather{
text-align: center;
color: white;
font-size:40rpx;
padding-right: 20rpx;
}
.wind{
text-align: center;
color: white;
font-size:40rpx;
}
.pm2_5_remark{
margin-top: 15%;
text-align: center;
color: white;
font-size:40rpx;
}
/* 下 */
.bottom_box{
flex: 1;
background-color:white ;
}
.bottom_box_father{
display: flex;
height: 100%;
width: 100%;
margin-right: 10rpx;
box-sizing:content-box;
background-color: white;
align-items: center;
justify-content: center;
}
.bottom_left{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom_left_left{
flex: 1;
margin-left: 30rpx;
}
.bottom_left_right{
flex: 1;
}
.bottom_right{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom_right_left{
flex: 1;
margin-left: 30rpx;
}
.icon{
width: 60rpx;
}
.bottom_right_right{
flex: 1;
}
3:JS:
var QQMapWX = require('../../libs/qqmap-wx-jssdk'); // 百度地图js包文件
Page({
data: {
city: "",
weaid: "", // 城市气象编号
// 数据
pm2_5: "",
pm2_5_remark: "",
weatherArray: [{
temperature: "",
temperature_curr: "",
weather: "",
wind: "",
weather_icon:""
}, {
temperature: "",
weather: "",
weather_icon:""
}
],
pd:[false,false,false]
},
onLoad(e) {
wx.showLoading({
title: '拼命加载中...',
})
this.getLocationInfo()
},
// 获取当前城市
getLocationInfo() {
let _this = this
let qqmapsdk = new QQMapWX({
key: 'NL2BZ-6A46Q-GDY5V-GHTNI-SEL3S-Q6FM5'
});
wx.getLocation({
isHighAccuracy: true,
type: "gcj02",
success(res) {
let { latitude, longitude } = res
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
console.log(res.result)
let city = res.result.address_component.city
_this.setData({ city })
_this.getcityId()
},
fail: function (res) {
console.log(res);
},
});
}
})
},
// 获取城市编号
getcityId() {
let _this = this
wx.request({
url: 'http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
method: "GET",
dataType: "json",
success: (res) => {
let dtList = res.data.result.dtList
for (var key in dtList) {
if (_this.data.city.indexOf(dtList[key].cityNm) != -1) {
_this.setData({ weaid: dtList[key].weaId })
break
}
}
_this.SearchCityWeather()
},
fail: (result) => {
wx.showToast({
title: '获取城市编号失败',
icon: "error"
})
},
})
},
// 获取当前城市的天气指数
SearchCityWeather() {
let _this = this
// 获取今天天气
wx.request({
url: 'http://api.k780.com:88/?app=weather.today&weaid=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
method: "GET",
dataType: "json",
success: (res) => {
let resultArray = res.data.result
console.log(resultArray)
_this.setData({
'weatherArray[0].temperature': resultArray.temperature,
'weatherArray[0].temperature_curr': resultArray.temperature_curr,
'weatherArray[0].weather': resultArray.weather + resultArray.weather_curr,
'weatherArray[0].wind': resultArray.wind + " " + resultArray.winp
})
},
fail: (result) => {
wx.showToast({
title: '获取当前城市天气失败',
icon: "error"
})
},
complete:()=>{
_this.setData({'pd[0]':true})
}
})
// 获取pm2.5
wx.request({
url: 'http://api.k780.com/?app=weather.pm25&weaId=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
method: "GET",
dataType: "json",
success: (res) => {
let resultArray = res.data.result
console.log(resultArray)
_this.setData({
pm2_5: resultArray.aqi_levnm,
pm2_5_remark: resultArray.aqi_remark
})
},
fail: (result) => {
wx.showToast({
title: '获取当前城市天气失败',
icon: "error"
})
},
complete:()=>{
_this.setData({'pd[1]':true})
}
})
// 获取未来天气
wx.request({
url: 'http://api.k780.com:88/?app=weather.future&weaid='+_this.data.weaid+'&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
method: "GET",
dataType: "json",
success: (res) => {
let resultArray = res.data.result
console.log(resultArray)
_this.setData({
'weatherArray[0].weather_icon': resultArray[0].weather_icon,
'weatherArray[1].weather_icon': resultArray[1].weather_icon,
'weatherArray[1].temperature': resultArray[1].temperature,
'weatherArray[1].weather': resultArray[1].weather
})
},
fail: (result) => {
wx.showToast({
title: '获取未来城市天气失败',
icon:"error"
})
},
complete:()=>{
_this.setData({'pd[2]':true})
}
})
let Interval = setInterval(()=>{
if(_this.data.pd[0] && _this.data.pd[1] &&_this.data.pd[2]){
wx.hideLoading()
console.log("关闭")
clearInterval(Interval)
}
},500);
}
})
4:下载地图包:
不了解的可以通过这个链接查看,其中有关于小程序定位的内容,本章也使用到过:微信小程序获取位置信息_微信小程序获取当前位置_鸢与浅忆的博客-CSDN博客
5:app.json:
和page、window同级
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序获取当前定位信息"
}
}
二、 接口文档
该项目使用的接口为nowapi平台提供的接口,官方链接:实时天气接口 - 数据接口 - NowAPI
链接中使用的appkey、sign是免费,但每天有一个次数限制,用来做一个简单的项目足够了。
2.1、 获取城市列表
URL:http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json
参数 | 作用 |
app | 接口 此处应为:weather.city |
areaType | cn:国内城市 gb:国外城市 |
2.2、获取当前城市天气
URL: http://api.k780.com:88/?app=weather.today&weaid=94&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json
参数 | 作用 |
weaid | 城市气象编号 |
appkey | 10003 |
2.3、获取未来5天城市天气
URL:http://api.k780.com:88/?app=weather.future&weaid=101280601&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json文章来源:https://www.toymoban.com/news/detail-461138.html
欢迎大家在评论区多多交流留言。文章来源地址https://www.toymoban.com/news/detail-461138.html
到了这里,关于微信小程序 - 简易天气预报的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!