开源 Arkts 鸿蒙应用 开发（十七）通讯--http多文件下载

import { request } from '@kit.BasicServicesKit';
import { FileDownloadItem } from '../view/FileDownloadItem';


const NO_TASK: number = 0;

function downloadConfig(downloadUrl: string): request.agent.Config {
  const config: request.agent.Config = {
    action: request.agent.Action.DOWNLOAD,
    url: downloadUrl,
    overwrite: true,
    method: 'GET',
    saveas: './',
    mode: request.agent.Mode.BACKGROUND,
    gauge: true,
    retry: false
  };
  return config;
}

@Entry
@Component
struct MultipleFilesDownload {
  /**
   * enter the download urls
   */
  private downloadUrlArray: string[] = ["https://m.down.sandai.net/mobile/OfficialSite_MobileThunder1.apk"];
  @State downloadConfigArray: request.agent.Config[] = [];
  @State isStartAllDownload: boolean = false;
  @State downloadCount: number = 0;
  @State downloadFailCount: number = 0;

  aboutToAppear(): void {
    for (let i = 0; i < this.downloadUrlArray.length; i++) {
      const config: request.agent.Config = downloadConfig(this.downloadUrlArray[i]);
      this.downloadConfigArray.push(config);
    }
    this.downloadCount = this.downloadUrlArray.length;
  }

  build() {
    Column() {
      Row() {
        Text($r('app.string.multiple_files_download_transfer_list'))
          .fontWeight(FontWeight.Bold)
          .fontSize($r('app.integer.title_font_size'))
          .width('100%')
          .fontColor($r('app.color.text_color'))
      }
      .alignItems(VerticalAlign.Bottom)
      .width('91.1%')
      .height(112)

      Row() {
        Row() {
          Text($r('app.string.multiple_files_download_queue'))
            .fontSize($r('app.integer.multiple_files_download_text_font_size_fourteen'))
            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
        }.width($r('app.string.multiple_files_download_row_width'))

        Row() {
          Text(this.isStartAllDownload && this.downloadCount > NO_TASK ? $r('app.string.pause_all') :
          $r('app.string.start_all'))
            .fontSize($r('app.integer.multiple_files_download_text_font_size_fourteen'))
            .fontWeight(500)
            .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
            .textAlign(TextAlign.End)
            .width($r('app.string.multiple_files_download_row_text_width'))
            .onClick(() => {
              if (this.downloadCount === NO_TASK) {
                this.getUIContext().showAlertDialog({
                  message: $r('app.string.multiple_files_download_completed'),
                  alignment: DialogAlignment.Center
                });
                return;
              }
              this.isStartAllDownload = !this.isStartAllDownload;
            })
        }.width($r('app.string.multiple_files_download_row_width'))
      }
      .margin({
        left: 16,
        right: 16,
        top: $r('app.integer.multiple_files_download_margin_top_twenty_eight'),
        bottom: $r('app.integer.margin_eight')
      })

      List() {
        ForEach(this.downloadConfigArray, (item: request.agent.Config) => {
          ListItem() {
            FileDownloadItem({
              downloadConfig: item,
              isStartAllDownload: this.isStartAllDownload,
              downloadCount: this.downloadCount,
              downloadFailCount: this.downloadFailCount
            })
          }
        }, (item: request.agent.Config) => JSON.stringify(item))
      }
      .width('100%')
      .height('100%')
    }
    .focusable(false)
  }
}

@Builder
export function getMultipleFilesDownload(): void {
  MultipleFilesDownload();
}

import { common } from '@kit.AbilityKit';
import { request } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

import { ProgressButton } from './ProgressButton';

const uiContext: UIContext | undefined = AppStorage.get('uiContext');

const TAG = 'FileDownloadItem';
const BYTE_CONVERSION: number = 1024;
const context = uiContext!.getHostContext()! as common.UIAbilityContext;

function getFileNameFromUrl(url: string): string {
  const segments = url.split('/');
  let tmp = segments.pop() || '';
  if (tmp.indexOf('?') != -1) {
    return tmp.split('?')[0];
  }
  return tmp;
}

