纯血鸿蒙OS Next5.0 api12聊天实例|harmony-chat仿微信|ArkUI聊天app

置顶 已于 2024-12-08 09:08:19 修改
阅读量2.1k 收藏 20
点赞数 57
分类专栏： HarmonyOS Next开发 harmonyos ArkUI 文章标签： harmonyos 鸿蒙 harmonyos-chat harmony-wechat harmony仿微信 鸿蒙app聊天 鸿蒙Next5聊天
于 2024-11-19 15:15:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanxinyun1990/article/details/143883782
版权

最新重磅原创鸿蒙版Next5 API12仿微信app界面聊天室|arkts朋友圈

基于HarmonyOS NEXT5.0实战仿微信界面聊天App程序HarmonyWeChat。实现编辑器光标处输入文字+emo表情图片、gif动图、图片预览、红包、语音/位置UI、长按语音操作面板等功能。

在这里插入图片描述
harmony-chat聊天app包含了聊天、通讯录、我、朋友圈等模块。

在这里插入图片描述

版本框架

  • DevEco Studio 5.0.0 Release
    构建版本：5.0.3.906
  • HarmonyOS 5.0.0 Release SDK，基于OpenHarmony SDK Ohos_sdk_public 5.0.0.71 (API Version 12 Release)
  • commandline-tools-windows-x64-5.0.3.906

在这里插入图片描述
在这里插入图片描述
harmonyos arkui自定义弹框、实现微信朋友圈功能。

在这里插入图片描述
在这里插入图片描述

项目结构目录

使用DevEco Studio 5.0.3.906编辑器搭建聊天app框架。

在这里插入图片描述
在这里插入图片描述

HarmonyOS-Chat聊天项目已经更新到我的原创作品集，欢迎下载使用。
HarmonyOS Next5.0 API12 arkts+arkui仿微信app聊天

在这里插入图片描述

入口页面index.ets

在这里插入图片描述
在这里插入图片描述

// 自定义页面
@Builder customPage() {
  if(this.pageIndex === 0) {
    IndexPage()
  }else if(this.pageIndex === 1) {
    FriendPage()
  }else if(this.pageIndex === 2) {
    MyPage()
  }
}

build() {
  Navigation() {
    this.customPage()
  }
  .toolbarConfiguration(this.customToolBar)
  .height('100%')
  .width('100%')
  .backgroundColor($r('sys.color.background_secondary'))
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}

在这里插入图片描述

// 自定义底部菜单栏
@Builder customToolBar() {
  Row() {
    Row() {
      Badge({
        count: 8,
        style: {},
        position: BadgePosition.RightTop
      }) {
        Column({space: 2}) {
          SymbolGlyph($r('sys.symbol.ellipsis_message_fill'))
          Text('聊天').fontSize(12)
        }
      }
    }
    .layoutWeight(1)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.pageIndex = 0
    })

    Row() {
      Column({space: 2}) {
        SymbolGlyph($r('sys.symbol.person_2'))
        Text('通讯录').fontSize(12)
      }
    }
    .layoutWeight(1)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.pageIndex = 1
    })

    Row() {
      Badge({
        value: '',
        style: { badgeSize: 8, badgeColor: '#fa2a2d' }
      }) {
        Column({space: 2}) {
          SymbolGlyph($r('sys.symbol.person_crop_circle_fill_1'))
          Text('我').fontSize(12)
        }
      }
    }
    .layoutWeight(1)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.pageIndex = 2
    })
  }
  .height(56)
  .width('100%')
  .backgroundColor($r('sys.color.background_secondary'))
  .borderWidth({top: 1})
  .borderColor($r('sys.color.background_tertiary'))
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

鸿蒙os arkts自定义顶部标题栏

在这里插入图片描述
HMNavBar组件支持自定义返回键、标题/副标题、标题居中、背景色/背景图片/背景渐变色、标题颜色、搜索、右侧操作区等功能。

在这里插入图片描述
之前有分享一篇文章，感兴趣的可以去看看。
https://blog.csdn.net/yanxinyun1990/article/details/143397550

在这里插入图片描述

harmonyos实现验证码倒计时

在这里插入图片描述

