# PpsVideo

**Repository Path**: zjn0123/pps-video

## Basic Information

- **Project Name**: PpsVideo
- **Description**: 鸿蒙长视频一多项目练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-23
- **Last Updated**: 2025-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

```markdown
# 鸿蒙长视频应用"一多"开发实践指南

## 一、项目规划与UX设计阶段

### 1.1 需求分析与功能梳理
- **核心功能**：沉浸式视频播放、首页推荐、视频搜索、详情展示、评论互动、全屏播放
- **多设备适配目标**：手机、折叠屏、平板、2in1设备的一致性与差异性体验
- **痛点解决方案**：
  - 图片变形问题：使用`aspectRatio`属性保持比例
  - 布局动态调整：栅格断点系统与响应式布局
  - 折叠屏悬停态：特殊状态监听与布局重排

### 1.2 UX设计要点
- **响应式设计原则**：
  - 差异性：根据设备尺寸调整布局结构（如底部导航变侧边栏）
  - 一致性：核心交互逻辑（如播放控制）保持统一
  - 灵活性：栅格系统实现动态列数变化
  - 兼容性：适配不同屏幕比例与分辨率
- **关键设计方案**：
  - 首页沉浸式背景图：使用`backgroundImage`结合滑动监听改变透明度
  - 2in1设备Banner排版创新：4:4:3比例布局，`layoutWeight`实现占比分配
  - 长按预览交互：通过`LongPressGesture`获取组件坐标，动态定位弹窗

## 二、工程结构搭建

### 2.1 三层架构设计
```plaintext
├── commons                  // 公共能力层
│  ├── base/src/main/ets
│  │  ├── constants          // 常量定义
│  │  └── utils              // 工具类（窗口管理、媒体播放）
│  └── base/Index.ets         // 对外接口
├── features                 // 基础特性层（按页面划分）
│  ├── home                   // 首页
│  │  ├── src/main/ets/view   // 页面视图
│  │  ├── src/main/ets/viewmodel // 视图模型
│  │  └── src/main/resources  // 页面资源
│  ├── search                 // 搜索页
│  ├── videoDetail            // 详情页
│  └── videoPlayer            // 全屏播放页
└── products                 // 产品定制层（设备特定逻辑）
   ├── phone/src/main/ets
   │  ├── entryability       // 应用入口
   │  └── pages              // 设备特定页面适配
   └── phone/src/main/resources
