HarmonyOS 5.0 简易天气APP开发实战（附完整代码）

一、开发背景与核心目标

随着HarmonyOS 5.0.0版本的全面推送，其分布式能力、轻量化部署特性进一步优化，适配手机、平板等多终端场景，成为移动开发者的优选生态。本文将基于HarmonyOS 5.0.0 API 12，开发一款简易天气APP，实现实时天气查询、未来3天预报、定位授权、天气预警提示等核心功能，全程拆解开发流程、核心代码及问题排查技巧，适合自学HarmonyOS的开发者参考。

二、开发环境准备

1. 开发工具：DevEco Studio 4.1（适配HarmonyOS 5.0.0版本），安装完成后需配置HarmonyOS SDK 5.0.0.12，确保SDK完整（包含Ability、UI、网络、定位等核心模块）；

2. 依赖配置：在build.gradle文件中引入网络请求依赖（OkHttp3）、JSON解析依赖（Gson），以及HarmonyOS系统定位服务、网络权限相关配置，具体代码如下（可直接复制使用）；

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
    // 网络请求依赖
    implementation 'com.squareup.okhttp3:okhttp:4.9.3'
    // JSON解析依赖
    implementation 'com.google.code.gson:gson:2.10.1'
    // HarmonyOS 5.0 核心依赖
    implementation 'ohos:ability:5.0.0.12'
    implementation 'ohos:ui:5.0.0.12'
}

// 权限配置（module.json5）
"abilities": [
    {
        "name": ".MainAbility",
        "permissions": [
            "ohos.permission.INTERNET", // 网络权限
            "ohos.permission.LOCATION"  // 定位权限
        ]
    }
]

3. 测试设备：可选用HarmonyOS 5.0.0及以上版本的手机模拟器，或真实手机（开启开发者模式，连接DevEco Studio进行调试）。

三、核心功能开发实战（附代码解析）

（一）UI界面设计（贴合HarmonyOS 5.0 设计规范）

采用HarmonyOS原生UI组件（DirectionalLayout、Text、Image、ProgressBar等），设计简洁、易用的界面，分为3个部分：顶部定位栏、中间天气展示区、底部未来预报区，核心布局代码如下，关键部分添加注释便于理解：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="#F5F7FA"&gt;

    <!-- 顶部定位栏 -->
    <DirectionalLayout
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:alignment="center"
        ohos:padding="10vp">
        <Image
            ohos:height="24vp"
            ohos:width="24vp"
            ohos:image_element="$media:location"
            ohos:margin_right="8vp"/>
        <Text
            ohos:id="$+id/tv_location"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="获取定位中..."
            ohos:text_size="18fp"
            ohos:text_color="#333333"/&gt;
    &lt;/DirectionalLayout&gt;

    <!-- 中间天气展示区 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:alignment="center"
        ohos:margin="20vp">
        <Image
            ohos:id="$+id/iv_weather_icon"
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:image_element="$media:sunny"/>
        <Text
            ohos:id="$+id/tv_temperature"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="25℃"
            ohos:text_size="40fp"
            ohos:text_color="#FF6600"
            ohos:margin="10vp"/>
        <Text
            ohos:id="$+id/tv_weather_desc"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="晴 微风"
            ohos:text_size="18fp"
            ohos:text_color="#666666"/>
    </DirectionalLayout&gt;

    <!-- 底部未来预报区 -->
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:padding="10vp"
        ohos:justify_content="space-around">
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:orientation="vertical"
            ohos:alignment="center">
            <Text ohos:text="明天" ohos:text_size="14fp"/>
            <Image ohos:height="30vp" ohos:width="30vp" ohos:image_element="$media:cloudy"/>
            <Text ohos:text="22℃" ohos:text_size="14fp"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:orientation="vertical"
            ohos:alignment="center">
            <Text ohos:text="后天" ohos:text_size="14fp"/>
            <Image ohos:height="30vp" ohos:width="30vp" ohos:image_element="$media:rainy"/>
            <Text ohos:text="18℃" ohos:text_size="14fp"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:orientation="vertical"
            ohos:alignment="center">
            <Text ohos:text="大后天" ohos:text_size="14fp"/>
            <Image ohos:height="30vp" ohos:width="30vp" ohos:image_element="$media:sunny"/>
            <Text ohos:text="24℃" ohos:text_size="14fp"/>
        </DirectionalLayout>
    </DirectionalLayout>

</DirectionalLayout>

（二）定位功能开发（获取当前城市）

基于HarmonyOS 5.0 定位服务（LocationManager），实现定位授权申请、当前经纬度获取，再通过第三方天气API（如聚合数据天气API）将经纬度转换为城市名称，核心代码如下，包含权限申请回调、定位结果处理：

package com.example.weatherapp.slice;

import com.example.weatherapp.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.location.Location;
import ohos.location.LocationCallback;
import ohos.location.LocationManager;
import ohos.location.LocationRequest;
import ohos.permission.PermissionRequest;

public class MainAbilitySlice extends AbilitySlice {
    private Text tvLocation;
    private LocationManager locationManager;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        
        // 初始化控件
        tvLocation = (Text) findComponentById(ResourceTable.Id_tv_location);
        