Stack({alignContent: Alignment.End}) {
  TextInput({placeholder: '验证码'})
    .onChange((value) => {
      this.code = value
    })
  Button(`${this.codeText}`).enabled(!this.disabled).controlSize(ControlSize.SMALL).margin({right: 5})
    .onClick(() => {
      this.handleVCode()
    })
}

// 验证码参数
@State codeText: string = '获取验证码'
@State disabled: boolean = false
@State time: number = 60

// 获取验证码
handleVCode() {
  if(this.tel === '') {
    promptAction.showToast({ message: '请输入手机号' })
  }else if(!checkMobile(this.tel)) {
    promptAction.showToast({ message: '手机号格式错误' })
  }else {
    const timer = setInterval(() => {
      if(this.time > 0) {
        this.disabled = true
        this.codeText = `获取验证码(${this.time--})`
      }else {
        clearInterval(timer)
        this.codeText = '获取验证码'
        this.time = 5
        this.disabled = false
      }
    }, 1000)
  }
}

鸿蒙next实现下拉刷新/自定义弹框

在这里插入图片描述
下拉刷新逻辑

Refresh({
  refreshing: $$this.isRefreshing,
  builder: this.customRefreshTips
}) {
  List() {
    ForEach(this.queryData, (item: RecordArray) => {
      ListItem() {
        // ...
      }
      .stateStyles({pressed: this.pressedStyles, normal: this.normalStyles})
      .bindContextMenu(this.customCtxMenu, ResponseType.LongPress)
      .onClick(() => {
        // ...
      })
    }, (item: RecordArray) => item.cid.toString())
  }
  .height('100%')
  .width('100%')
  .backgroundColor('#fff')
  .divider({ strokeWidth: 1, color: '#f5f5f5', startMargin: 70, endMargin: 0 })
  .scrollBar(BarState.Off)
}
.pullToRefresh(true)
.refreshOffset(64)
// 当前刷新状态变更时触发回调
.onStateChange((refreshStatus: RefreshStatus) => {
  console.info('Refresh onStatueChange state is ' + refreshStatus)
  this.refreshStatus = refreshStatus
})
// 进入刷新状态时触发回调
.onRefreshing(() => {
  console.log('onRefreshing...')
  setTimeout(() => {
    this.isRefreshing = false
  }, 2000)
})

@State isRefreshing: boolean = false
@State refreshStatus: number = 1

// 自定义刷新tips
@Builder customRefreshTips() {
  Stack() {
    Row() {
      if(this.refreshStatus == 1) {
        SymbolGlyph($r('sys.symbol.arrow_down')).fontSize(24)
      }else if(this.refreshStatus == 2) {
        SymbolGlyph($r('sys.symbol.arrow_up')).fontSize(24)
      }else if(this.refreshStatus == 3) {
        LoadingProgress().height(24)
      }else if(this.refreshStatus == 4) {
        SymbolGlyph($r('sys.symbol.checkmark')).fontSize(24)
      }
      Text(`${
        this.refreshStatus == 1 ? '下拉刷新' :
          this.refreshStatus == 2 ? '释放更新' :
            this.refreshStatus == 3 ? '加载中...' :
              this.refreshStatus == 4 ? '完成' : ''
      }`).fontSize(16).margin({left:10})
    }
    .alignItems(VerticalAlign.Center)
  }
  .align(Alignment.Center)
  .clip(true)
  .constraintSize({minHeight:32})
  .width('100%')
}

长按菜单

在这里插入图片描述
.bindContextMenu(this.customCtxMenu, ResponseType.LongPress)

// 自定义长按右键菜单
@Builder customCtxMenu() {
  Menu() {
    MenuItem({
      content: '标为已读'
    })
    MenuItem({
      content: '置顶该聊天'
    })
    MenuItem({
      content: '不显示该聊天'
    })
    MenuItem({
      content: '删除'
    })
  }
}

下拉菜单

在这里插入图片描述
.bindMenu([ ... ])