@Component
export struct FileDownloadItem {
  @State downloadConfig: request.agent.Config = { action: request.agent.Action.DOWNLOAD, url: '' };
  @State fileName: string = '';
  @State textState: string | Resource = "";
  @Link @Watch('onDownLoadUpdated') isStartAllDownload: boolean;
  private downloadTask: request.agent.Task | undefined = undefined;
  @Link downloadCount: number;
  @Link downloadFailCount: number;
  @State isShow: boolean = false;
  @State downloading: boolean = false;
  @State sFileSize: string | number = "-";
  @State nFileSize: number = 0;
  @State sCurrentDownloadSize: string = "-";
  @State @Watch('updateProgress') nCurrentDownloadSize: number = 0;
  @State progress: number = 0;
  @State isPaused: boolean = false;
  private completedCallback = (progress: request.agent.Progress) => {
    this.textState = $r("app.string.download_completed");
    if (this.sFileSize === -1) {
      this.sFileSize = this.sCurrentDownloadSize
      this.nCurrentDownloadSize = 1;
    }
    this.downloadCount--;
  }
  private failedCallback = (progress: request.agent.Progress) => {
    this.textState = $r("app.string.download_fail");
    this.downloadFailCount++;
    if (this.downloadFailCount === this.downloadCount) {
      this.isStartAllDownload = false;
    }
    if (this.downloadTask) {
      request.agent.show(this.downloadTask.tid, (err: Error, taskInfo: request.agent.TaskInfo) => {
        if (err) {
          hilog.error(0x0000, TAG, 'agent show error:', err);
          return;
        }
      });
    }
  }
  private pauseCallback = (progress: request.agent.Progress) => {
    this.isPaused = true;
    this.downloading = false;
    this.textState = $r("app.string.paused");
  }
  private resumeCallback = (progress: request.agent.Progress) => {
    this.isPaused = false;
    this.textState = $r("app.string.downloading");
    this.downloading = true;
  }
  private progressCallback = (progress: request.agent.Progress) => {
    this.textState = $r("app.string.downloading");
    this.downloading = true;
    this.isShow = true;
    if (this.downloadTask) {
      if (this.sFileSize === '-') {
        if (progress.sizes[0] === -1) {
          this.sFileSize = -1;
          this.nCurrentDownloadSize = 0;
          this.nFileSize = 1;
        } else {
          this.nFileSize = progress.sizes[0];
          this.sFileSize = (progress.sizes[0] / BYTE_CONVERSION).toFixed() + 'kb';
          this.nCurrentDownloadSize = progress.processed;
        }
      } else if (this.sFileSize === -1) {
        hilog.info(0x0000, TAG, 'file size unknown');
      } else {
        this.nCurrentDownloadSize = progress.processed;
      }
      this.sCurrentDownloadSize = (progress.processed / BYTE_CONVERSION).toFixed() + 'kb';
    }
  }
  private responseCallback = (response: request.agent.HttpResponse) => {
    hilog.info(0x0000, TAG, 'response:' + response.statusCode);
  };

  updateProgress() {
    setTimeout(() => {
      if (this.textState == $r("app.string.paused")) {
        this.isPaused = true;
        return;
      }
      let tmp = this.nCurrentDownloadSize / this.nFileSize * 100;
      if (tmp <= this.progress) {
        return;
      }
      this.progress = tmp;
    }, 10)
  }

  aboutToAppear(): void {
    this.fileName = getFileNameFromUrl(this.downloadConfig.url);
  }

  onDownLoadUpdated(): void {
    if (this.isStartAllDownload) {
      if (this.textState === $r("app.string.download_fail")) {
        this.downloadTask = undefined;
        this.isShow = false;
        this.textState = "";
      }
      this.startDownload();
    } else {
      if (this.downloadFailCount > 0 && this.downloadFailCount === this.downloadCount) {
        this.downloadFailCount = 0;
      } else {
        this.pauseDownload();
      }
    }
  }

  startDownload(): void {
    if (this.downloadTask === undefined) {
      request.agent.create(context, this.downloadConfig).then((task: request.agent.Task) => {
        task.on('completed', this.completedCallback);
        task.on('failed', this.failedCallback);
        task.on('pause', this.pauseCallback);
        task.on('resume', this.resumeCallback);
        task.on('progress', this.progressCallback);
        task.on('response', this.responseCallback);

        task.start().then(() => {
          this.downloadTask = task;
        }).catch((err: Error) => {
          hilog.error(0x0000, TAG, 'task start error:', err);
        })
      }).catch((err: Error) => {
        hilog.error(0x0000, TAG, 'create error:', err);
      });
    } else {
      this.resumeDownload();
    }
  }

