HarmonyOS-Chat聊天室|纯血鸿蒙Next5 api12聊天app|ArkUI仿微信

news/2024/11/19 12:21:58/文章来源:https://www.cnblogs.com/xiaoyan2017/p/18554593

自研原生鸿蒙NEXT5.0 API12 ArkTS仿微信app聊天模板HarmonyOSChat。

harmony-wechat原创重磅实战纯血鸿蒙OS ArkUI+ArkTs仿微信App聊天实例。包括聊天、通讯录、我、朋友圈等模块，实现类似微信消息UI布局、编辑器光标处输入文字+emo表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。

版本信息

DevEco Studio 5.0.3.906
HarmonyOS 5.0.0 API12 Release SDK
commandline-tools-windows-x64-5.0.3.906

纯血鸿蒙OS元年已来，华为大力推广自主研发的全场景分布操作系统HarmonyOS，赶快加入鸿蒙原生应用开发，未来可期！

基于鸿蒙os ArkTs 和 ArkUI 实现下拉刷新、右键长按/下拉菜单、自定义弹窗、朋友圈等功能。

项目框架结构

基于最新版 DevEco Studio 5.0.3.906 编码工具构建鸿蒙app聊天项目模板。

https://developer.huawei.com/consumer/cn/deveco-studio/

HarmonyOS-Chat聊天app项目已经发布到我的原创作品集，有需要的可以去拍哈~

https://gf.bilibili.com/item/detail/1107424011

如果大家想快速的入门到进阶开发，先把官方文档撸一遍，然后找个实战项目案例练练手。

华为鸿蒙os开发官网
https://developer.huawei.com/consumer/cn/
HarmonyOS开发设计规范
https://developer.huawei.com/consumer/cn/design/
ArkUI方舟UI框架
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/arkui-declarative-comp-V5

路由页面JSON文件

HarmonyOS ArkUI自定义顶部导航条

项目中所有顶部标题导航栏均是自定义封装ArkUI组件实现功能效果。之前有写过一篇专门的分享介绍，感兴趣的可以去看看下面这篇文章。

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

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

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'))
}

HarmonyOS实现登录/注册/倒计时验证

登录模板

/*** 登录模板* @author andy*/import { router, promptAction } from '@kit.ArkUI'@Entry
@Component
struct Login {@State name: string = ''@State pwd: string = ''// 提交
  handleSubmit() {if(this.name === '' || this.pwd === '') {promptAction.showToast({ message: '账号或密码不能为空' })}else {// 登录接口逻辑...
      promptAction.showToast({ message: '登录成功' })setTimeout(() => {router.replaceUrl({ url: 'pages/Index' })}, 2000)}}build() {Column() {Column({space: 10}) {Image('pages/assets/images/logo.png').height(50).width(50)Text('HarmonyOS-Chat').fontSize(18).fontColor('#0a59f7')}.margin({top: 50})Column({space: 15}) {TextInput({placeholder: '请输入账号'}).onChange((value) => {this.name = value})TextInput({placeholder: '请输入密码'}).type(InputType.Password).onChange((value) => {this.pwd = value})Button('登录').height(45).width('100%').linearGradient({ angle: 135, colors: [['#0a59f7', 0.1], ['#07c160', 1]] }).onClick(() => {this.handleSubmit()})}.margin({top: 30}).width('80%')Row({space: 15}) {Text('忘记密码').fontSize(14).opacity(0.5)Text('注册账号').fontSize(14).opacity(0.5).onClick(() => {router.pushUrl({url: 'pages/views/auth/Register'})})}.margin({top: 20})}.height('100%').width('100%').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])}
}

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()})
}

鸿蒙arkts实现60s倒计时验证码

// 验证码参数
@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 = truethis.codeText = `获取验证码(${this.time--})`}else {clearInterval(timer)this.codeText = '获取验证码'this.time = 5this.disabled = false}}, 1000)}
}

鸿蒙os下拉刷新/九宫格图像/长按菜单

  • 下拉刷新组件
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: () => {}}])

HarmonyOS arkui自定义dialog弹框组件

  

  

支持参数配置如下：

// 标题(支持字符串|自定义组件)
@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%'
})
// 自定义公众号弹窗
@Builder customQRContent() {Column({space: 15}) {Image('pages/assets/images/qrcode.png').height(150).objectFit(ImageFit.Contain)Text('扫一扫，加我公众号').fontSize(14).opacity(.5)}
}
qrController: CustomDialogController = new CustomDialogController({builder: HMPopup({message: this.customQRContent,closable: true}),cornerRadius: 12,width: '70%'
})

好了，以上就是harmonyos next实战开发聊天app的一些知识分享，希望对大家有所帮助~

整个项目涉及到的知识点非常多，限于篇幅就先分享到这里。感谢大家的阅读与支持。

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

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

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

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/836744.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Apache Dolphinscheduler数据质量源码分析

Apache Dolphinscheduler数据质量源码分析