```

### 2.2 工程创建步骤
1. **创建基础项目**：使用DevEco Studio创建HarmonyOS项目，选择ArkUI框架
2. **划分三层目录**：
    - 在`commons`中创建`base`模块，编写公共工具类
    - 在`features`中按页面创建模块（home、search等），每个模块生成HAR包
    - 在`products`中创建`phone`模块，处理设备特定逻辑
3. **配置依赖关系**：
    - `features`模块依赖`commons`模块
    - `products`模块依赖`features`模块
4. **断点系统初始化**：
    - 在`commons`中定义断点常量（如`BreakpointConstants`）
    - 实现窗口宽度监听函数`updateWidthBp()`，动态更新当前断点

## 三、页面开发实践

### 3.1 首页开发流程
#### 3.1.1 布局结构设计
1. **区域划分**：将首页分为8个功能区域（导航栏、Banner、推荐视频等）
2. **响应式实现**：
    - 底部/侧边页签：使用`Tabs`组件，通过`vertical`属性在lg断点切换为侧边导航
   ```typescript
   Tabs({
       barPosition: currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End
   })
   .vertical(currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG)
   ```
    - Banner图适配：`Swiper`组件结合`displayCount`和`aspectRatio`
   ```typescript
   Swiper() {
       // Banner内容
   }
   .displayCount(currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 1 : 2)
   .aspectRatio(new BreakpointType(...).getValue(currentWidthBreakpoint))
   ```
    - 推荐视频网格：`Grid`组件根据断点动态调整列数
   ```typescript
   Grid() {
       // 视频项
   }
   .columnsTemplate(currentWidthBreakpoint === 'sm' ? '1fr 1fr' : '1fr 1fr 1fr 1fr')
   ```

#### 3.1.2 沉浸式设计实现
1. **背景图覆盖导航栏**：
    - 使用`Stack`组件层级控制，设置`backgroundImage`覆盖顶部区域
    - 滑动时修改顶部导航栏背景色：
   ```typescript
   .backgroundColor(scrollHeight >= threshold ? $r('app.color.home_content_background') : Color.Transparent)
   ```

### 3.2 搜索页开发要点
1. **搜索框拉伸能力**：使用`layoutWeight`实现宽度自适应
2. **搜索发现列表**：`List`组件的`lanes`属性控制列数（sm/md为2列，lg为3列）
3. **智能提示交互**：实时监听输入框内容，动态更新提示列表

### 3.3 视频详情页关键技术
1. **侧边悬浮评论区**：`SideBarContainer`组件实现可拖拽侧边栏
   ```typescript
   SideBarContainer() {
       // 评论内容
   }
   .onAreaChange((newValue) => {
       // 根据侧边栏宽度动态调整图片尺寸
   })
   ```
2. **边看边评交互**：`Scroll`组件监听滑动，控制视频区域与评论区的动态缩放
   ```typescript
   .onScrollFrameBegin((offset) => {
       if (currentWidthBreakpoint === 'lg') {
           // 视频区域缩放逻辑
       } else {
           // 相关列表与视频区域的层级切换逻辑
       }
   })
   ```

### 3.4 全屏播放页适配
1. **窗口管理**：
    - 隐藏状态栏与导航栏：`setWindowSystemBarEnable(false)`
    - 折叠屏展开态不旋转：`setMainWindowOrientation(AUTO_ROTATION_RESTRICTED)`
2. **选集列表布局**：
    - sm断点右侧侧边栏（3:2比例）
    - md断点底部栏（1:1比例）
    - lg断点固定宽度侧边栏（360vp）

## 四、交互与功能开发

### 4.1 手势交互实现
1. **长按预览功能**：
    - 使用`LongPressGesture`获取组件坐标：
   ```typescript
   .gesture(
       LongPressGesture({ repeat: false })
       .onAction(() => {
           let componentInfo = componentUtils.getRectangleById(id);
           // 计算弹窗偏移量
           let dialogYOffset = componentInfo.windowOffset.y + ...;
           // 显示预览弹窗
       })
   )
   ```
2. **双指缩放功能**：
    - `PinchGesture`监听缩放事件，动态调整网格列数：
   ```typescript
   .gesture(
       PinchGesture({ fingers: 2 })
       .onActionUpdate((event) => {
           if (event.scale > 1 && currentWidthBreakpoint === 'md') {
               animateTo({
                   duration: 300,
                   () => { videoGridColumn = '3fr' }
               })
           }
       })
   )
   ```

### 4.2 折叠屏特殊处理
1. **悬停态检测**：
    - 通过`windowSizeChange`事件监听折叠屏状态：
   ```typescript
   onWindowSizeChange(windowSize) {
       if (windowSize.width / windowSize.height > 1.5 && windowSize.height < 600) {
           // 悬停态布局逻辑
       }
   }
   ```
2. **半折叠态适配**：
    - 调整视频区域与控制栏的比例，确保悬停时操作便捷

## 五、资源管理与优化

### 5.1 响应式资源组织
1. **按设备类型分类**：
    - 在`resources`下创建`media`目录，按断点存放不同尺寸图片：
        - `immersive_background_sm.png`（小屏）
        - `immersive_background_md.png`（中屏）
        - `immersive_background_lg.png`（大屏）
2. **动态资源引用**：
   ```typescript
   .backgroundImage(new BreakpointType(
       $r('app.media.immersive_background_sm'),
       $r('app.media.immersive_background_md'),
       $r('app.media.immersive_background_lg')
   ).getValue(currentWidthBreakpoint))
   ```

### 5.2 性能优化要点
1. **布局优化**：
    - 使用`LazyForEach`替代`ForEach`，实现列表项懒加载
    - 避免深层嵌套布局，优先使用`Grid`/`Stack`等扁平布局
2. **内存管理**：
    - 视频资源释放：在`onPageHide`中暂停播放并释放资源
    - 组件销毁时清除事件监听：`onPageDestroy`中移除`windowSizeChange`回调

## 六、多设备测试与适配

### 6.1 测试流程
1. **设备覆盖**：
    - 手机（竖屏/横屏）、折叠屏（折叠态/展开态/悬停态）
    - 平板（常规比例）、2in1设备（桌面模式）
2. **功能验证**：
    - 响应式布局：拖动窗口改变宽度，验证断点切换效果
    - 交互逻辑：测试长按、双指缩放、侧边栏拖拽等功能
    - 沉浸式体验：滑动首页验证背景图与导航栏的动态变化

### 6.2 常见适配问题解决方案
1. **图片变形**：确保所有图片容器设置`aspectRatio`
2. **坐标获取异常**：使用`componentUtils.getRectangleById`替代手动计算
3. **折叠屏悬停态布局错乱**：在`windowSizeChange`中添加延迟布局更新逻辑

## 七、项目集成与发布

### 7.1 多模块集成
1. **HAR包依赖**：
    - 在`build.gradle`中配置模块依赖：
   ```groovy
   dependencies {
       implementation project(':commons:base')
       implementation project(':features:home')
       // 其他模块依赖
   }
   ```
2. **入口配置**：
    - 在`products/phone/src/main/ets/entryability/EntryAbility.ets`中初始化窗口配置

### 7.2 发布前优化
1. **资源压缩**：使用DevEco Studio的资源压缩工具减小包体积
2. **性能测试**：
    - 使用Profiler工具分析布局渲染性能
    - 测试不同设备下的视频播放流畅度

通过以上步骤，可完整实现符合"一多"理念的长视频应用，确保在手机、折叠屏、平板和2in1设备上提供一致且优质的用户体验。开发过程中需重点关注响应式布局的断点逻辑、多设备交互的一致性，以及特殊设备形态（如折叠屏悬停态）的适配方案。
```