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上的問題，歡迎評論區留言。