手撸一个鸿蒙版的抖音短视频应用

---

📚往期学习笔录📝：

📝 鸿蒙（HarmonyOS）北向开发知识点记录~
📝 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
📝 记录一场鸿蒙开发岗位面试经历~
📝 持续更新中……

---

前段时间看到一篇文章，但是没有源码，是一个仿写抖音的文章，最近也在看这块，顺便写个简单的短视频小应用。

技术点拆分

1、http请求数据；

2、measure计算文本宽度；

3、video播放视频；

4、onTouch上滑/下拉切换视频；

5、List实现滚动加载；

效果展示

http请求数据

通过对@ohos.net.http进行二次封装，进行数据请求。

1、封装requestHttp；

import http from '@ohos.net.http';

// 1、创建RequestOption.ets 配置类
export interface RequestOptions {
  url?: string;
  method?: RequestMethod; // default is GET
  queryParams ?: Record<string, string>;
  extraData?: string | Object | ArrayBuffer;
  header?: Object; // default is 'content-type': 'application/json'
}

export enum RequestMethod {
  OPTIONS = "OPTIONS",
  GET = "GET",
  HEAD = "HEAD",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE",
  TRACE = "TRACE",
  CONNECT = "CONNECT"
}

/**
 * Http请求器
 */
export class HttpCore {
  /**
   * 发送请求
   * @param requestOption
   * @returns Promise
   */
  request<T>(requestOption: RequestOptions): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      this.sendRequest(requestOption)
        .then((response) => {
          if (typeof response.result !== 'string') {
            reject(new Error('Invalid data type'));

          } else {
            let bean: T = JSON.parse(response.result);
            if (bean) {
              resolve(bean);
            } else {
              reject(new Error('Invalid data type,JSON to T failed'));
            }

          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  private sendRequest(requestOption: RequestOptions): Promise<http.HttpResponse> {
    // 每一个httpRequest对应一个HTTP请求任务，不可复用
    let httpRequest = http.createHttp();

    let resolveFunction, rejectFunction;
    const resultPromise = new Promise<http.HttpResponse>((resolve, reject) => {
      resolveFunction = resolve;
      rejectFunction = reject;
    });

    if (!this.isValidUrl(requestOption.url)) {
      return Promise.reject(new Error('url格式不合法.'));
    }

    let promise = httpRequest.request(this.appendQueryParams(requestOption.url, requestOption.queryParams), {
      method: requestOption.method,
      header: requestOption.header,
      extraData: requestOption.extraData, // 当使用POST请求时此字段用于传递内容
      expectDataType: http.HttpDataType.STRING // 可选，指定返回数据的类型
    });

    promise.then((response) => {
      console.info('Result:' + response.result);
      console.info('code:' + response.res