HarmonyOS Next智能聊天助手开发实践

项目概述

HarmonyOS Next智能聊天助手是一款基于鸿蒙生态系统开发的现代化AI对话应用，采用ArkTS语言和鸿蒙原生组件开发。该应用实现了与AI模型进行文本对话的基本功能，包括消息发送、接收、历史记录保存以及设置管理等交互操作，同时为用户提供了简洁美观的用户界面，展示了HarmonyOS应用开发的典型特性和技术架构。

成果展示

• 源代码：公众号 知识浅谈 回复 智能聊天代码
• 视频演示：点击这里查看视频讲解教程

1. 首页
   
2. 聊天页面（左下方图片转圈加载）
   
3. 手动设置APIKey
   
4. 页面清空
   

技术栈详解

1. HarmonyOS Next开发环境

该项目基于HarmonyOS Next开发框架构建，使用DevEco Studio作为集成开发环境。HarmonyOS Next是华为自主研发的分布式操作系统，专为全场景智能设备提供统一的操作系统解决方案。相比传统移动应用开发，HarmonyOS具有高性能、高安全和良好的跨设备分布式能力等显著优势。

2. ArkTS声明式开发范式

项目代码采用ArkTS语言开发，这是一种基于TypeScript的声明式UI开发语言，专为HarmonyOS定制。主要特点包括：

• 基于组件的UI构建：通过@Component装饰器定义可复用UI组件
• 声明式编程：使用类似HTML的结构直接描述UI界面
• 状态管理：使用@State、@Link和@ObjectLink等装饰器管理组件状态
• 生命周期钩子：提供aboutToAppear、aboutToDisappear等生命周期方法

3. 网络请求与数据处理

应用核心功能基于鸿蒙网络管理框架实现，主要使用了：

import http from '@ohos.net.http';

这个框架提供了强大的网络通信能力：

• HTTP请求：支持创建标准HTTP请求，与AI服务进行通信
• 状态管理机制：通过事件监听处理不同网络状态
• 数据流处理：支持处理流式响应数据，实现实时消息接收
• 错误处理：提供完善的错误处理机制，增强应用稳定性

4. 组件化架构设计

项目采用清晰的组件化设计思路，主要分为：

• 入口组件：Index.ets作为应用入口页面
• 聊天页面：ChatPage.ets作为主要交互界面
• 功能组件：
  • ChatItem.ets：聊天消息气泡组件
  • InputBar.ets：消息输入组件
  • SettingsDialog.ets：设置对话框组件
• 服务层：ApiService.ets封装API调用逻辑
• 数据模型：ChatMessage.ets定义消息数据结构
• 工具类：DataUtils.ets提供数据存储功能

这种架构设计使代码结构清晰，功能模块化，便于维护和扩展。

核心功能实现剖析

1. 聊天界面实现与消息展示

// 聊天列表
List({ scroller: this.scroller }) {
  ForEach(this.messages, (message: ChatMessage) => {
    ListItem() {
      ChatItem({ message: message })
    }
    .width('100%')
  }, (message: ChatMessage) => message.id)
}
.width('100%')
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
.divider({ strokeWidth: 0 })
.scrollBar(BarState.Off)
.onScrollIndex((firstIndex: number, lastIndex: number) => {
  // 滚动到底部
  if (this.messages.length > 0 && lastIndex === this.messages.length - 1) {
    this.scroller.scrollToIndex(this.messages.length - 1);
  }
})

这段代码展示了聊天界面的核心实现，通过List组件高效展示消息列表，实现了消息气泡的灵活布局和自动滚动功能。

2. 消息处理与格式化

