uniapp语音播报天气预报微信小程序

1.产品展示

2.页面功能

(1)点击上方按钮实现语音播报4天天气情况。

3.uniapp代码

<template>
	<view class="container">
		<view class="header">
			<text class="place">地址:{{city}}</text>
			<text class="time">更新时间:{{reporttime}}</text>
		</view>
		<view class="weather-boxes">
			<view class="weather-box" v-for="(day, index) in weatherDays" :key="index">
				<text class="date">{{ formattedDate(day.date) }}</text>
				<view class="weather-info">
					<view class="weather-item day">
						<image :src="getDayIcon(day.dayWeather)" class="weather-icon" />
						<text>白天: {{ day.dayWeather }} {{ day.dayTemp }}℃</text>
					</view>
					<view class="weather-item night">
						<image :src="getNightIcon(day.nightWeather)" class="weather-icon" />
						<text>晚上: {{ day.nightWeather }} {{ day.nightTemp }}℃</text>
					</view>
					<view>
						<!-- 创建一个按钮，点击时调用playWeatherAudio方法 -->
						<button @click="playWeatherAudio(index)">语音播报</button>
						<!-- 这里不展示<audio>组件，因为直接通过InnerAudioContext播放 -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
...此处省略相关代码，需要的伙伴联系我
</script>
<style scoped>
	.container {}

	.header {
		display: flex;
		/* 设置为Flex容器 */
		justify-content: center;
		/* 居中对齐子元素 */
		align-items: center;
		/* 如果需要，在交叉轴上也对齐（这里可能不是必需的，因为内容默认就是垂直居中的，除非你有特别的需求） */
		gap: 10px;
	}

	.weather-boxes {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-right: 7px;
		margin-left: 7px;
	}

	.weather-box {
		width: 46%;
		/* 近似于50%，但留一些空间给margin */
		margin-bottom: 5px;
		background-color: #fff;
		border: 2px solid #ddd;
		border-radius: 4px;
		padding: 3px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.date {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.weather-info {
		display: flex;
		flex-direction: column;
	}

	.weather-item {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.weather-icon {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.weather-item text {
		font-size: 14px;
		color: #666;
	}
</style>

3.注意事项

(1)需要根据自己的需求替换URL、图片等；

(2)这里只给出项目的一部分代码，功能可能受到限制，后续会上传其他代码；

(3)如果有什么uniapp上的问题，欢迎评论区留言。