  pauseOrResumeDownload(): void {
    if (this.downloadTask) {
      request.agent.show(this.downloadTask.tid, (err: Error, taskInfo: request.agent.TaskInfo) => {
        if (err) {
          hilog.error(0x0000, TAG, 'agent show error:', err);
          return;
        }
        if (taskInfo.progress.state === request.agent.State.PAUSED) {
          this.resumeDownload();
        } else {
          this.pauseDownload();
        }
      });
    }
  }

  pauseDownload(): void {
    if (this.downloadTask) {
      request.agent.show(this.downloadTask.tid, (err: Error, taskInfo: request.agent.TaskInfo) => {
        if (err) {
          hilog.error(0x0000, TAG, 'agent show error:', err);
          return;
        }
        if (this.downloadTask && (taskInfo.progress.state === request.agent.State.WAITING || taskInfo.progress.state
          === request.agent.State.RUNNING || taskInfo.progress.state === request.agent.State.RETRYING)) {
          this.downloadTask.pause().then(() => {
          }).catch((err: Error) => {
            hilog.error(0x0000, TAG, 'task pause error:', err);
          });
        }
      });
    }
  }

  resumeDownload(): void {
    if (this.downloadTask) {
      request.agent.show(this.downloadTask.tid, (err: Error, taskInfo: request.agent.TaskInfo) => {
        if (err) {
          hilog.error(0x0000, TAG, 'agent show error:', err);
          return;
        }
        if (this.downloadTask && taskInfo.progress.state === request.agent.State.PAUSED) {
          this.downloadTask.resume().then(() => {
          }).catch((err: Error) => {
            hilog.error(0x0000, TAG, 'task resume error:', err);
          });
        }
      });
    }
  }

  build() {
    RelativeContainer() {
      Image($r('app.media.multiple_files_download_file'))
        .height($r("app.integer.multiple_files_download_image_size"))
        .width($r("app.integer.multiple_files_download_image_size"))
        .id('fileImage')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center }
        })

      Text(this.fileName)
        .fontSize($r("app.integer.multiple_files_download_text_font_size"))
        .padding({ left: $r("app.integer.multiple_files_download_padding") })
        .alignRules({
          left: { anchor: 'fileImage', align: HorizontalAlign.End },
          top: { anchor: 'fileImage', align: VerticalAlign.Top },
        })
        .fontWeight(FontWeight.Medium)
        .margin({ top: $r('app.integer.item_name_top_margin') })
        .id('fileName')

      ProgressButton({
        paused: this.isPaused,
        progress: this.progress,
        progressButtonWidth: $r('app.integer.progress_btn_width'),
        content: this.textState,
        enable: true,
        clickCallback: () => {
          this.pauseOrResumeDownload();
        }
      })
        .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)
        .alignRules({
          right: { anchor: '__container__', align: HorizontalAlign.End },
          center: { anchor: '__container__', align: VerticalAlign.Center }
        })

      Text(this.sCurrentDownloadSize + "/" + this.sFileSize)
        .fontSize($r('app.integer.multiple_files_download_text_font_size_fourteen'))
        .width($r('app.string.multiple_files_download_text_width'))
        .fontColor($r('app.color.multiple_files_download_text_font_color'))
        .margin({ top: $r("app.integer.multiple_files_download_margin_top") })
        .padding({ left: $r("app.integer.multiple_files_download_padding") })
        .alignRules({
          top: { anchor: 'fileName', align: VerticalAlign.Bottom },
          left: { anchor: 'fileImage', align: HorizontalAlign.End }
        })
        .id('downloadVal')

    }
    .height($r('app.integer.item_height'))
    .margin({ left: 16, right: 16 })
    .padding({ left: 12, right: 12 })
  }
}

const EMPTY_STRING: string = '';
const MAX_PROGRESS: number = 100;
const MAX_PERCENTAGE: string = '100%';
const MIN_PERCENTAGE: string = '0%';
const TEXT_OPACITY: number = 0.4;
const BUTTON_NORMAL_WIDTH: number = 44;
const BUTTON_NORMAL_HEIGHT: number = 28;
const BUTTON_BORDER_RADIUS: number = 14;
const TEXT_ENABLE: number = 1.0;
const MIN_WIDTH: Length = 44;
const PADDING_TEXT: Length = 8;

