历经一个多月潜心研发，重磅原创新作原生鸿蒙harmonyos-chat聊天室项目完成了
HarmonyOS-Chat基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序，类似微信的UI界面和功能，提供了包括聊天、通讯录、我、朋友圈等模块。
ArkUI和ArkTS
ArkUI是华为鸿蒙操作系统提供的UI框架，它允许开发者创建丰富的用户界面。ArkTS则是鸿蒙操作系统的一种脚本语言，类似于JavaScript，用于编写ArkUI的应用程序逻辑。
arkui实现了下拉刷新、长按菜单，朋友圈等功能。
项目结构目录
HarmonyOS-Chat项目的框架结构是基于DevEco Studio 5.0.3.906编码工具构建的。
页面json文件。
harmonyos自定义导航条组件
支持如下参数配置：
@Component export struct HMNavBar { // 是否隐藏左侧的返回键 @Prop hideBackButton: boolean // 标题(支持字符串|自定义组件) @BuilderParam title: ResourceStr | CustomBuilder = BuilderFunction // 副标题 @BuilderParam subtitle: ResourceStr | CustomBuilder = BuilderFunction // 返回键图标 @Prop backButtonIcon: Resource | undefined = $r('sys.symbol.chevron_left') // 返回键标题 @Prop backButtonTitle: ResourceStr // 背景色 @Prop bgColor: ResourceColor = $r('sys.color.background_primary') // 渐变背景色 @Prop bgLinearGradient: LinearGradient // 图片背景 @Prop bgImage: ResourceStr | PixelMap // 标题颜色 @Prop fontColor: ResourceColor // 标题是否居中 @Prop centerTitle: boolean // 右侧按钮区域 @BuilderParam actions: Array<ActionMenuItem> | CustomBuilder = BuilderFunction // 导航条高度 @Prop navbarHeight: number = 56 // ... }
调用方式：
HMNavBar({ backButtonIcon: $r('sys.symbol.arrow_left'), title: '鸿蒙自定义导航栏', subtitle: 'HarmonyOS Next 5.0自定义导航栏', })
// 自定义渐变背景、背景图片、右侧操作区 HMNavBar({ hideBackButton: true, title: 'HarmonyOS', subtitle: 'harmonyos next 5.0 api 12', bgLinearGradient: { angle: 135, colors: [['#42d392 ',0.2], ['#647eff',1]] }, // bgImage: 'pages/assets/nav_bg.png', // bgImage: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/1025-pc-banner.jpeg', fontColor: '#fff', actions: [ { icon: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yuanfuwuicon.png', action: () => promptAction.showToast({ message: "show toast index 1" }) }, { icon: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0620logo4.png', action: () => promptAction.showToast({ message: "show toast index 2" }) }, { icon: $r('sys.symbol.person_crop_circle_fill_1'), action: () => promptAction.showToast({ message: "show toast index 3" }) } ], navbarHeight: 70 })
鸿蒙arkui实现登录/倒计时验证
/** * 登录模板 * @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() }) }
arkui实现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 = true this.codeText = `获取验证码(${this.time--})` }else { clearInterval(timer) this.codeText = '获取验证码' this.time = 5 this.disabled = false } }, 1000) } }
鸿蒙arkui实现下拉刷新/长按菜单
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%') }
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: () => {} } ])
整个项目所涉及知识点非常多，希望以上分享对大家有些帮助~