// 处理文本格式，移除markdown标记
private formatText(text: string): string {
  if (!text) return '';
  
  // 移除markdown标记
  let formatted = text;
  
  // 处理特殊格式
  formatted = formatted.replace(/^#{1,3}\s+(\d+\.\s*)\*\*\s*\(~~(.+?)~~\)\s*\*\*/gm, '$1$2');
  
  // 处理编号标题格式
  formatted = formatted.replace(/^#{1,3}\s+(\d+\.\s*)\*\*(.+?)\*\*/gm, '$1$2');
  
  // 移除标题标记
  formatted = formatted.replace(/^#{1,3}\s+(.+)$/gm, '$1');
  
  // 移除强调标记
  formatted = formatted.replace(/\*\*(.+?)\*\*/g, '$1');
  formatted = formatted.replace(/\*(.+?)\*/g, '$1');
  
  // 处理其他格式...
  
  return formatted;
}

这段代码展示了消息文本格式化处理的核心实现，通过正则表达式处理AI返回的Markdown格式文本，使其在聊天界面中正确显示。

3. API调用与网络请求

public sendChatRequest(messages: ChatHistory[]): Promise<string> {
  if (!this.apiKey) {
    throw new Error('API密钥未设置，请在设置中配置API密钥')
  }

  try {
    const httpRequest = http.createHttp()
    const requestData: RequestData = {
      model: 'deepseek-chat',
      messages: messages,
      temperature: 0.7,
      max_tokens: 2000
    }

    const response = await httpRequest.request(
      this.apiUrl,
      {
        method: http.RequestMethod.POST,
        header: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${this.apiKey}`
        },
        extraData: JSON.stringify(requestData),
        readTimeout: 60000,
        connectTimeout: 60000
      }
    )

    if (response.responseCode === 200) {
      const responseData = JSON.parse(response.result as string) as ApiResponse
      return responseData.choices[0].message.content
    } else {
      throw new Error(`API请求失败，状态码: ${response.responseCode}`)
    }
  } catch (error) {
    console.error('API请求错误:', error)
    throw new Error(`API请求错误: ${error instanceof Error ? error.message : String(error)}`)
  }
}

这段代码展示了API调用的核心实现，通过HTTP请求与AI服务通信，发送用户消息并接收AI回复。

亮点特性

1. 资源管理与优化

应用采用了鸿蒙的资源管理机制，将颜色、文本等配置集中管理，便于应用主题和国际化处理。同时，通过滑动列表优化和布局简化提升了应用性能。

2. 错误处理与用户体验

代码中包含完善的错误处理机制，特别是对网络请求错误的监听和处理，通过友好的提示和UI状态反馈提升用户体验。

3. 数据持久化

public async saveChatHistory(context: common.UIAbilityContext, messages: ChatMessage[]): Promise<void> {
  try {
    const preferences = await this.getPreferences(context);
    await preferences.put(DataUtils.CHAT_HISTORY, JSON.stringify(messages));
    await preferences.flush();
  } catch (error) {
    console.error('保存聊天历史失败:', error);
  }
}

应用实现了完整的数据持久化功能，使用preferences API保存聊天历史和用户设置，确保用户数据不会丢失。

技术挑战与解决方案

1. 消息气泡布局适配

挑战：确保消息气泡能够根据文本内容自适应调整大小，同时保持良好的对齐效果。

解决方案：

• 使用Row和Column嵌套布局，确保气泡背景与文本内容完美贴合
• 通过width(‘auto’)和constraintSize属性控制气泡大小和最大宽度
• 使用justifyContent确保用户和AI消息分别靠左靠右对齐

2. Markdown文本处理

挑战：AI返回的文本包含Markdown格式，需要在聊天界面中正确显示。

解决方案：

• 实现formatText方法，使用正则表达式处理各种Markdown语法
• 针对常见的标题、强调、代码块等格式进行处理
• 保留URL但去除Markdown链接格式，提升可读性

3. 网络请求错误处理

挑战：网络请求可能因各种原因失败，需要提供友好的错误处理机制。

解决方案：

• 使用try-catch包装网络请求，捕获可能的异常
• 针对不同错误类型提供详细的错误信息
• 在UI层面通过提示框和状态更新向用户反馈错误

总结

HarmonyOS Next智能聊天助手项目展示了鸿蒙应用开发的典型流程和技术特点。通过ArkTS声明式编程、组件化架构设计、网络请求框架和现代UI设计，实现了功能完善、用户体验良好的AI对话应用。项目结构清晰，代码组织合理，包含了鸿蒙应用开发的核心要素，为开发者提供了很好的学习参考。

随着HarmonyOS生态的不断发展，这类应用将有更多拓展空间，如支持语音输入、多模态交互、分布式能力等创新功能，充分发挥鸿蒙系统的独特优势。