# 基于harmonyOS开发的仿抖音平台

**Repository Path**: wu-zhenbin666/harmonyOSTikTok

## Basic Information

- **Project Name**: 基于harmonyOS开发的仿抖音平台
- **Description**: 重写音视频播放器,那个过于简单
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-01-03
- **Last Updated**: 2025-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于harmonyOS开发的仿抖音平台

#### 介绍
重写音视频播放器,那个过于简单,这次一比一复刻抖音(部分ui没有配置click,等我后面优化)

（1）系统描述

本系统是一款基于移动端的社交和电商结合型APP，主要面向普通用户提供一体化的社交互动与购物体验。系统分为多个模块，包括登录注册模块、首页浏览模块、电商购物模块、消息互动模块和个人主页模块。以下是各模块的详细说明及新增功能的亮点描述：

（2）系统背景

该系统旨在满足用户日常社交、内容消费和电商购物的综合需求，融合了短视频、直播购物、用户社区等多种功能。在社交领域，用户可以通过点赞、评论、分享等方式进行互动；在电商领域，系统提供多种商品类别，用户可以直接浏览、下单。为了提升用户体验，我在原有功能的基础上增加了一些亮点功能，包括智能化推荐算法、个性化主页设置、快速验证登录以及动态社交互动分析。

（3）系统功能

登录注册模块

登录注册模块提供了两种登录方式：账号密码登录和手机号验证码登录。账号登录模块设计简洁，用户可以通过输入账号和密码快速登录；手机号登录模块则简化了注册流程，未注册用户输入手机号码并通过验证码即可完成自动注册并登录。此外，我新增了“密码可见性切换”功能和“快速注册协议勾选”提示，以提高用户使用的便捷性和安全性。


首页浏览模块

首页展示了系统的核心内容，用户可以浏览热门视频、热点新闻和精选内容。顶部菜单提供了多种分类选择，如“体验”“热点”“直播”等，用户可根据兴趣快速切换内容类型。我新增了“智能内容推荐”功能，通过分析用户的浏览和点赞历史，提供更贴近用户兴趣的内容推送。


电商购物模块

电商购物模块以简洁直观的商品展示为主，用户可以快速浏览商品类别、价格和折扣信息。新增了“直播精选”功能，用户可以直接进入直播间观看商品演示并下单。此外，我还设计了“购物消息提醒”功能，当商品有降价或补货时系统会自动通知用户。


消息互动模块

消息模块集成了私信和社交互动功能。顶部显示了用户的好友头像列表，方便快速选择联系人；下方展示了消息对话列表，包括昵称、最新消息内容和时间。我在此基础上增加了“互动分析”功能，能够显示用户互动频率最高的联系人，便于用户查看重要信息。


（4）亮点功能总结
	1、智能推荐算法：通过用户行为分析，实现内容和商品的个性化推荐。
	2、快速验证登录：手机号验证一键注册，提升登录效率。
	3、动态互动分析：统计用户互动频率，优化消息排序。
	4、个性化主页编辑：支持背景、标签自定义，增强用户的归属感。
	5、直播购物集成：无缝连接电商模块与直播内容，提升购物体验。

总体而言，该系统通过整合社交和电商功能，并在用户体验的细节上做出优化，提升了用户的参与度和满意度。

#### 软件架构
软件架构说明
基于arkts的移动端
基于Springboot的后端

#### 安装教程
移动端直接启动即可
后端提供两种部署方式:
1.简易服务端(静态资源全部放在服务器中)

地址:https://gitee.com/wu-zhenbin666/forkTiktok-backend


2.完整版服务端

地址:https://gitee.com/wu-zhenbin666/short-video-platform

这个跑起来有门槛,需要配置CDN和云源服务器(腾讯云),自行摸索


#### 项目关键技术

1. ArkUI跨平台开发框架

ArkUI 是基于 HarmonyOS 的开发框架，本项目通过 ArkUI 实现了界面的开发和逻辑交互。ArkUI 提供了丰富的 UI 组件库，以及灵活的状态管理机制，能够高效开发跨平台的应用界面。项目中使用了组件化编程思想，将页面和功能模块解耦，提升了代码复用性和维护性。

