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

最新推荐文章于 2025-05-28 16:32:07 发布

淼学派对

最新推荐文章于 2025-05-28 16:32:07 发布

阅读量706

点赞数 4

分类专栏： uniapp鸿蒙os 文章标签： harmonyos uni-app 华为

本文链接：https://blog.csdn.net/lbcyllqj/article/details/148240832

版权

uniapp鸿蒙os 专栏收录该内容

62 篇文章

订阅专栏

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