使用 UniApp 開發實時天氣查詢應用 —— 鴻蒙生態下的跨端實踐
在移動互聯網時代，天氣應用幾乎是每個人手機中的"標配"。無論是出行、旅游還是日常生活，實時獲取天氣信息都極為重要。本文將以"實時天氣查詢應用"為例，詳細講解如何基于 UniApp 快速開發一款兼容鴻蒙（HarmonyOS）生態的天氣查詢小工具。文章不僅涵蓋了核心技術實現，還會分享實際開發中的經驗與優化建議，幫助你在多端環境下打造高質量的天氣應用。
一、項目需求與設計思路
1. 主要功能
- 輸入城市名稱，實時查詢當前天氣。
- 展示溫度、天氣狀況、風力、濕度等信息。
- 支持一鍵定位獲取本地天氣。
- 兼容鴻蒙、微信小程序、H5等多端。
2. 技術選型
- UniApp：一套代碼多端運行，極大提升開發效率。
- 第三方天氣API：如和風天氣、心知天氣等，免費易用。
- HarmonyOS適配：關注動畫、布局、權限等細節，提升鴻蒙端體驗。
二、核心功能實現
1. 獲取天氣數據
以和風天氣API為例，先在官網申請Key。接口調用示例：
// utils/weather.js
export async function getWeather(city) {const key = '你的和風天氣Key';const url = `https://devapi.qweather.com/v7/weather/now?location=${encodeURIComponent(city)}&key=${key}`;return uni.request({url,method: 'GET'});
}
2. 頁面結構與交互
新建 pages/weather/weather.vue 頁面，核心結構如下：
<template><view class="weather-app"><view class="search-bar"><input v-model="city" placeholder="請輸入城市名" @confirm="fetchWeather" /><button @click="fetchWeather">查詢</button><button @click="getLocationWeather">定位</button></view><view v-if="weather" class="weather-info"><text class="city">{{ weather.city }}</text><text class="temp">{{ weather.temp }}℃</text><text class="desc">{{ weather.text }}</text><text class="wind">風力：{{ weather.windDir }} {{ weather.windScale }}級</text><text class="humidity">濕度：{{ weather.humidity }}%</text></view><view v-else class="placeholder">請輸入城市名查詢天氣</view></view>
</template><script>
import { getWeather } from '@/utils/weather.js';export default {data() {return {city: '',weather: null};},methods: {async fetchWeather() {if (!this.city) {uni.showToast({ title: '請輸入城市名', icon: 'none' });return;}const res = await getWeather(this.city);if (res[1].statusCode === 200 && res[1].data.code === '200') {const now = res[1].data.now;this.weather = {city: this.city,temp: now.temp,text: now.text,windDir: now.windDir,windScale: now.windScale,humidity: now.humidity};} else {uni.showToast({ title: '查詢失敗', icon: 'none' });}},getLocationWeather() {uni.getLocation({type: 'wgs84',success: (res) => {// 這里可調用第三方API將經緯度轉為城市名// 簡化處理，假設已獲得城市名this.city = '北京';this.fetchWeather();},fail: () => {uni.showToast({ title: '定位失敗', icon: 'none' });}});}}
};
</script><style scoped>
.weather-app {min-height: 100vh;background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);padding: 40rpx;box-sizing: border-box;
}
.search-bar {display: flex;gap: 20rpx;margin-bottom: 40rpx;
}
input {flex: 1;border: 1px solid #eee;border-radius: 8rpx;padding: 16rpx;font-size: 32rpx;
}
button {background: #007dff;color: #fff;border: none;border-radius: 8rpx;padding: 0 32rpx;font-size: 32rpx;
}
.weather-info {background: rgba(255,255,255,0.8);border-radius: 16rpx;padding: 40rpx;text-align: center;box-shadow: 0 8rpx 32rpx rgba(0,125,255,0.12);
}
.city {font-size: 40rpx;font-weight: bold;
}
.temp {font-size: 80rpx;color: #ff4d4f;margin: 20rpx 0;
}
.desc, .wind, .humidity {font-size: 32rpx;margin: 8rpx 0;
}
.placeholder {color: #fff;font-size: 32rpx;text-align: center;margin-top: 80rpx;
}
</style>
3. 鴻蒙端適配與優化
- 權限適配：鴻蒙端定位權限需在
manifest.json配置，并在真機調試時關注授權彈窗。 - 動畫與交互：可結合
transition、animation增強天氣切換時的視覺體驗，鴻蒙端對 CSS 動畫支持良好。 - 分辨率適配：建議使用
rpx單位，確保在鴻蒙多種設備上自適應。 - 原生能力擴展：如需更豐富的體驗，可通過 JSAPI 調用鴻蒙原生能力（如語音播報天氣）。
三、實際應用場景與優化建議
- 首頁天氣卡片：可將天氣組件嵌入首頁，實時展示本地天氣。
- 多城市管理：支持添加多個城市，切換查看天氣。
- 天氣預警推送：結合云函數/推送服務，主動提醒惡劣天氣。
- UI美化：根據天氣類型動態切換背景、圖標，提升視覺體驗。
- 鴻蒙快應用：打包為鴻蒙快應用，利用鴻蒙分布式能力，實現多設備協同展示天氣。
四、總結
通過 UniApp 開發實時天氣查詢應用，不僅能實現一套代碼多端運行，還能充分利用鴻蒙生態的分布式、流暢動畫等特性，為用戶帶來高效、便捷的天氣服務體驗。希望本文的講解和代碼示例，能為你的鴻蒙/UniApp 項目提供實用參考。如果你有更好的實現思路或遇到問題，歡迎留言交流！
讓我們一起用 UniApp 和鴻蒙，打造更美好的跨端應用體驗！