        // 申请定位权限
        requestLocationPermission();
    }

    // 定位权限申请
    private void requestLocationPermission() {
        String[] permissions = {"ohos.permission.LOCATION"};
        requestPermissionsFromUser(permissions, 1001, new PermissionRequest.Callback() {
            @Override
            public void onResult(boolean granted, String[] permissions) {
                if (granted) {
                    // 权限申请通过，获取定位
                    getLocation();
                } else {
                    tvLocation.setText("未授权定位，无法获取本地天气");
                }
            }
        });
    }

    // 获取当前定位（经纬度）
    private void getLocation() {
        locationManager = getSystemService(LocationManager.class);
        LocationRequest locationRequest = new LocationRequest();
        locationRequest.setPriority(LocationRequest.PRIORITY_HIGH_ACCURACY); // 高精度定位
        locationRequest.setInterval(10000); // 定位间隔10秒
        
        LocationCallback locationCallback = new LocationCallback() {
            @Override
            public void onLocationReport(Location location) {
                super.onLocationReport(location);
                // 获取经纬度
                double latitude = location.getLatitude();
                double longitude = location.getLongitude();
                // 调用方法，将经纬度转换为城市名称（后续结合天气API实现）
                getCityByLatLng(latitude, longitude);
                // 停止定位（获取一次即可）
                locationManager.removeLocationUpdates(this);
            }
        };
        
        // 开始定位
        locationManager.requestLocationUpdates(locationRequest, locationCallback, getMainTaskDispatcher());
    }

    // 经纬度转城市名称（调用第三方API）
    private void getCityByLatLng(double latitude, double longitude) {
        // 此处省略OkHttp3网络请求代码（完整代码见文末附件）
        // 调用聚合数据天气API，传入经纬度，获取城市名称及天气数据
        // 示例返回：北京市，后续将城市名称设置到tvLocation控件
        tvLocation.setText("北京市");
    }
}

（三）天气数据请求与展示

使用OkHttp3发送网络请求，调用第三方天气API获取实时天气、未来预报数据，通过Gson解析JSON数据，再将数据绑定到UI控件，核心代码包含网络请求封装、数据解析、UI更新，同时处理网络异常、API请求失败等异常场景，提升APP稳定性：

// 网络请求工具类（WeatherHttpUtil.java）
package com.example.weatherapp.util;

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;

import java.io.IOException;

public class WeatherHttpUtil {
    private static final OkHttpClient client = new OkHttpClient();

    // 同步网络请求（需在子线程中调用）
    public static String getWeatherData(String url) throws IOException {
        Request request = new Request.Builder()
                .url(url)
                .build();
        try (Response response = client.newCall(request).execute()) {
            return response.body().string();
        }
    }
}

// 天气数据解析与UI更新（MainAbilitySlice中补充）
private void getWeatherData(String city) {
    // 开启子线程，避免主线程阻塞（HarmonyOS 5.0 禁止主线程网络请求）
    new Thread(() -> {
        String apiUrl = "https://apis.juhe.cn/weather/index?city=" + city + "&key=你的API密钥";
        try {
            // 发送网络请求，获取天气JSON数据
            String weatherJson = WeatherHttpUtil.getWeatherData(apiUrl);
            // Gson解析JSON数据（需创建Weather实体类，完整代码见附件）
            Weather weather = new Gson().fromJson(weatherJson, Weather.class);
            // 主线程更新UI
            getMainTaskDispatcher().syncDispatch(() -> {
                updateWeatherUI(weather);
            });
        } catch (IOException e) {
            e.printStackTrace();
            getMainTaskDispatcher().syncDispatch(() -> {
                tvLocation.setText("网络异常，无法获取天气数据");
            });
        }
    }).start();
}

// 更新UI控件，展示天气数据
private void updateWeatherUI(Weather weather) {
    Text tvTemperature = (Text) findComponentById(ResourceTable.Id_tv_temperature);
    Text tvWeatherDesc = (Text) findComponentById(ResourceTable.Id_tv_weather_desc);
    // 设置实时温度、天气描述
    tvTemperature.setText(weather.getRealtime().getTemperature() + "℃");
    tvWeatherDesc.setText(weather.getRealtime().getWeatherDesc() + " " + weather.getRealtime().getWind());
    // 未来3天预报更新（代码省略，可参考UI布局补充）
}

（四）打包测试与常见问题排查

1. 打包测试：在DevEco Studio中，点击Build → Generate App Package，选择发布类型（Debug或Release），生成APP安装包，安装到测试设备，验证所有功能是否正常（定位、天气查询、UI展示等）；

2. 常见问题及解决方案：

（1）网络请求失败：检查网络权限是否配置、API密钥是否正确，以及测试设备是否联网，HarmonyOS 5.0 需确保APP已开启网络权限（设置 → 应用 → 天气APP → 权限 → 开启网络）；

（2）定位失败：确认测试设备（模拟器/真实手机）已开启定位功能，权限申请已通过，模拟器需手动设置经纬度（DevEco Studio → 模拟器 → 更多 → 定位）；

（3）UI适配异常：采用vp（虚拟像素）作为尺寸单位，避免使用px，确保在不同尺寸的HarmonyOS设备上正常展示。

四、文章总结与拓展

本文基于HarmonyOS 5.0.0版本，完成了简易天气APP的全流程开发，涵盖UI设计、定位功能、网络请求、数据解析等核心知识点，代码可直接复用、调试，适合自学HarmonyOS的开发者实操练习。后续可拓展功能：添加天气预警推送、历史天气查询、自定义城市天气查询等，进一步提升APP实用性。

附：完整代码包（包含所有Java类、XML布局文件、依赖配置），可私信获取，便于快速上手开发。如果本文对你有帮助，欢迎点赞、收藏、转发，一起交流HarmonyOS APP开发技巧！