鸿蒙元服务-开发一个简单的气候应用

随着鸿蒙生态的不断美满，HarmonyOS 为开发者提供了全场景、多设备联动的本事。其中“元服务” (Service Widget 或 Ability Card) 是 HarmonyOS 特有的轻量级服务形态，可通过卡片的形式将应用的核心功能无缝呈现在多种设备上。此次，我们将以“简单气候应用”为例，展示如何利用鸿蒙元服务特性开发一款可在手机、平板、聪明屏等多种终端以卡片形式展示气候信息的应用。

---

一、实现目标

我们的最终目标是实现一个气候查询卡片，用户无需进入完整应用界面，就能在主屏卡片中实时查看当前都会的气候状况、温度以及气候图标。
核心功能点：

• 提供当前地理位置气候查询（示例以固定都会或内置坐标为例）。
  
• 展示气候卡片：包罗都会名称、当前温度、气候图标和简短描述。
  
• 支持轻量级交互，如点击卡片革新气候。
  

---

二、开发环境预备

1. 开发工具安装

• DevEco Studio: 华为官方提供的集成开发环境，下载所在可参考华为开发者官网。
  
• HarmonyOS SDK: 可通过 DevEco Studio 内置 SDK Manager 下载对应版本的鸿蒙 SDK。
  
• 开发者账号与设备（可选）: 若需在真机或鸿蒙模拟器中运行，必要有华为开发者账号并启用相应权限。
  

2. 项目初始化

打开 DevEco Studio：

• 创建新工程：选择 “File” -> “New” -> “HarmonyOS Project”。
  
• 选择模板：选择 Empty Feature Ability 模板（FA 模板），这样可以方便后续创建元服务卡片。
  
• 输入项目信息，如名称：SimpleWeather，包名：com.example.simpleweather，并选择合适的 API Level。
  

创建完毕后，DevEco Studio 将自动天生基础的目录布局。
3. 元服务（Service Widget）配置

在鸿蒙中，元服务通常以 Ability 的形式存在，并通过 config.json 或 module.json5 等配置文件来声明。我们必要在项目标 module.json5 中添加元服务相干的配置。
示例配置（请根据实际版本和目录布局微调）：

1. {
2.   "module": {
3.     "type": "entry",
4.     "name": "entry",
5.     "abilities": [
6.       {
7.         "name": "WeatherServiceAbility",
8.         "type": "service",
9.         "skills": [],
10.         "forms": [
11.           {
12.             "name": "WeatherWidget",
13.             "description": "Display simple weather info",
14.             "dimensions": [
15.               {
16.                 "id": 1,
17.                 "width": 2,
18.                 "height": 2
19.               }
20.             ],
21.             "defaultDimension": 1,
22.             "jsComponent": true
23.           }
24.         ]
25.       }
26.     ]
27.   }
28. }

复制代码

这里声明了一个 Service Ability（WeatherServiceAbility）和对应的一项元服务卡片（WeatherWidget）。

---

三、代码实现

1. 数据来源与网络请求

气候数据可以通过公开的气候 API 获取，如 OpenWeatherMap（需注册获取 API Key）。为简化演示，这里假定我们有一个简单的 API 调用函数。
在 entry/src/main/js/default/common/utils/weatherRequest.js 文件中编写：

1. import fetch from '@ohos.net.fetch';
3. const API_URL = "https://api.openweathermap.org/data/2.5/weather?q=Beijing&units=metric&appid=YOUR_API_KEY";
5. export async function getWeatherInfo() {
6.     try {
7.         const response = await fetch.fetch(API_URL);
8.         const json = await response.json();
9.         return {
10.             city: json.name,
11.             temp: Math.round(json.main.temp),
12.             description: json.weather[0].description,
13.             icon: json.weather[0].icon
14.         };
15.     } catch (e) {
16.         console.error("Failed to fetch weather:", e);
17.         return null;
18.     }
19. }

复制代码

2. 卡片布局编写

在鸿蒙中，元服务卡片利用 Declarative UI 或 XML 布局。以 Declarative UI 为例，在 entry/src/main/js/default/pages/CardForm.js 中：