2. 组件化设计与模块化开发

项目通过组件化开发，将各个功能模块进行独立的封装，例如登录模块、分页模块、商场模块和消息模块等。每个模块之间通过数据绑定和路由进行交互，减少模块之间的耦合性。例如，登录模块通过 CustomDialogController 控制弹窗行为，而分页模块则使用了 TabsController 管理多标签页切换。

3. 动态数据绑定与状态管理

项目采用了 ArkUI 的 @State 和 @Builder 注解实现动态数据绑定，使得 UI 能够实时反映数据的变化。例如，分页模块通过动态绑定标签索引实现内容的自动切换，消息模块动态绑定用户对话数据并实时更新。此外，通过 AppStorage 进行全局状态管理，例如用户登录状态的存储和同步。

4. 路由管理

项目中使用了 router 进行路由管理，实现页面之间的跳转和参数传递。路由支持多种跳转方式，包括 pushUrl 和 replaceUrl 等，满足用户在不同场景下的页面导航需求。例如，用户在登录成功后可以通过路由跳转到首页，或从商场页面直接进入商品详情页。

5. 异步接口调用

为了实现功能的完整性和动态性，项目通过异步接口与后台通信。例如，登录模块调用 loginAPI 接口实现用户的登录认证，并将获取的 Token 存储到全局状态中。这种异步操作通过 async/await 实现，提升了代码的可读性和执行效率。

6. 自定义弹窗组件

项目实现了多个自定义弹窗功能，例如用户隐私政策弹窗。通过 CustomDialog 和 CustomDialogController，弹窗可以根据用户的交互动态调整显示内容和行为。例如，在用户点击“同意”按钮后，弹窗关闭并跳转到下一个页面。

7. 高级动画与动态效果

为提升用户体验，项目中引入了多个动画效果。例如，分页模块中的标签栏动态切换使用了动画属性 animation，实现平滑的视觉过渡；首页的旋转按钮通过 rotate 和 animation 实现动态旋转效果。此外，视频背景和滚动字幕的结合进一步丰富了用户体验。

8. 滚动视图与懒加载

商场页面和消息页面大量使用了滚动视图组件（Scroll 和 ForEach），以支持横向和纵向滚动。同时，商品列表和对话列表通过懒加载（Lazy Loading）技术，按需加载数据，提高页面加载速度和性能。

9. 响应式布局
项目通过灵活的布局组件（Flex 和 Column 等）实现了响应式设计，适配不同屏幕尺寸的设备。布局采用百分比宽高和动态边距配置，确保页面在各种分辨率下都能良好显示。例如，个人主页模块中的头像与个人信息布局比例采用动态调整策略。

#### 效果图展示
![输入图片说明](entry/src/main/resources/readmePic/img.png)
![输入图片说明](entry/src/main/resources/readmePic/img_1.png)
![输入图片说明](entry/src/main/resources/readmePic/img_2.png)
![输入图片说明](entry/src/main/resources/readmePic/img_3.png)
![输入图片说明](entry/src/main/resources/readmePic/img_4.png)
![输入图片说明](entry/src/main/resources/readmePic/img_5.png)
![输入图片说明](entry/src/main/resources/readmePic/img_6.png)
![输入图片说明](entry/src/main/resources/readmePic/img_7.png)
![输入图片说明](entry/src/main/resources/readmePic/img_8.png)
![输入图片说明](entry/src/main/resources/readmePic/img_9.png)
![输入图片说明](entry/src/main/resources/readmePic/img_10.png)
![输入图片说明](entry/src/main/resources/readmePic/img_11.png)
![输入图片说明](entry/src/main/resources/readmePic/img_12.png)
![输入图片说明](entry/src/main/resources/readmePic/img_13.png)
![输入图片说明](entry/src/main/resources/readmePic/img_14.png)
![输入图片说明](entry/src/main/resources/readmePic/img_15.png)
![输入图片说明](entry/src/main/resources/readmePic/img_16.png)