Apache DolphinScheduler 是一个分布式、易扩展的可视化数据工作流任务调度系统，广泛应用于数据调度和处理领域。 在大规模数据工程项目中，数据质量的管理至关重要，而 DolphinScheduler 也提供了数据质量检查的计算能力。本文将对 Apache DolphinScheduler 的数据质量模块进…
阅读更多...
通过域名访问内网服务器

通过域名访问内网服务器

cloudflare优选ip访问家用服务器 前言 由于一直有使用markdown写笔记的需求，但是每次处理图片的时候总是很头疼。突然，我瞥见了还在角落里面吃灰小主机，因此萌生了废物利用想法，搭建一个外网可访问的图床。图床直接使用lsky-pro就可以，关键还是在外网访问上。 于是在网上看…
阅读更多...
【算法】KMP 与 Z 函数

【算法】KMP 与 Z 函数

1. KMP 1.1 算法简介 可以做到线性匹配的快速匹配字符串的算法，并可以维护字符串最长公共前后缀，扩展出计算字符串周期。 在 OI 界 KMP 算法是字符串板块中很经典的算法，可以扩展出很多巧妙的解题技巧。 1.2 算法流程 1.2.1 字符串匹配 考虑 \(O(n^2)\) 暴力的匹配，瓶颈在于…
阅读更多...
apifox使用小记

apifox使用小记

1.copy as cURL(cmd)之后在apifox里直接import cURL 2.调用时发生301错误 通常情况下是因为有session校验存在（用户校验）。解决方案： F12里将cookie里的session取到，在apifox里全局配置 这里踩了一个坑 第一次我是import了一个get请求，发送后发生301，所以我去设置了co…
阅读更多...
毕业实习总结报告

毕业实习总结报告

毕业实习总结报告这既是毕业实习要求的总结报告，也是我对AutoSAR的一点理解，更是个人对未来生活的一点思考。我不希望把这份报告草草水过，而是希望把现在的感受记录下来，给以后的自己看一看，好记性不如记下来。涉及到工作细节和隐私的部分不在此展示了。时间像一头野驴呀，…
阅读更多...
IDEA 2024 最新激活码，激活至2099（附有效idea激活码+激活工具）

IDEA 2024 最新激活码，激活至2099（附有效idea激活码+激活工具）

IDEA 2024最新激活码，激活至2099（附有效idea激活码+激活工具）若提示We could not validate your license ff83b7bd51f5460ca43aabd7a96863a0.信息，idea激活时提示激活码失效解决方法： IDEA 2024 解决 We could not validate your license ff83b7bd51f5460ca43aabd7a96863a…
阅读更多...
大学物理上册

大学物理上册

质点作曲线运动时，质点在某一点的速度方向就是沿该点曲线的切线方向。
阅读更多...
KingbaseES V8R6备份恢复案例之---sys_backup.sh init错误

KingbaseES V8R6备份恢复案例之---sys_backup.sh init错误

KingbaseES 、sys_rman案例说明： KingbaseES V8R6数据库单实例环境，执行sys_backup.sh init时，出现“ repo_ip [127.0.0.1] must be located in local”错误，初始化失败。 适用版本：KingbaseES V8R6 一、问题现象 如下所示，执行sys_backup.sh init时出现以下故障：二、问…
阅读更多...
鱼厂实习，光速转正了！

鱼厂实习，光速转正了！

从最初那一份懵懂，到如今独立承担项目，回想这一路在鱼厂的成长，每一步都像是在重塑一个新的自己。今天要分享的这篇文章，比较特殊，是我们团队一位同事写的。主要分享了他从 0 开始学编程，再到加入鱼厂光速转正的故事。长达 6000 多字，诉说了自己四年多的经历，满满的真情…
阅读更多...
深育大讲堂 | 洞见容器存储技术原理和市场应用趋势

深育大讲堂 | 洞见容器存储技术原理和市场应用趋势

深育大讲堂 | 洞见容器存储技术原理和市场应用趋势 4月12日，【深育大讲堂】系列直播活动第一讲“从容器存储讲起”圆满结束。深信服产教中心资深讲师丁运管、深信服四川省云业务总监薛悟团分别就多场景下的容器存储技术以及容器技术的应用与最佳实践进行深入剖析；并聚焦前沿…
阅读更多...
apipost学习

apipost学习

开发团队的痛点： 1. 任何一个团队都是由前端、后端、测试三个TEAM组成的。 2. 产品经理确定需求和过评审后，前后端开发人员一起开会研讨定接口。并先由一个开发人员负责用Swagger定义API文档； 3. 后端会参照API 文档开发接口，并进行调试，用Postman里再跑一遍。 4. 接口…
阅读更多...
你的团队如何在项目管理中实现智能化协作？

你的团队如何在项目管理中实现智能化协作？

随着科技的快速发展，现代社会的各个领域都进入了智能化与高效化的时代。在这个背景下，项目管理软件作为提升工作效率、协作能力和组织规范性的重要工具，逐渐融入了更多跨界元素。从与人工智能（AI）的结合，到与创业者的合作，再到时间管理的深度挖掘，项目管理软件已经不再…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023