经过了一个月的高强度开发，我的首款原生鸿蒙聊天App应用开发完成了。

HarmonyOS-Chat是一个展示如何在纯血鸿蒙OS Next5.0 API12上使用ArkUI和ArkTS开发聊天应用的实例。提供了丰富的聊天UI界面，对于开发者来说，这是一个很好的学习和进阶参考资源。

HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序，模仿了微信的界面和功能，提供了包括聊天、通讯录、我、朋友圈等模块。 

 

 实现了下拉刷新、长按菜单、朋友圈等功能。

项目框架结构

HarmonyOS-Chat项目的框架结构是基于DevEco Studio 5.0.3.906编码工具构建的。项目中所有的顶部标题导航栏都是自定义封装的ArkUI组件实现的。

路由配置JSON

 鸿蒙os顶部自定义导航栏

所有顶部标题导航栏均是基于ArkUi自定义组件实现功能效果。

 对于如何实现arkui自定义导航组件，大家可以去看看下面这篇分享文章。

HarmonyOS NEXT 5.0自定义增强版导航栏组件|鸿蒙ArkUI自定义标题栏

https://www.cnblogs.com/xiaoyan2017/p/18517517

 harmony-chat聊天模板

// 聊天模板 Q：282310962

Stack() {
  /**
   * 聊天主体(消息区/底部操作区)
   */
  Column() {
    /* 导航条 */
    HMNavBar({
      title: 'HarmonyOS Next 5.0',
      bgLinearGradient: { angle: 135, colors: [['#cc07c160', 0.2], ['#cc0a59f7', 1]] },
      fontColor: '#fff',
      actions: [
        {
          icon: $r('sys.symbol.more'),
          action: () => router.pushUrl({url: 'pages/views/chat/GroupInfo'})
        }
      ]
    })

    /* 渲染聊天消息 */
    Scroll(this.scroller) {
      Column({space: 15}) {
        ForEach(this.chatList, (item: ChatArray) => {
          // ...
        }, (item: ChatArray) => item.id)
      }
      // 倒叙显示
      .reverse(true)
      // .padding(15)
      .constraintSize({minHeight: '100%'})
      .width('100%')
    }
    // 聊天区翻转
    .rotate({angle: 180})
    .direction(Direction.Rtl)
    .padding(15)
    .width('100%')
    .layoutWeight(1)
    .scrollBar(BarState.On)
    .edgeEffect(EdgeEffect.Spring)
    .onScrollEdge((side: Edge) => {
      if(side === 0) {
        console.info('To the bottom edge')
      }else if(side === 2) {
        console.info('To the top edge')
      }
    })
    .onTouch(() => {
      this.handleChatAreaTouched()
    })

    /* 底部操作栏 */
    Row() {
      // ....
    }
    .width('100%')
    .backgroundColor('#f8f8f8')
  }
  .height('100%')
  .width('100%')
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

  /**
   * 录音主体(按住说话)
   */
  Column() {
    Stack({alignContent: Alignment.Bottom}) {
      // ...
    }
    .height('100%')
    .width('100%')
  }
  .visibility(this.voicePanelEnable ? Visibility.Visible : Visibility.None)
  .height('100%')
  .width('100%')
  .backgroundColor('#99000000')
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
.height('100%')
.width('100%')
.backgroundColor($r('sys.color.background_secondary'))
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

聊天UI界面底部操作栏。

/* 底部操作栏 */
Row() {
  Column() {
    // 输入框模块
    Row({space: 10}) {
      Row() {
        SymbolGlyph($r('sys.symbol.mic_circle')).fontSize(24)
          .visibility(this.voiceEnable ? Visibility.None : Visibility.Visible)
        SymbolGlyph($r('sys.symbol.keyboard_circle')).fontSize(24)
          .visibility(!this.voiceEnable ? Visibility.None : Visibility.Visible)
      }
      .onClick(() => {
        this.voiceEnable = !this.voiceEnable
        this.footBarEnable = false
      })
      Row() {
        // 编辑器
        RichEditor({controller: this.richEditorController}).backgroundColor('#fff').borderRadius(4).caretColor('#0a59f7')
          .visibility(this.voiceEnable ? Visibility.None : Visibility.Visible)
        // 按住说话
        // 通过item[key]取到值的时候会报错，Indexed access is not supported for fields
        // 解决办法Object(item)[key]
        Text(`${Object(this.voiceTypeMap)[this.voiceType]}`).backgroundColor('#fff').borderRadius(4).fontSize(15).height(34).width('100%').textAlign(TextAlign.Center)
          .visibility(!this.voiceEnable ? Visibility.None : Visibility.Visible)
          .onTouch((event: TouchEvent) => {
            if(event) {
              if(event.type === TouchType.Down) {
                this.voiceType = 1
                this.voicePanelEnable = true
              }
              if(event.type === TouchType.Move) {
                ...

                // 触摸判断
                if(pos.y >= panY) {
                  this.voiceType = 1 // 松开发送
                }else if(pos.y < panY && pos.x < panX) {
                  this.voiceType = 2 // 左滑取消发送
                }else if(pos.y < panY && pos.x >= panX) {
                  this.voiceType = 3 // 右滑语音转文字
                }
              }
              if(event.type === TouchType.Up || event.type === TouchType.Cancel) {
                switch (this.voiceType) {
                  ...
                }
                this.voiceType = 0
              }
            }
          })
      }
      .layoutWeight(1)
      SymbolGlyph($r('sys.symbol.capture_smiles')).fontSize(24)
        .onClick(() => {
          this.handleEmoChooseState(0)
        })
      SymbolGlyph($r('sys.symbol.plus')).fontSize(24)
        .onClick(() => {
          this.handleEmoChooseState(1)
        })
      SymbolGlyph($r('sys.symbol.paperplane')).fontSize(24).fontColor(['#0a59f7'])
        .onClick(() => {
          this.handleSubmit()
        })
    }
    .padding(10)
    .alignItems(VerticalAlign.Center)

    // 表情/选择模块
    Column() {
      if(this.footBarIndex == 0) {
        // 表情区域
        this.renderEmoWidget()
      }else {
        // 选择区域
        this.renderChooseWidget()
      }
    }
    .height(308)
    .width('100%')
    .visibility(this.footBarEnable ? Visibility.Visible : Visibility.None)
  }
}
.width('100%')
.backgroundColor('#f8f8f8')

 整个harmony-chat聊天app项目，涉及到的知识很多，今天就先分享到这里吧。

对于想要快速入门到进阶开发HarmonyOS应用的开发者，建议先阅读官方文档，然后再找一个实战项目案例进行练习。华为鸿蒙os开发官网提供了HarmonyOS开发设计规范和ArkUI方舟UI框架的相关资料，这些都是宝贵的开发资源。

end，感谢大家的阅读与支持！