Image($r('app.media.plus')).height(24).width(24)
  .bindMenu([
    {
      icon: $r('app.media.message_on_message'),
      value:'发起群聊',
      action: () => {}
    },
    {
      icon: $r('app.media.person_badge_plus'),
      value:'添加朋友',
      action: () => router.pushUrl({url: 'pages/views/friends/AddFriend'})
    },
    {
      icon: $r('app.media.line_viewfinder'),
      value:'扫一扫',
      action: () => {}
    },
    {
      icon: $r('app.media.touched'),
      value:'收付款',
      action: () => {}
    }
  ])

鸿蒙os自定义弹窗组件

在这里插入图片描述
在这里插入图片描述

// 标题(支持字符串|自定义组件)
@BuilderParam title: ResourceStr | CustomBuilder = BuilderFunction
// 内容(字符串或无状态组件内容)
@BuilderParam message: ResourceStr | CustomBuilder = BuilderFunction
// 响应式组件内容(自定义@Builder组件是@State动态内容)
@BuilderParam content: () => void = BuilderFunction
// 弹窗类型（android | ios | actionSheet）
@Prop type: string
// 是否显示关闭图标
@Prop closable: boolean
// 关闭图标颜色
@Prop closeColor: ResourceColor
// 是否自定义内容
@Prop custom: boolean
// 自定义操作按钮
@BuilderParam buttons: Array<ActionItem> | CustomBuilder = BuilderFunction

// 自定义退出弹窗
logoutController: CustomDialogController = new CustomDialogController({
  builder: HMPopup({
    type: 'android',
    title: '提示',
    message: '确定要退出当前登录吗？',
    buttons: [
      {
        text: '取消',
        color: '#999'
      },
      {
        text: '退出',
        color: '#fa2a2d',
        action: () => {
          router.replaceUrl({url: 'pages/views/auth/Login'})
        }
      }
    ]
  }),
  maskColor: '#99000000',
  cornerRadius: 12,
  width: '75%'
})

harmonyos聊天模块

在这里插入图片描述
在这里插入图片描述聊天核心模板

// 聊天模板 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])

聊天消息区，进入页面滚动到聊天底部，采用翻转倒叙方式实现。

/* 底部操作栏 */
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聊天项目涉及到的知识蛮多的，就暂分享到这里吧。

最后附上几个最新的实战项目，希望能帮助到大家。

在这里插入图片描述