1. import { getWeatherInfo } from '../common/utils/weatherRequest.js'
3. export default {
4.     data: {
5.         city: "Loading...",
6.         temp: "--",
7.         description: "N/A",
8.         iconUrl: ""
9.     },
10.     onInit() {
11.         this.loadWeather();
12.     },
13.     async loadWeather() {
14.         const info = await getWeatherInfo();
15.         if(info) {
16.             this.city = info.city;
17.             this.temp = info.temp + "°C";
18.             this.description = info.description;
19.             // 使用OpenWeatherMap的图标链接
20.             this.iconUrl = `http://openweathermap.org/img/wn/${info.icon}@2x.png`;
21.         }
22.     },
23.     refresh() {
24.         this.loadWeather();
25.     }
26. }

复制代码

对应的 UI 布局文件（entry/src/main/js/default/pages/CardForm.hml）示例：

1. <template>
2.   <div class="container">
3.     <div class="city">{{city}}</div>
4.     <image src="{{iconUrl}}" class="icon"/>
5.     <div class="temp">{{temp}}</div>
6.     <div class="desc">{{description}}</div>
7.     <button class="refresh-btn" @click="refresh">刷新</button>
8.   </div>
9. </template>

复制代码

样式文件（CardForm.css）简单示例：

1. .container {
2.   flex-direction: column;
3.   justify-content: center;
4.   align-items: center;
5. }
6. .city {
7.   font-size: 24px;
8.   margin-bottom: 10px;
9. }
10. .temp {
11.   font-size: 40px;
12.   font-weight: bold;
13.   margin-top: 10px;
14. }
15. .desc {
16.   font-size: 18px;
17.   margin-top: 5px;
18. }
19. .icon {
20.   width: 50px;
21.   height: 50px;
22.   margin: 10px;
23. }
24. .refresh-btn {
25.   margin-top: 15px;
26.   padding: 10px;
27.   background-color: #5B8FF9;
28.   color: #ffffff;
29.   border-radius: 5px;
30. }

复制代码

3. Ability 与 Card 关联

在 entry/src/main/js/default/app.js 中注册卡片路由：

1. export default {
2.     onCreate() {
3.         console.info('Application onCreate');
4.     },
5.     onDestroy() {
6.         console.info('Application onDestroy');
7.     }
8. }

复制代码

在 entry/src/main/js/default/ability/WeatherServiceAbility.js 中，创建 service ability 并注册卡片数据源：

1. import Ability from '@ohos.application.Ability'
3. export default class WeatherServiceAbility extends Ability {
4.     onCreate(want, launchParam) {
5.         console.info('WeatherServiceAbility onCreate');
6.     }
8.     onRequestForm(formId, formParams) {
9.         console.info('WeatherServiceAbility onRequestForm');
10.         // 返回卡片页面
11.         return {
12.             template: 'CardForm'
13.         };
14.     }
15. }

复制代码

确保在 module.json5 配置中已指定 WeatherServiceAbility 所提供的卡片模板为 CardForm。

---

四、调试与摆设

1. 模拟器调试

DevEco Studio 提供 HarmonyOS 模拟器大概可以连接鸿蒙设备。点击运行按钮选择合适的设备即可摆设运行。
成功后，在主屏添加卡片，在可用卡片列表中应能看到 “SimpleWeather” 的卡片，添加后显示实时气候信息。
2. 真机调试

将鸿蒙手机或平板通过 USB 连接到开发电脑，开启开发者模式。在 DevEco Studio 中选择目标设备为真实硬件，摆设运行。

---

五、常见问题与解决方案

• 气候数据无法获取？
  
  
  
  • 检查网络权限与 API Key 是否正确，以及设备是否可以大概访问外网。
    
  • 在 module.json5 中添加网络权限声明。
    
  
  
• 卡片无法正常显示布局？
  
  
  
  • 确保 CardForm.hml、CardForm.css、CardForm.js 文件路径和定名与配置中一致。
    
  • 检查 WeatherServiceAbility 的 onRequestForm 方法返回的模板名称是否正确。
    
  
  
• 革新不生效？
  
  
  
  • 查看 loadWeather 方法是否正确革新 data 数据。
    
  • 确保 button 的点击事件被正确绑定。
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。