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

已于 2024-04-06 17:22:44 修改
阅读量2.2k 收藏 40
点赞数 16
分类专栏： 项目 小程序实战案例 文章标签： 小程序 微信小程序 notepad++
于 2023-12-16 11:02:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/135029882
版权

文章目录

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

一、项目需求分析

需求分析

  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
	}
  • 同时需要注意的是：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>
3、wxss的实现美化效果
  • wxss 就是简单的一些布局，例如颜色的渐变、 阴影、 圆角 和 鼠标hover效果了。由于代码量大，这里就部分展示；
  1. 颜色渐变效果：
  • 使用 background-image 属性完成 ，属性值就是 方向 和 颜色的透明度了。
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  1. 鼠标 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. 圆角效果
  • border-radius属性完成
border-radius: 20rpx;
  1. 底部按钮button使用flex布局实现
  • 让两个盒子平分父盒子显示，自适应宽度。
	display: flex;
	justify-content: space-around;
  1. 对天气信息采用分模块化的配色，同时添加了动画效果
  • 使用了 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;
	}
}

效果图如下：
在这里插入图片描述

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("获取天气失败!!!")
    }
  })
},
js代码分步介绍：

初始化数据容器：

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

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

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

这就是渲染w3的效果图：
在这里插入图片描述

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

获取天气详细信息模块
getWeather(e)
{
	const that = this	// 重新定义引用
},
  • 在我们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("获取天气失败!!!")
    }
  })

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

 data:{
   location:that.data.city,	// 用户选择的城市名称
   key:'0db90c3a430d46b58c83c875e6fa5de5'		// 和风API接口的key值
		},
  • 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
			}
		},

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

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

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

  • 请求失败
 fail(e)
 {
   console.log("获取天气失败!!!")
 }

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

下面就是内层的网络请求，根据 城市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		// 拿到需要渲染的数据
					})
        }
      })

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

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

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

key：一样的，是密钥。

  • 就是会发现这里使用和 header 配置项，这是网络请求中的 请求头，这是 后台数据库需要配置的数据，开发文档说明了需要配置，那么我在写的时候，就得按照后端程序员的设置去配置这个header请求头。一般的都是对请求的类型和返回数据的格式进行了配置。
        success (res) {
          that.setData({
            w3:res.data.daily		// 拿到需要渲染的数据
					})
        }
  • 同样的，请求成功后，我们将获取响应的数据中需要渲染的数据，存到我们的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>

  • 这里使用了 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>

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);
}

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("获取天气失败!!!")
    }
  })
},

4、效果图:

在这里插入图片描述

  • 有什么问题或需要完整的项目直接私信即可！