基于harmonyos-arkTs开发的高仿微信app软件+源码+文档
07-06
harmonyos应用开发者高级 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档
鸿蒙开发实战终极案例--高仿微信App（附源码）
shudaoshanQAQ的博客
03-06 4067
高仿微信App（附源码）
HarmonyOS 5.0应用开发——仿微信聊天界面
高心星的专栏
12-09 566
闲暇之余开发了一个基于HarmonyOS5.0的仿微信聊天界面，里面主要用到了ArkUI的技术。
HarmonyOS实战开发-ChatUI、如何使用ArkTS编写HarmonyOS原生聊天UI框架。
2401_82546228的博客
05-07 672
ChatUI ，是一个ArkTS编写的HarmonyOS原生聊天UI框架，提供了开箱即用的聊天对话组件。
基于鸿蒙ArkUI的eTS范式开发的仿微信界面程序
yiyefangzhou24的专栏
05-17 1783
HMWeChat（HarmonyOS WeChat）是基于鸿蒙3.0的ArkUI开发的仿微信界面，使用的是eTS开发范式，基于鸿蒙SDK3.0（API Version 7）。
仿微信，使用鸿蒙ArkUI + ArkTS（API9）开发实现
maniuT的博客
03-23 1704
这里不得不吐槽一下鸿蒙，原来是想直接用自带的手势密码，但自带的问题有点多，两个密码的连接线途径的密码，会强制选择，因而，无法实现 02/20/06/60/… 这样的的密码顺序微信语音输入组件。
鸿蒙HarmonyOS从零实现类微信app效果第一篇，基础界面搭建
步行者
11-14 1378
最近鸿蒙HarmonyOS开发相关的消息非常的火，传言华为系手机后续将不再支持原生Android应用，所以对于原Android应用开发对应的Harmony版本也被一系列大厂提上了日程。作为一个名义上的移动端开发工程师（(⊙o⊙)…，最近写python多过Android），当人不让要来学习一波。本次的学习计划是实现一个类微信app效果，计划将常规的app效果都实现一下，以便后续如果需要写Harmony应用，可以直接上手。由于我本人有多年的开发经验和多种语言的开发经验，对于Javascript和。
基于最新鸿蒙OS开发的高仿微信APP
04-10
开发基于鸿蒙OS的高仿微信APP时，我们首先需要熟悉HarmonyOS的SDK和API。这些工具集提供了丰富的功能，如用户界面（UI）组件、网络通信、多媒体处理等，这些都是构建微信应用必不可少的部分。例如，我们可以使用UI...
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP
最新发布
12-19
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP源码
鸿蒙 HarmonyOS 高仿微信源码
11-22
鸿蒙 HarmonyOS 高仿微信源码， 包含各种自定义组件，各种tab, 各种列表，各种UI 组件。
基于鸿蒙api开发的仿微信的demo，帮助自己强制学习.zip
02-07
鸿蒙应用主要基于HarmonyOS Service和HarmonyOS App两种框架构建。Service框架用于开发后台服务，App框架则用于构建用户界面。开发者可以结合两者，实现丰富的功能和交互。 3. **开发工具与环境** 华为提供了...
Harmony-Next鸿蒙项目-鸿蒙实战开发-仿微信app- UI界面【源码在文末】
m0_63324772的博客
10-29 450
Harmony鸿蒙项目-鸿蒙实战开发-仿微信app- UI界面【源码在文末】
仿微信，使用鸿蒙ArkUI + ArkTS（API9）开发实现_arkui 微信对话
2401_84170623的博客
04-15 951
​ 这里又要吐槽下，bindContextMenu 的强制边框，还有鸿蒙现在对输入法开/关以及监听支持很差，虽然提供有接口，但貌似都无效。数据来源：本地写死 > 本地数据库 > 在线假数据（不存在的Doge）不仅仅是界面展示，将相关可执行交互实现。4.鸿蒙开发系统底层方向。1.项目开发必备面试题。5.鸿蒙音视频开发方向。UI 相关的都玩一遍。6.鸿蒙车载开发方向。7.鸿蒙南向开发方向。
基于HarmonyOS_NEXT的仿微信聊天原生应用开发笔记
wakeupwsy的博客
08-21 1994
涉及调用大模型接口实现机器人自动回复、音视频处理、发语音发相册图片、语音文字互转、相机拍照录像、发送位置、扫描二维码、生成二维码等一些能力。
鸿蒙3.0与ArkUI实现仿微信界面开发实战源码
weixin_42612804的博客
09-08 1781
本文还有配套的精品资源，点击获取 简介：鸿蒙操作系统3.0版引入了ArkUI开发框架，该框架基于eTS语言并利用鸿蒙SDK3.0进行高效用户界面开发。本项目提供源码，旨在仿制微信界面，通过实例学习如何构建响应式、组件化的用户界面。开发者需要理解ArkUI、鸿蒙SDK3.0、eTS语言，以及如何在HarmonyOS平台上使用这些技术。通过本项目，开发者可以掌握如何在鸿蒙系统上...
鸿蒙NEXT开发笔记（一）仿微信聊天App的登录页面
aqi00的博客
10-14 1209
仿微信聊天”的App项目在Android系统中有成熟的实战案例，具体参见《Android Studio开发实战：从零基础到App上线(第3版)》第13章的“13.5 实战项目：仿微信的私聊和群聊”，该项目的前后端通讯方式采用SocketIO实现，同时支持一对一的私聊和多对多的群聊，聊天内容也同时支持文本消息和图片消息，并且在多部Android真机上测试通过，具备很高的学习研究价值。
HarmonyOS/OpenHarmony应用开发ets仿微信界面
m0_59926833的博客
03-16 691
HarmonyOS/OpenHarmony仿微信界面
鸿蒙应用开发-仿微信聊天对话对话信息列表
夜雨飘零
01-19 875
编写的是对列表的操作，如添加数据、获取列表大小，通过操作这个对象，控制列表显示。仿微信聊天对话对话信息列表，显示发送文本和接收文本，参考文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoyan_2018

你的鼓励将是我持续作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值