## 项目简介
> [HarmonyOS-weChat](https://www.cnblogs.com/xiaoyan2017/p/18554593)是一款使用最新纯血鸿蒙`HarmonyOS Next5.0 API12`上使用`ArkUI`和`ArkTS`开发**聊天app应用**的实例。提供了包括聊天、通讯录、我、朋友圈等模块。
HarmonyOS-Chat模仿了微信的界面和功能，实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、长按语音面板等功能。
## 项目框架目录
HarmonyOS-Chat项目的框架结构是基于*DevEco Studio 5.0.3.906*编码工具构建。
## 项目路由页面json
## ArkUI自定义封装导航条
如何通过arkui实现一个多功能标题栏导航组件，感兴趣的可以去看看下面这篇分享文章。
[HarmonyOS NEXT 5.0自定义增强版导航栏组件|鸿蒙ArkUI自定义标题栏](https://www.cnblogs.com/xiaoyan2017/p/18517517)
## arkui实现登录功能|60s验证码倒计时
```
/**
* 登录模板
* @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])
}
}
```
实现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)
}
}
```
harmonyos-chat聊天室app项目涉及知识点很多，想要了解更多详细的介绍，可以去看看下面这篇分享文章。
[HarmonyOS-Chat聊天室|纯血鸿蒙Next5 api12聊天app|ArkUI仿微信](https://www.cnblogs.com/xiaoyan2017/p/18554593)
附上一个最新的Electron+vue3聊天Exe实例项目
[Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序](https://www.cnblogs.com/xiaoyan2017/p/18290962)
有疑问加站长微信联系（非本文作者））
