微信小程序实现天气预报功能(附源码)

网友投稿 1178 2023-11-09

−目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题（必看）

前言

最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下。

效果图

天气API获取

微信小程序实现天气预报功能(附源码)

这里我用的是和风天气的API，打开官网注册或者登陆你的账号

进入控制台,新建应用

这是刚刚我们创建好的应用，点击添加KEY

选择WebAPI

这注册好我们的API了

微信小程序后台域名配置

登陆小程序后台，分别点击开发和开发设置

点击修改，将我们API的域名添加到request合法域名

里面https://free-api.heweather-

页面代码

.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<view class="header">
<view class="top">
<view class="city">
{{city}}
</view>
<view class="search">
<input placeholder="输入城市名" bindinput="bindKeyInput" placeholder-style="color:white"></input>
<view class="bt_search" bindtap="search">
<icon type="search" size="18" color="white"></icon>
</view>
</view>
</view>
<view class="center">
<view class="tmp">
{{tmp}}°
</view>
<image mode="widthFix" class="cond-image" src="https://moyv-/wechat/images/weather/{{imgsrc}}.png">
</image>
</view>
<view class="bottom">
<view>{{wind_dir}} {{wind_sc}}级</view>
<view>湿度 {{hum}}%</view>
<view>气压 {{pres}}Pa</view>
</view>
</view>
<view class="container">
<view class="hourly_title">24小时预报</view>
<scroll-view scroll-x="true" class="hourly">
<view class="h_item" wx:for="{{hourly}}" wx:key="index">
<text class="h_time">{{item.time}}</text>
<view class="h_img">
<image mode="widthFix" src="https://moyv-/wechat/images/weather/{{item.imgsrc}}.png"></image>
</view>
<text class="h_tmp">{{item.tmp}}°</text>
<text class="h_wind_dir">{{item.wind_dir}}</text>
<text class="h_wind_sc">{{item.wind_sc}}级</text>
</view>
</scroll-view>
<view class="hourly_title">7天预报</view>
<scroll-view scroll-x="true" class="daily">
<view class="d_item" wx:for="{{daily_forecast}}" wx:key="index">
<text class="d_txt">{{item.d_txt}}</text>
<text class="d_date">{{item.d_date}}</text>
<view class="h_img">
<image mode="widthFix" src="https://moyv-/wechat/images/weather/{{item.imgsrc_d}}.png"></image>
</view>
<text class="h_tmp">{{item.tmp_min}}°~{{item.tmp_max}}°</text>
<view class="h_img">
<image mode="widthFix" src="https://moyv-/wechat/images/weather/{{item.imgsrc_n}}.png"></image>
</view>
<text class="d_wind_dir">{{item.wind_dir}}</text>
<text class="d_wind_sc">{{item.wind_sc}}级</text>
</view>
</scroll-view>
</view>
<view class="footer">
-天气数据来自和风天气api-
</view>

.wxss

.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
Page({
/**
* 页面的初始数据
*/
data: {
search_city: ,
imgsrc:100
},
/**
* 根据城市获取天气预报
*/
getWeather(city) {
let that = this
//获取实况天气
wx.request({
url: https://free-api.heweather-/s6/weather/now?key=你后台的key&location= + city,
success: function(res) {
if (res.data.HeWeather6[0].status == unknown location) {
wx.showToast({
title: 抱歉！没有该城市的天气预报,
icon: none,
duration: 2000
})
return;
}
console.log(res)
that.setData({
city: city,
tmp: res.data.HeWeather6[0].now.tmp,
imgsrc: res.data.HeWeather6[0].now.cond_code,
wind_dir: res.data.HeWeather6[0].now.wind_dir,
wind_sc: res.data.HeWeather6[0].now.wind_sc,
hum: res.data.HeWeather6[0].now.hum,
pres: res.data.HeWeather6[0].now.pres
})
//获取24小时天气预报
wx.request({
url: https://free-api.heweather-/s6/weather/hourly?key=你后台的key&location= + city,
success: function(res) {
var arr = res.data.HeWeather6[0].hourly
var hourly = []
for (var i = 0; i < arr.length; i++) {
hourly[i] = {
"imgsrc": arr[i].cond_code,
"tmp": arr[i].tmp,
"time": arr[i].time.substring(11),
"wind_dir": arr[i].wind_dir,
"wind_sc": arr[i].wind_sc
}
}
that.setData({
hourly: hourly
})
var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
//获取未来7天天气预报
wx.request({
url: https://free-api.heweather-/s6/weather/forecast?key=你后台的key&location= + city,
success: function(result) {
//console.log(result)
var arr = result.data.HeWeather6[0].daily_forecast
var daily_forecast = []
for (var i = 0; i < arr.length; i++) {
daily_forecast[i] = {
d_txt: i == 0 ? "今天" : weekArray[new Date(arr[i].date).getDay()],
d_date: arr[i].date.substring(5),
imgsrc_d: arr[i].cond_code_d,
imgsrc_n: arr[i].cond_code_n,
wind_dir: arr[i].wind_dir,
wind_sc: arr[i].wind_sc,
tmp_max: arr[i].tmp_max,
tmp_min: arr[i].tmp_min,
cond_txt_d: arr[i].cond_txt_d
}
}
that.setData({
daily_forecast: daily_forecast
})
}
})
}
})
}
})
},
bindKeyInput(e) {
this.setData({
search_city: e.detail.value
})
},
search() {
this.getWeather(this.data.search_city)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getWeather("广州")
},
})

.json

?
1
2
3
4
{
"usingComponents": {},
"navigationBarTitleText": "天气预报"
}

注意问题（必看）

由于我的项目有用到天气预报的逐小时预报和7天预报，和风天气又必须实名才能获取到此数据，所以请登录和风天气后台进行实名认证

您可能感兴趣的文章:微信小程序 天气预报开发实例代码源码微信小程序实现天气预报功能微信小程序天气预报功能实现(支持自动定位,附源码)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 配置 实例
上一篇:微信小程序 视图层（xx.xml)和逻辑层(xx.js)详细介绍
下一篇:三分钟带你快速学会微信小程序的条件渲染
相关文章

 发表评论

暂时没有评论，来抢沙发吧~