const PROGRESS_BUTTON_PROGRESS_KEY = 'progress_button_progress_key';
const PROGRESS_BUTTON_PRIMARY_FONT_KEY = 'progress_button_primary_font_key';
const PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY = 'progress_button_container_background_color_key';
const PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY = 'progress_button_emphasize_secondary_button_key';

@Component
export struct ProgressButton {
  @Prop @Watch('updateText') paused: boolean = false;
  @Prop @Watch('getProgressContext') progress: number;
  @State textProgress: string = EMPTY_STRING;
  @Prop content: string | Resource = EMPTY_STRING;
  @State isLoading: boolean = false;
  progressButtonWidth?: Length = BUTTON_NORMAL_WIDTH;
  clickCallback: () => void = () => {
  };
  @Prop enable: boolean = true;
  @State progressColor: ResourceColor = '#330A59F7';
  @State containerBorderColor: ResourceColor = '#330A59F7';
  @State containerBackgroundColor: ResourceColor = $r('sys.color.ohos_id_color_foreground_contrary');

  private getButtonProgress(): number {
    if (this.progress < 0) {
      return 0;
    } else if (this.progress > MAX_PROGRESS) {
      return MAX_PROGRESS;
    }
    return this.progress;
  }

  updateText() {
    if (this.paused) {
      setTimeout(() => {
        this.isLoading = !this.paused;
      }, 10);
    } else {
      this.isLoading = !this.paused;
    }
  }

  private getProgressContext() {
    if (this.progress < 0) {
      this.isLoading = false;
      this.textProgress = MIN_PERCENTAGE;
    } else if (this.progress >= MAX_PROGRESS) {
      this.isLoading = false;
      this.textProgress = MAX_PERCENTAGE;
    } else {
      this.isLoading = true;
      this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + "%";
    }
  }

  build() {
    Button() {
      Stack() {
        Progress({
          value: this.getButtonProgress(), total: MAX_PROGRESS,
          style: ProgressStyle.Capsule
        })
          .height(BUTTON_NORMAL_HEIGHT)
          .borderRadius(BUTTON_BORDER_RADIUS)
          .width('100%')
          .hoverEffect(HoverEffect.None)
          .clip(false)
          .enabled(this.enable)
          .key(PROGRESS_BUTTON_PROGRESS_KEY)
          .color(this.progressColor)
        Text(this.isLoading ? this.textProgress : this.content)
          .fontSize($r('sys.float.ohos_id_text_size_button3'))
          .fontWeight(FontWeight.Medium)
          .key(PROGRESS_BUTTON_PRIMARY_FONT_KEY)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .padding({ left: PADDING_TEXT, right: PADDING_TEXT })
          .opacity(this.enable ? TEXT_ENABLE : TEXT_OPACITY)

        Row()
          .key(PROGRESS_BUTTON_CONTAINER_BACKGROUND_COLOR_KEY)
          .backgroundColor(Color.Transparent)
          .border({ width: 1, color: this.containerBorderColor })
          .height(BUTTON_NORMAL_HEIGHT)
          .borderRadius(BUTTON_BORDER_RADIUS)
          .width('100%')
      }
    }
    .borderRadius(BUTTON_BORDER_RADIUS)
    .clip(false)
    .hoverEffect(HoverEffect.None)
    .key(PROGRESS_BUTTON_EMPHASIZE_SECONDARY_BUTTON_KEY)
    .backgroundColor(this.containerBackgroundColor)
    .constraintSize({ minWidth: MIN_WIDTH })
    .width((!this.progressButtonWidth || this.progressButtonWidth < BUTTON_NORMAL_WIDTH) ?
      BUTTON_NORMAL_WIDTH : this.progressButtonWidth)
    .stateEffect(this.enable)
    .onClick(() => {
      if (!this.enable) {
        return;
      }
      if (this.progress < MAX_PROGRESS) {
        this.isLoading = !this.isLoading;
      }
      this.clickCallback && this.clickCallback();
    })
  }
}

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone"
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:reason_internet",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      },
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ]
  }
}