用 AI 工具 Cursor 30 分钟开发鸿蒙元服务 Demo

第一步：用自然语言描述需求

在 Cursor 的对话界面（快捷键 Cmd+I），我直接输入：

'帮我创建一个鸿蒙元服务，功能是查询当前城市的天气信息并展示。需要包含以下要素：输入框，用户可以输入城市名称查询按钮，点击后调用天气 API 显示区域，展示温度、天气状况和图标使用 ArkTS 语言，采用声明式 UI 布局'

第二步：AI 生成基础代码

Cursor 很快就响应了，给出了一个完整的项目结构：

// 页面组件：WeatherService.ets
import { CityWeather } from '../model/WeatherModel'
import { weatherService } from '../service/WeatherService'

@Component
export struct WeatherPage {
  @State cityName: string = '北京'
  @State weatherData: CityWeather | null = null
  @State isLoading: boolean = false

  build() {
    Column({ space: 20 }) {
      // 输入区域
      TextInput({ placeholder: '请输入城市名称' }).width('80%').height(40).onChange((value: string) => {
        this.cityName = value
      })
      // 查询按钮
      Button('查询天气').width('60%').height(40).onClick(() => {
        this.queryWeather()
      })
      // 加载状态
      if (this.isLoading) {
        LoadingProgress().width(30).height(30)
      }
      // 天气展示
      if (this.weatherData) {
        WeatherCard({ data: this.weatherData })
      }
    }.padding(20).width('100%').height('100%')
  }

  private queryWeather() {
    this.isLoading = true
    weatherService.getWeather(this.cityName).then((data) => {
      this.weatherData = data
      this.isLoading = false
    }).catch((error) => {
      console.error('获取天气失败:', error)
      this.isLoading = false
    })
  }
}

第三步：调用 AI 工具检查代码

代码生成后，我让 Cursor 调用 DevEco MCP Toolbox 的检查功能：

'请用 check_ets_files 工具检查当前文件，确保 ArkTS 语法正确'

AI 自动执行检查，并反馈结果：

• ✅ 语法正确，无编译错误
• ⚠️ 建议：为 TextInput 组件添加 type=InputType.Normal 以明确输入类型
• ⚠️ 建议：LoadingProgress 组件需要从 @ohos.progress 导入

我按照建议修改后，代码更加规范。

第四步：集成天气 API 服务

接下来需要实现具体的天气服务。我在 Cursor 中继续输入：

'请实现 WeatherService 类，使用鸿蒙的网络请求能力，调用公开的天气 API（比如和风天气），解析返回的 JSON 数据并映射到 CityWeather 模型'

Cursor 生成的服务类代码如下：

// service/WeatherService.ets
import { http } from '@kit.NetworkKit'
import { CityWeather } from '../model/WeatherModel'

export class WeatherService {
  private static readonly API_KEY = '你的 API 密钥'
  private static readonly BASE_URL = 'https://devapi.qweather.com/v7/weather/now'

  static getWeather(cityName: string): Promise<CityWeather> {
    return new Promise((resolve, reject) => {
      let url = `${this.BASE_URL}?location=${cityName}&key=${this.API_KEY}`
      http.createHttp().request(url, {
        method: http.RequestMethod.GET,
        header: { 'Content-Type': 'application/json' }
      }).then((response) => {
        if (response.responseCode === 200) {
          let result = JSON.parse(response.result as string)
          let weather: CityWeather = {
            city: result.location.name,
            temperature: result.now.temp,
            condition: result.now.text,
            icon: this.mapIcon(result.now.icon),
            updateTime: new Date().toLocaleTimeString()
          }
          resolve(weather)
        } else {
          reject(new Error(`API 请求失败：${response.responseCode}`))
        }
      }).catch(reject)
    })
  }

  private static mapIcon(iconCode: string): Resource {
    // 将天气图标代码映射到本地资源
    const iconMap: Record<string, Resource> = {
      '100': $r('app.media.sunny'),
      '101': $r('app.media.cloudy'),
      '104': $r('app.media.rain')
      // ...更多映射
    }
    return iconMap[iconCode] || $r('app.media.unknown')
  }
}

第五步：UI 调试与优化

代码写完后，我想看看实际效果。于是让 Cursor 调用 UI 分析工具：

'请用 get_uidump 工具分析当前页面的 UI 结构，检查布局是否合理'

AI 返回了详细的 UI 树信息，我发现天气卡片的内边距偏小。根据分析结果，我调整了 WeatherCard 组件的 padding 值，确保在不同设备上都有良好的显示效果。

三、避坑经验：我遇到的三个典型问题

在开发过程中，我也踩过一些坑，这里分享出来帮你避免：

1. 网络权限配置

鸿蒙应用访问网络需要显式声明权限。我一开始忘了在 module.json5 中添加，导致天气 API 总是失败。正确的配置如下：

{"module":{"requestPermissions":[{"name":"ohos.permission.INTERNET"}]}}

2. 图片资源加载

天气图标需要从网络下载，但鸿蒙对图片加载有安全限制。我后来改用 Image 组件的 src 属性直接加载网络图片，并添加了占位符和错误处理：

Image(this.weatherData.icon).width(50).height(50).objectFit(ImageFit.Contain).placeholder($r('app.media.placeholder')).error($r('app.media.error'))

3. 状态管理混乱

最初我用了多个 @State 变量来管理不同状态，导致代码难以维护。后来我改为使用 @Observed 和 @ObjectLink 的组合，将天气数据封装成对象，让 UI 自动响应变化。

四、效率对比：30 分钟到底够不够？

你可能好奇，30 分钟真的能完成一个可用的鸿蒙元服务吗？我实际计时了一次：

• 0-5 分钟：环境配置与项目初始化
• 5-15 分钟：AI 生成基础页面代码
• 15-25 分钟：集成 API 服务与数据处理
• 25-30 分钟：UI 调试与细节优化

结果比我想象的还要顺利。当然，这建立在对鸿蒙开发有一定了解的基础上。如果你是新手，可能需要额外的时间来理解 API 调用和 UI 组件的用法。但无论如何，Cursor 的 AI 辅助至少能帮你节省 50% 以上的编码时间。

写在最后：我的真实感受

说实话，在试用 Cursor 开发鸿蒙元服务之前，我是有些怀疑的。总觉得 AI 生成的代码要么质量不高，要么不符合鸿蒙的规范。但实际体验下来，我发现自己的担心是多余的。

Cursor 不仅生成的代码结构清晰，还能通过 DevEco MCP Toolbox 进行专业级的检查。整个过程就像和一个懂鸿蒙开发的搭档一起工作，我提出想法，它负责实现，我负责审核和优化。这种协作模式，让我对 AI 编程工具的未来充满期待。

如果你也想试试用 Cursor 开发鸿蒙应用，我的建议是：不要害怕出错。AI 生成的第一版代码可能不完美，但通过不断的对话和调整，你会逐渐掌握如何与 AI 高效协作。记住，工具的价值在于放大你的能力，而不是替代你的思考。