微信小程序实战项目开发（天气预报项目实战）：内涵开发说明文档、需求文档 && 手把手分步骤教你写出自己的小程序项目 && 天气预报小程序 && 时实请求获取天气 && 自定义功能 && 完整的源代码_查看天气预报微信小程序开发实例

微信小程序开发实现天气预报

一、项目需求分析

需求分析

1. 静态页面设计：要求界面美观 → 在wxss代码文件中对 wxml代码文件进行合理布局和美化，舒适的交互效果.
2. 功能逻辑完善：能够使用到 wx.request 请求接口实现天气预报查询的功能

主要使用到的技术栈如下：

• wxml：中使用了 picker 组件标签来完成了我们城市选择
• wxss：我们使用了简单的布局：background-image、动画效果等常用属性完成页面的美化
• app.json：该项目由于考虑到为一个页面，所以在全局配置文件中对页面的 window进行了配置，从而实现顶部的下拉、背景、文字和颜色的效果
• js：文件中我们主要的使用了 wx.request 方法请求和风天气的WebAPI 后端接口 实现了最直观的业务逻辑。

实现思路分析详解如下：

1、创建项目、全局配置 json 文件

创建小程序项目，使用JavaScript开发，这一点注意了即可。

项目创建成功后，我第一时间对 json 文件中的代码进行阅读和配置，这也是项目开发的第一步和后续操作防止出现问题的重要手段

代码如下：

	"window": {
		"navigationBarBackgroundColor": "#00FFFF",
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "WeatherQuery",
		"backgroundColor": "#00FA9A",
		"backgroundTextStyle": "light",
		"enablePullDownRefresh": true
	}
1
2
3
4
5
6
7
8

• 同时需要注意的是：pages配置值的时候注意我们天气页面的位置，需要放在第一个，否则会出现跑错的问题！（最好建议除非有多个页面，不然除了需要的直接删掉就好了）。

2、在 wxml文件中完成布局

实现代码如下：

<view class="father_View_box">
		<!-- 显示当前查询城市 -->
		<view class="at_present_query_city">
			<text class="ar_present_hint_text">当前查询城市:</text>
			<text class="city_text">{{city}}</text>
		</view>
		<!-- 显示城市天气信息 -->
		<view
			class="show_sity_weather_information" 			wx:for="{{w3}}" wx:key="index">
			<text class="text_1">第 {{ index + 1 }} 天：</text>
			<text class="text_2">最高温度:{{item.tempMax}}</text>
			<text class="text_3">最低温度:{{item.tempMin}}</text>
			<text class="text_4">风向：{{item.windDirDay}}</text>
			<text class="text_5">风级：{{item.textDay}}</text>
		</view>

</view>

<!-- button -->
<view class="button_view">
			<!-- 选择城市 -->
			<button class="select_city_button">
							<picker class="wxml_picker" mode="region" level="city" 		bindchange="selCity">选择城市</picker>
		</button>
		<!-- 获取天气信息 -->
		<button class="query_weather_information" 				bind:tap="getWeather">获取城市天气信息</button>
</view>
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

3、wxss的实现美化效果

• wxss 就是简单的一些布局，例如颜色的渐变、 阴影、 圆角 和 鼠标hover效果了。由于代码量大，这里就部分展示；

1. 颜色渐变效果：

• 使用 background-image 属性完成 ，属性值就是 方向 和 颜色的透明度了。

	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
1

2. 鼠标 hover 浮动阴影效果：

• box-shadow 属性实现阴影效果
• transition 属性主要实现就是动态了
• 给选择器添加 hover 鼠标悬停效果

/* 设置初始状态的样式 */
transition: all 0.3s;
transform: translateY(0);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);

/* 设置鼠标悬停状态的样式 */
transform: translateY(-10px);
box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
1
2
3
4
5
6
7
8

3. 圆角效果

• border-radius属性完成

border-radius: 20rpx;
1

4. 底部按钮button使用flex布局实现

• 让两个盒子平分父盒子显示，自适应宽度。

	display: flex;
	justify-content: space-around;
1
2

5. 对天气信息采用分模块化的配色，同时添加了动画效果

• 使用了 keyframes属性 定义了animate动画，然后hover盒子后，则执行该动画。