MakeFullStack
关注
  • 16
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
使用微信小程序开发制作一个简单的天气预报应用
吃不胖.
02-26 502
这只是一个简单的天气预报小程序示例，实际开发中还可以添加更多功能，比如获取更详细的天气信息、添加城市选择功能等。希望以上内容对您有所帮助！微信小程序是一种基于微信平台的应用程序，开发者使用微信开发者工具进行开发，通过微信平台提供的API接口实现功能。后端服务部分主要负责处理前端页面的请求，并返回相应的数据。云开发是微信提供的一种无需搭建服务器的后端开发方案，可以方便地实现数据存储和调用等功能。以上代码中，我们在页面加载完成后，通过wx.request方法向后端服务发送请求，并获取天气数据。
微信小程序 天气预报 (源码)
05-31
微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序 天气预报 (源码)微信小程序
实时更新天气微信小程序开发
薛定谔的猫
04-29 7439
最后我们在根据res.data这个数组中的值依此修改。4.此时我们的页面很怪，因为没有给它添加样式和值。看这原来的值就变成了服务器返回来的值。同理，我们可以采用这种办法，修改其他固定的值。6.完善代码，用wx-for的方式渲染出今天，明天，昨天的天气情况。但是注意此时我们采用的方式是写死的。一般来说，正常的开发应该是有网络请求的。当我们点击保存的时候，微信小程序会自动的帮我们创建好页面。5.给它值，使用插值表达式，数据放在js的data中。然后我们就可以把写死的值修改为服务器返回来的值。
微信小程序开发：显示本地天气
恰西v的前端开发学习笔记
02-03 1493
前言微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。微信“小程序”可以为开发者提供基于微信的表单、导航、地图、媒体和位置等开发组件，让他们在微信的网页里构建一个HTML 5应用。同时微信还开放了登录和微信支付等接口，让这个“小程序”可以和用户的微信账号打通。微信将“小程序”
微信小程序 - 简易天气预报
qq_56966336的博客
01-18 3261
微信小程序，简易天气预报小项目
小程序基本命令
aiven1637的博客
10-30 3211
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
天气预报微信小程序源码
06-30
为您提供实时全国天气气象信息,及时发布天气预报、灾害预警、气象云图、旅游天气、台风、暴雨雪等气象信息,为我国的生产生活提供全面精确的气象服务 功能： 1. 实时天气获取 2. 未来三天天气展示 3. 高温显示 4. 小程序背景颜色修改(默认4个) 技术： 1. vue 2. uniapp 代码说明： 1. 替换 project.config.json 文件中 第 44行 appid 为 你的wx小程序id 2. 替换 .\common 目录下 vendor.js 文件第 22050 行“applicationKey”、“qweatherKey”对应的key applicationKey ： 腾讯云地图api 申请地址：注册 (qq.com) qweatherKey: 和风天气api 申请地址 ：注册和风天气 部署时，小程序后台-开发设置-服务器域名 添加 https://apis.map.qq.com https://devapi.qweather.com
【微信小程序】使用和风天气接口api（全过程）——获取天气
热门推荐
weixin_60387745的博客
03-25 1万+
【微信小程序】使用和风天气接口api（全过程）——获取天气
微信小程序基于和风天气的天气预报（自动和手动定位）
m0_63474919的博客
05-29 3582
最近在开发小程序，将自己写的分享给大家,希望能帮助到你们！
微信小程序天气预报功能实现(支持自动定位,附源码)
coldriversnow的专栏
08-11 7124
目录由于和风天气API的更新，之前写的可能会出现版本不兼容的 情况。所以 更新了 这个 使用新版API的 小程序。效果图。
微信小程序开发笔记—天气获取显示
qq_45217381的博客
01-04 2701
本文主要介绍了如何实现微信小程序的天气获取和显示功能，内容全面，而且附有实现程序，有一定的参考价值。
天气预报小程序源码天气类微信小程序源码
06-23
天气预报小程序源码，天气类微信小程序源码。API使用的是和风天气。可以提供实时全国天气气象信息,及时发布天气预报、灾害预警、气象云图、旅游天气、台风、暴雨雪等气象信息,为我国的生产生活提供全面精确的气象服务。
Android Studio实现天气预报小程序
07-14
Android Studio实现天气预报小程序
微信小程序源码 天气预报（源码+截图）.rar
04-10
免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方，资料版权归原作者或出版方所有，本人不对所涉及的版权问题或内容负法律责任。如有侵权，请举报或通知本人删除。
微信小程序简单天气预报查询
05-28
微信小程序简单天气预报查询系统，利用API接口实现天气预报的调用查询，需要自己去设置request，在微信公众开发平台里面设置白名单。 天气接口api 地址：http://wthrcdn.etouch.cn/weather_mini?city=城市名称 不得不说这个免费的天气接口真的香，微信小程序的天气API封装的也不错，用起来很舒服，很方便，偷懒人的复印，简单调用连接。 微信小程序后台域名配置 登陆小程序后台，分别点击开发和开发设置 点击修改，将我们要用到的 API的域名添加到request合法域名里面
微信小程序开发项目实战_源代码.rar
09-19
很多读者无法在GitHub仓库上下载本书源代码，发个链接书的配套资源
“微天气”微信小程序实战开发过程
03-29
本文将带大家开发一个“微天气”小程序，方便微信网友随时查看天气。 天气预报API 要开发天气预报类APP，首先要考虑的问题就是天气预报数据的来源。有了天气预报的数据来源，才能按需要在微信小程序中显示出来。其实...
本科毕设基于微信小程序的在线网上购物商城系统小程序项目源码（开发文档+说明）.zip
06-12
非常完善的小程序购物系统，内附开发文档和操作说明，可以做到快速上手项目，新手也可操作，总之高分必备啊， 主要是一个面向大众服务的线上购物小程序系统，本系统使用的开发软件是微信小程序官方开发软件-微信...
微信小程序云开发外卖点餐小程序项目实战源码.zip
最新发布
09-28
微信小程序云开发外卖点餐小程序项目实战源码.zip微信小程序云开发外卖点餐小程序项目实战源码.zip微信小程序云开发外卖点餐小程序项目实战源码.zip微信小程序云开发外卖点餐小程序项目实战源码.zip微信小程序云开发...
微信小程序天气预报项目文档
06-08
一、项目简介 本项目是一个基于微信小程序平台的天气预报应用，用户可以通过输入城市名称获取该城市的实时天气情况和未来几天的天气预报信息。该应用使用了心知天气API提供的天气数据，同时也使用了微信小程序提供的API接口进行开发。 二、项目功能 1.输入城市名称，获取该城市的实时天气情况和未来几天的天气预报信息。 2.支持多语言切换，用户可以选择中英文显示。 3.支持下拉刷新，用户可以手动刷新天气数据。 4.支持分享功能，用户可以将天气预报信息分享给朋友或群组。 三、技术实现 1.使用微信小程序提供的开发框架进行开发，包括小程序前端界面设计和逻辑编写。 2.使用心知天气API提供的天气数据，通过微信小程序的API接口进行请求和解析数据。 3.使用微信小程序提供的下拉刷新和分享功能，增强用户体验。 四、项目架构 1.前端页面：使用微信小程序提供的wxml和wxss进行前端页面的设计和样式设置。 2.页面逻辑：使用微信小程序提供的JavaScript语言进行页面逻辑编写和数据处理。 3.API接口：使用微信小程序提供的wx.request()方法向心知天气API发送请求，获取返回的天气预报数据。 4.后台数据：使用心知天气API提供的天气数据作为后台数据源。 五、项目实施 1.注册并申请心知天气API访问权限。 2.使用微信小程序开发工具进行开发，包括前端页面设计和逻辑编写、API接口调用和数据处理等。 3.测试和调试，保证应用的正常运行和稳定性。 4.发布应用，供用户下载和使用。 六、项目收益 1.学习和掌握微信小程序的开发技术和API接口调用原理。 2.了解和使用心知天气API提供的天气数据，增强数据处理和数据可视化的能力。 3.提高前端开发和项目管理的能力，加强团队协作和沟通能力。 4.为用户提供方便、准确、及时的天气预报服务，提升用户满意度和忠诚度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MakeFullStack

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值