Delayed Window Opening, Linear Gradient, Routing Parameters, Fixed Light Mode, Parameter Passing Issues

[Daily HarmonyOS Next Knowledge] Delayed Window Opening, Linear Gradient, Routing Parameters, Fixed Light Mode, Parameter Passing Issues

1. HarmonyOS: Cannot open a new window with window.open when setTimeout delay exceeds 5 seconds?

Testing shows the same issue with the window API. In web browsers, when setTimeout exceeds 5 seconds, the browser may block operations like window.open because it considers long-running timers a security risk (e.g., preventing ads or malicious scripts). Consider alternative methods to open windows.

2. HarmonyOS: linearGradient property does not work under the Text component?

.linearGradient({
  direction: GradientDirection.Right, // Gradient direction
  repeating: false, // Whether gradient colors repeat
  colors: [['#F7F8FA', 0.0], ['#F7F8FA', 1.0]]
})

This does not work when applied directly to a Text component.

Reference Demo:

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Row() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        }.linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        }).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
      }
      .width('100%')
    }
    .height('100%')
  }
}

3. HarmonyOS: Cannot receive Map type parameters when using router.pushUrl({url: url, params: params}) to pass data between pages?

The router does not support passing Map type data. Use Record instead, which only allows basic data types in params.

private routerParams : RouterParams = new RouterParams()
private param : Record<string, string> = {};

routePage() {
  try {
    this.param['vip_source'] = 'qww'
    this.routerParams.pageType = '11'
    this.routerParams.params = this.param
    this.routerParams.title = '新闻'
    router.pushUrl({
      url: 'pages/RouterA',
      params: this.routerParams
    })
  } catch (err) {
    console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`)
  }
}

@State value: Record<string, Record<string, string>> = router.getParams() as Record<string, Record<string, string>>;

onPageShow() {
  console.log("hh2:" + this.value['title'])
  console.log("hh3:" + this.value['params']['vip_source'])
}

4. HarmonyOS: How to force the app to always use light mode if dark mode is not yet supported?

Solution:

By default, apps follow the system's light/dark mode. To fix your app to light mode:

1. Set the app's color style explicitly.
2. After setting, the app will no longer follow system changes.

5. HarmonyOS: Parameter passing issues?

Problem 1: this.highSheepNum = this.data.totalCount() does not assign the value.

Problem 2: After clicking the filter, this.data.totalCount() updates, but this.highSheepNum in Tabs TabContent does not refresh dynamically.

Solution 1:

In the changeData and init functions, modify the for loop condition from i <= this.listDate.length to i < this.listDate.length to avoid accessing this.listDate[30], which exceeds the array bounds.

for (let i = 0; i < this.listDate.length; i++) {
  // ...
}

Solution 2:

Remove the third parameter from TabRoadBuilder and use this.highSheepNum directly to enable dynamic updates:

Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    this.highSpeedBuilder()
  }.tabBar(this.TabRoadBuilder(0, '优惠券')) // Remove the third parameter
  TabContent() {
    this.tollStationsBuilder()
  }.tabBar(this.TabRoadBuilder(1, '收费站')) // Remove the third parameter
}

@Builder TabRoadBuilder(index: number, name: string) { // Remove the original third parameter
  Column() {
    Text(name + '(' + `${this.highSheepNum}` + ')') // Use this.highSheepNum
      .fontColor(this.currentIndex === index ? '#015DFF' : '#999999')
      .fontSize(16)
      .fontWeight(this.currentIndex === index ? 500 : 400)
      .lineHeight(22)
      .margin({ top: 6, bottom: 6 })
    Divider().strokeWidth(3).color(this.currentIndex === index ? '#015DFF' : '#999999').width(24)
  }.width('100%')
}