.show_sity_weather_information:hover {
		animation: animate 0.5s linear infinite;
	} 


@keyframes animate {

	0%,
	25% {
		text-shadow: 2px 5px 2px rgb(245, 6, 6);
	}

	50% {
		text-shadow: 2px -5px 2px #0f0;
	}

	75% {
		text-shadow: -2px 5px 2px #00f;
	}

	100% {
		text-shadow: -2px -5px 2px #f0f;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果图如下：

4、业务逻辑的实现

• 这里使用的是原生的微信小程序开发 采用 JavaScript 语言编写的交互逻辑！
• 使用了和风天气 webAPI接口 完成了数据的请求。

全部逻辑代码如下

• 相信看注释应该都能看懂这段代码的含义。下面我会分步对代码块完成的功能进行介绍！

// pages/city/city.js
Page({
  data: {
    w3:[],
    city:'郑州'
	},
	// 选择城市触发的事件
selCity(e)
{
	// 获取城市的id，因为请求城市天气，依靠的就是id
  this.setData({
    city:e.detail.value[1]
  })
},

  // 获取天气触发的事件
getWeather(e)
{
	const that = this
	// 向服务器发送请求
  wx.request({

		url: 'https://geoapi.qweather.com/v2/city/lookup', // 请求地址
		// 请求携带的参数
    data:{
      location:that.data.city,	// 用户选择的城市名称
      key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
		// 请求成功后，获取城市的 id
		success(e)
    {
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}


			// 根据上面获取到的城市id ， 请求城市天气信息
      wx.request({
        url: 'https://devapi.qweather.com/v7/weather/3d', 
        data: {
          location: cityCode,		// 携带的城市id
          key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
				},
				// 配置请求头
        header: {
          'content-type': 'application/json' 
        },
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
      })
		},
		// 请求失败所触发的事件
    fail(e)
    {
      console.log("获取天气失败!!!")
    }
  })
},
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

js代码分步介绍：

初始化数据容器：

  data: {
    w3:[],
    city:'郑州'
	},
	// 选择城市触发的事件
selCity(e)
{
	// 获取城市的id，因为请求城市天气，依靠的就是id
  this.setData({
    city:e.detail.value[1]
  })
},
1
2
3
4
5
6
7
8
9
10
11
12

• data{} : 里面的数据 w3 是用于存放我们需要渲染到页面上的天气信息，例如：最高温、最低温、天气、风向等数据。他是一个数组。目的就是方便后面我们使用wx.for进行循环渲染映射结构。

• city：见名知意，就是城市。当我们选择省份后，会自动帮我们获取城市信息，然后存放到该key属性中。方便我们后面请求城市的天气信息。

这就是渲染w3的效果图：

这里我们只请求三天的数据，七天、十五天、都是一样！不过就是请求的结构进行更改。

获取天气详细信息模块

getWeather(e)
{
	const that = this	// 重新定义引用
},
1
2
3
4

• 在我们wxml代码中的按钮上， 我们注册了点击事件（getWeather（e））
• 然后里面我们使用 wx.request 总共就发送了两次请求（采用了嵌套请求）

  wx.request({

		url: 'https://geoapi.qweather.com/v2/city/lookup', // 请求地址
		// 请求携带的参数
    data:{
      location:that.data.city,	// 用户选择的城市名称
      key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
		// 请求成功后，拿到城市的 id
		success(e){
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}
		},
		// 请求失败所触发的事件
    fail(e)
    {
      console.log("获取天气失败!!!")
    }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

我么先看看外层请求：这里我们使用 和风天气城市的接口，用来获取我们用户所选择的城市 locationId （用于内层请求数据所携带的请求参数）。

 data:{
   location:that.data.city,	// 用户选择的城市名称
   key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
1
2
3
4

• data配置项里面就是此次请求所携带的参数，第一个参数就是我们用户选择的城市信息（就是我们上面获取存储的）
• 第一个key 就是我们的 和风项目中的API接口 的值了，可以理解为是一个密钥。就和身份证一样。

• 请求成功

		success(e){
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}
		},
1
2
3
4
5
6
7

这是我们请求服务器成功后，服务器给我们响应所触发的函数（请求成功自动调用），我们只需要负责编写里面的逻辑就好了。

我先对返回的结果进行判断，目的是防止数据出现问题导致编译错误！

然后我将里面的数据存在了一个变量中，这里使用了var声明（不推荐使用），不过这里恰好用了它的这一点好处。存好后内层请求数据可以访问我这个变量里面的数据发送请求（也就是城市的 id ）

• 请求失败

 fail(e)
 {
   console.log("获取天气失败!!!")
 }
1
2
3
4

失败就在控制台输出结果，提示 “获取天气失败”

下面就是内层的网络请求，根据 城市id 获取天气信息。

	  // 根据上面获取到的城市id ， 请求城市天气信息
      wx.request({
        url: 'https://devapi.qweather.com/v7/weather/3d', 
        data: {
          location: cityCode,		// 携带的城市id
          key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
				},
				// 配置请求头
        header: {
          'content-type': 'application/json' 
        },
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

经过上面分析，这里我就不在一一讲解了，我们直接看这次的请求配置项 data

data: {
 location: cityCode,		// 携带的城市id
  key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
},
				// 配置请求头
header: {
 'content-type': 'application/json' 
},
1
2
3
4
5
6
7
8

location： 这次就是我们外层请求获取的城市id了

key：一样的，是密钥。

• 就是会发现这里使用和 header 配置项，这是网络请求中的 请求头，这是 后台数据库需要配置的数据，开发文档说明了需要配置，那么我在写的时候，就得按照后端程序员的设置去配置这个header请求头。一般的都是对请求的类型和返回数据的格式进行了配置。

        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
1
2
3
4
5

• 同样的，请求成功后，我们将获取响应的数据中需要渲染的数据，存到我们的w3 数组中。

将获取到的数据渲染到页面中：

		<!-- 显示城市天气信息 -->
		<view
			class="show_sity_weather_information" 			wx:for="{{w3}}" wx:key="index">
			<text class="text_1">第 {{ index + 1 }} 天：</text>
			<text class="text_2">最高温度:{{item.tempMax}}</text>
			<text class="text_3">最低温度:{{item.tempMin}}</text>
			<text class="text_4">风向：{{item.windDirDay}}</text>
			<text class="text_5">风级：{{item.textDay}}</text>
		</view>
1
2
3
4
5
6
7
8
9

• 这里使用了 wx.for 对数据对象 w3循环渲染了， 并且指定了key。

• 分析总结
  以上就是从分析项目需求 → 项目创建 → 页面布局 → 样式美化 → 业务逻辑实现 的完整步骤分析。对了这里存在最大的问题就是。切记开发文档的时候，一定要详细阅读开发文档中所嵌套的文档。方便我们开发请求服务器数据

二、完整代码实现

1、wxml代码

<view class="father_View_box">
		<!-- 显示当前查询城市 -->
		<view class="at_present_query_city">
			<text class="ar_present_hint_text">当前查询城市:</text>
			<text class="city_text">{{city}}</text>
		</view>
		<!-- 显示城市天气信息 -->
		<view
			class="show_sity_weather_information" 			wx:for="{{w3}}" wx:key="index">
			<text class="text_1">第 {{ index + 1 }} 天：</text>
			<text class="text_2">最高温度:{{item.tempMax}}</text>
			<text class="text_3">最低温度:{{item.tempMin}}</text>
			<text class="text_4">风向：{{item.windDirDay}}</text>
			<text class="text_5">风级：{{item.textDay}}</text>
		</view>

</view>

<!-- button -->
<view class="button_view">
			<!-- 选择城市 -->
			<button class="select_city_button">
							<picker class="wxml_picker" mode="region" level="city" 		bindchange="selCity">选择城市</picker>
		</button>
		<!-- 获取天气信息 -->
		<button class="query_weather_information" 				bind:tap="getWeather">获取城市天气信息</button>
</view>
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

2、wxss代码

/* pages/city/city.wxss */

/* 根组件的样式 */

.father_View_box {
	width: 100%;
	height: 1300rpx;
	background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
	border-radius: 15rpx;

	/* 设置初始状态的样式 */
	transition: all 0.3s;
	transform: translateY(0);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.father_View_box:hover {
	/* 设置鼠标悬停状态的样式 */
	transform: translateY(-10px);
	box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}



/* 显示查询城市的样式 */
.at_present_query_city {
	width: 100%;
	height: 240rpx;
	margin-top: 30rpx;
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	line-height: 240rpx;
	border-radius: 15rpx;

	  /* 设置初始状态的样式 */
		transition: all 0.3s;
		transform: translateY(0);
		box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);

}

.at_present_query_city:hover {
			  /* 设置鼠标悬停状态的样式 */
				transform: translateY(-10px);
				box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/*  显示城市内容 */
.show_sity_weather_information {
	width: 100%;
	height: 120rpx;
	margin-top: 150rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #FFCCAA;
}

.show_sity_weather_information:hover {
		animation: animate 0.5s linear infinite;
	}

.show_sity_weather_information .text_1 {
	font-size: 35rpx;
	color: orangered;
	background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
	margin-right: 15rpx;
}

.text_2 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;

}
.text_3 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;

}
.text_4 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;

}
.text_5 {
	font-size: 35rpx;
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	margin-right: 15rpx;
	
}
	


@keyframes animate {

	0%,
	25% {
		text-shadow: 2px 5px 2px rgb(245, 6, 6);
	}

	50% {
		text-shadow: 2px -5px 2px #0f0;
	}

	75% {
		text-shadow: -2px 5px 2px #00f;
	}

	100% {
		text-shadow: -2px -5px 2px #f0f;
	}
}


.at_present_query_city .ar_present_hint_text {
	margin-right: 100rpx;
	font-size: 50rpx;
	font-weight: 700;
	color: #808080;
}

.city_text {
	width: 200rxp;
	height: 50rpx;
	margin-right: 24rpx;
	line-height: 30rpx;
	text-align: center;
	font-size: 50rpx;
	color: hotpink;
	/* background-image: linear-gradient(to right, #6794a1 0%, #2ccfb1 50%); */
}


/* 选择城市button */


/* 获取城市天气信息button */

.button_view {
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

/* 1、选择城市 */
.select_city_button {

	background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);

	border-radius: 20rpx;
	/* 设置初始状态的样式 */
	transition: all 0.3s;
	transform: translateY(0);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.select_city_button:hover {
	/* 设置鼠标悬停状态的样式 */
	transform: translateY(-10px);
	box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}


/* 2、获取城市信息 */
.query_weather_information {
	border-radius: 20rpx;
	background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);

	/* 设置初始状态的样式 */
	transition: all 0.3s;
	transform: translateY(0);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.query_weather_information:hover {
	/* 设置鼠标悬停状态的样式 */
	transform: translateY(-10px);
	box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}



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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

3、js代码

// pages/city/city.js
Page({
  data: {
    w3:[],
    city:'郑州'
	},
	// 选择城市触发的事件
selCity(e)
{
	console.log(e.detail.code[3])
	// 获取城市的id，因为请求城市天气，依靠的就是id
  this.setData({
    city:e.detail.value[1]
  })
},

  // 获取天气触发的事件
getWeather(e)
{
	const that = this
	// 向服务器发送请求
  wx.request({

		url: 'https://geoapi.qweather.com/v2/city/lookup', // 请求地址
		// 请求携带的参数
    data:{
      location:that.data.city,	// 用户选择的城市名称
      key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
		// 请求成功后，获取城市的 id
		success(e)
    {
			console.log(e.data)
			if (e.data.location && e.data.location != undefined) {
				// 将 locaitionId获取存到城市id中，获取城市天气的时候使用
				var cityCode = e.data.location[0].id
			}


			// 根据上面获取到的城市id ， 请求城市天气信息
      wx.request({
        url: 'https://devapi.qweather.com/v7/weather/3d', 
        data: {
          location: cityCode,		// 携带的城市id
          key: '0db90c3a430d46b58c83c875e6fa5de5'		// API  接口的key值
				},
				// 配置请求头
        header: {
          'content-type': 'application/json' 
        },
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
      })
		},
		// 请求失败所触发的事件
    fail(e)
    {
      console.log("获取天气失败!!!")
    }
  })
},

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

4、效果图:

• 有什么问题或需要完整的项目直接私信即可！