当前位置：首页 > article >正文

鸿蒙OSUniApp 开发实时天气查询应用 —— 鸿蒙生态下的跨端实践#三方框架 #Uniapp

article 2025/8/21 16:26:52

使用 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>