鸿蒙负一屏：全场景服务的智能中枢与开发实践

/src/main/
├── resources/
│   ├── base/
│   │   ├── form_config.json      # 卡片核心配置（尺寸、刷新频率、入口）
│   │   └── profile/
│   │       └── main_pages.json   # 卡片页面路由
│   └── media/                    # 卡片图标、背景资源
├── ets/
│   ├── entryability/
│   │   └── EntryAbility.ts       # 主入口（可选）
│   └── formability/
│       └── WeatherFormAbility.ts # 卡片逻辑（生命周期、数据更新）
└── module.json5                  # 元服务注册、权限声明

{
  "forms": [
    {
      "name": "weather_form",          // 卡片名称（唯一）
      "description": "实时天气卡片",   // 卡片描述
      "src": "./ets/formability/WeatherFormAbility.ts", // 卡片逻辑入口
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "isDefault": true,               // 默认展示卡片
      "colorMode": "auto",             // 自适应明暗模式
      "supportDimensions": ["2x2", "2x4"], // 支持尺寸
      "updateDuration": 30             // 刷新频率（30分钟，单位：分钟）
    }
  ]
}

import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';

export default class WeatherFormAbility extends FormExtensionAbility {
  // 卡片创建时触发
  onAddForm(formId: string) {
    console.info(`卡片创建：${formId}`);
    // 初始化数据（模拟天气数据）
    const formData = formBindingData.createFormBindingData({
      temp: "22℃",
      weather: "多云",
      location: "郑州"
    });
    // 更新卡片UI
    this.updateForm(formId, formData);
  }

  // 卡片刷新时触发（由updateDuration控制）
  onUpdateForm(formId: string) {
    console.info(`卡片刷新：${formId}`);
    // 模拟请求后端获取最新天气
    const newData = formBindingData.createFormBindingData({
      temp: "24℃",
      weather: "晴",
      location: "郑州"
    });
    this.updateForm(formId, newData);
  }

  // 卡片移除时触发
  onRemoveForm(formId: string) {
    console.info(`卡片移除：${formId}`);
  }
};

import { Column, Text, Image, Row } from '@kit.ArkUI';

@Entry
@Component
struct WeatherForm {
  private data: FormData; // 从FormExtensionAbility传递的绑定数据

  build() {
    Column() {
      // 顶部：位置+天气图标
      Row() {
        Text(this.data.location)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .margin({ right: 10 })
        Image("common/weather_sunny.png")
          .width(32)
          .height(32)
      }
      .margin({ bottom: 8 })

      // 中间：温度
      Text(this.data.temp)
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 4 })

      // 底部：天气描述
      Text(this.data.weather)
        .fontSize(14)
        .fontColor(Color.Grey)
    }
    .width('100%')
    .height('100%')
    .padding(12)
    .backgroundColor(Color.White)
    .borderRadius(16) // 卡片圆角（遵循设计规范）
  }
}

// 给卡片根组件添加点击事件
Column() {
  // 卡片内容
}
.onClick(() => {
  // 跳转至元服务详情页
  postCardAction(this, {
    action: 'ability',
    abilityName: 'com.example.WeatherDetail', // 目标元服务Ability
    params: { location: this.data.location } // 传递参数
  });
})