Page Parameter Passing, Popup Disable Blank Click to Close, Two-way Binding Data Error

【Daily HarmonyOS Next Knowledge】Page Parameter Passing, Popup Disable Blank Click to Close, Two-way Binding Data Error, Destroy Custom Components, Image Blur Setting

1. How to pass parameters to the corresponding Page when using window.setUIContent in HarmonyOS?

How to pass parameters to WindowContent through window.setUIContent?

Try the following interface: loadContent(path: string, storage: LocalStorage): Promise<void>. This loads specific page content for the window based on the path of a page in the current project and passes state attributes to the loaded page via LocalStorage using a Promise asynchronous callback.

Specific documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#loadcontent9

2. How to disable the function of closing a custom popup by clicking the blank area in HarmonyOS?

Reference documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5#ZH-CN_TOPIC_0000001884757698__basedialogoptions11

3. Compilation error occurs when using $$ two-way binding with the Slider component in an HSP package in HarmonyOS?

In an HSP package page, using two-way data binding with the Slider component throws a compilation error Cannot find name 'this'. This works normally in a HAP package. The page code is as follows:

@Entry
@Component
struct SliderPage {
  @State value: number = 0
  build() {
    RelativeContainer() {
      // Using $$ two-way binding here causes a compilation error
      Slider({ value: $$this.value, step: 0.01 })
        .id('slider')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .blockSize({ width: '20', height: '20' })
        .onChange((value, mode) => {
          if (mode === SliderChangeMode.End) {
            console.log('end')
            setTimeout(() => {
              console.log('settimeout')
              this.value = 90
              console.log(`this.value ${this.value}`)
            }, 1000)
          }
          console.log(`${value}`)
        })
    }
    .height('100%')
    .width('100%')
  }
}

Variables decorated with @State do not require $$ operation—use this.value directly. Remove the $$ attempt or use @link.

4. How to actively destroy a custom component in HarmonyOS?

How to actively destroy a custom component? Add a destruction method destroy to the component. How to implement this method to destroy the component itself?

@Component
struct Demo {
  @State switch: boolean = true
  build() {
    Column() {
      Button('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.switch = !this.switch
        })
      if (this.switch) {
        Child({ message: new Message('Child') })
      }
    }
    .height("100%")
    .width('100%')
  }
}

Refer to the lifecycle and deletion of custom components: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-custom-components-lifecycle-V5#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84%E5%88%A0%E9%99%A4

A component will be deleted if:

• The branch of an if statement changes.
• The number of elements in a ForEach loop changes.

Before deletion, the aboutToDisappear lifecycle function is called, marking that the node will be destroyed. ArkUI's node deletion mechanism:

• Backend nodes are directly removed from the component tree and destroyed.
• Frontend nodes are dereferenced and garbage-collected by the JS virtual machine when no references remain.

Custom components and their variables are deleted. If they have synchronized variables (e.g., @link, @prop, @StorageLink), they are unregistered from the synchronization source.

Note: Avoid using async/await in aboutToDisappear. Asynchronous operations (Promises or callback methods) in aboutToDisappear keep the component in the Promise closure until the callback completes, preventing garbage collection.

5. How to set Gaussian blur for an Image in HarmonyOS?

Reference demo:

Text('')
  .width('90%')
  .height('30%')
  .fontSize(20)
  .fontColor(Color.White)
  .textAlign(TextAlign.Center)
  .backdropBlur(50) // Apply blur to the background
  .backgroundImage($r('app.media.image1'))
  .backgroundImageSize({ width: 400, height: 300 })