Web Network Interception, Dialogs, Web Redirects, Data Scope, Multithreading

[Daily HarmonyOS Next Knowledge] Web Network Interception, Dialogs, Web Redirects, Data Scope, Multithreading

1. HarmonyOS: Neither onErrorReceive nor onHttpErrorReceive callbacks are triggered for the Web component when network interception fails?

When network interception fails, neither the onErrorReceive nor onHttpErrorReceive callbacks of the Web component are triggered. The interception interface is used as follows:

OH_ArkWeb_CreateResponse(&arkResponse);  
OH_ArkWebResponse_SetError(arkResponse, ARKWEB_ERR_FAILED);  
OH_ArkWebResourceHandler_DidReceiveResponse(arkResourceHandler, arkResponse);  

Solution:

• If an error occurs during the response phase, use response->seterror to trigger the callback.
• If an error occurs during data transmission, use OH_ArkWebResourceHandler_DidFailWithError.

2. HarmonyOS: Dialog appears on the new page after using openCustomDialog to navigate?

When using openCustomDialog to navigate to a new page, the dialog persists on the new page.

Solution:

Close the dialog before navigating and reopen it when returning. Use global variables to control the dialog's visibility.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-appstorage-V5

AppStorage Overview:

• AppStorage is the application-wide UI state storage, bound to the application process. Created by the UI framework at app startup, it provides centralized storage for UI state properties.
• LocalStorage is page-level, used for intra-page data sharing.
• AppStorage enables application-wide global state sharing and acts as the app's "central hub." Persistent data (PersistentStorage) and environment variables (Environment) interact with the UI through AppStorage.

This article covers AppStorage use cases and related decorators: @StorageProp and @StorageLink.

• Unlike decorators like @State that only propagate within the component tree, AppStorage provides broader cross-ability data sharing.
• Recommended pre-reading: State Management Overview.
• AppStorage also offers API interfaces for manual CRUD operations on stored keys. Refer to the AppStorage API Documentation.

3. HarmonyOS ArkWeb web redirect issue?

For Web components, use onLoadIntercept to detect redirects and perform actions.

Documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onloadintercept10

4. HarmonyOS: Incorrect data scope in custom layouts of custom components?

Reference Code:

// TeacherInfoViewModel.ets
import { TeacherInfoModel } from './TeacherInfoModel';
import { promptAction } from '@kit.ArkUI';

@Observed
export class TeacherInfoViewModel {
  teacherInfoModel: TeacherInfoModel = new TeacherInfoModel();

  changeId(id: string): TeacherInfoModel {
    this.teacherInfoModel.id = id;
    return this.teacherInfoModel;
  }

  // Validate
  checkModel(teacherInfoModel: TeacherInfoModel) {
    this.teacherInfoModel = teacherInfoModel;
  }
}

// Index.ets
import { getTeacherInfoModel, TeacherInfoModel } from '../comp/TeacherInfoModel';
import { TeacherInfoViewModel } from '../comp/TeacherInfoViewModel';
import { CommComponent } from './CommComponent';
import { ComponentStatus } from './CommonEnums';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State teacherInfoViewModel: TeacherInfoViewModel = new TeacherInfoViewModel();
  @State state: ComponentStatus = ComponentStatus.LOADING

  aboutToAppear(): void {
    this.state = ComponentStatus.LOADING;
    this.requestNetWork();
  }

  private requestNetWork() {
    getTeacherInfoModel("parameters").then((res: TeacherInfoModel) => {
      this.teacherInfoViewModel.checkModel(res);
      this.state = ComponentStatus.SUCCESS;
    });
  }

  build() {
    Row() {
      Column() {
        CommComponent({
          componentStatus: this.state,
          data: this.teacherInfoViewModel.teacherInfoModel,
          builder: () => {
            this.successBuild()
          },
          builderLoading: () => {
            this.loadingBuild()
          }
        }).onClick((e) => {
          this.requestNetWork();
        })
      }
      .width('100%')
    }
    .height('100%')
  }

  @Builder
  successBuild() {
    // Issue 1: ID data does not update
    Column() {
      Text(`Network Data: ${this.teacherInfoViewModel?.teacherInfoModel?.id} `)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .onClick(() => {
      // Issue: ID does not update after clicking to re-request
      let param = this.teacherInfoViewModel.changeId("onClickID") as TeacherInfoModel

      // Using only @State, directly modify the object to trigger UI refresh
      let teacherInfoViewModelTemp: TeacherInfoViewModel = new TeacherInfoViewModel()
      teacherInfoViewModelTemp.teacherInfoModel = param
      this.teacherInfoViewModel = teacherInfoViewModelTemp

      promptAction.showToast({ message: `Updated ID: ${JSON.stringify(param)}` })
    })
  }

  @Builder
  loadingBuild() {
    Column() {
      Text(`Loading... `)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
  }
}

5. HarmonyOS: Can a function be passed from the main thread to a Worker for execution?

Is it possible to pass a function from the main thread to a Worker and execute it in the Worker's thread?

Attempted Solution:

Define a function in the main thread and pass it to the Worker thread via the onmessage interface.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-worker-V5#onmessage9