DEV Community: victordeng

HarmonyOS NEXT project practice：Call functions between parent-child components

victordeng — Sun, 29 Jun 2025 09:51:20 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components#%E6%88%90%E5%91%98%E5%87%BD%E6%95%B0%E5%8F%98%E9%87%8F

In ArkUI, the content displayed by the UI is all components. Components directly provided by the framework are called system components, while those defined by the developer are called custom components. When developing UI interfaces, it is not only necessary to combine system components, but also to consider factors such as code reusability, separation of business logic and UI, and evolution of subsequent versions. Therefore, encapsulating UI and some business logic into custom components is an essential capability.

Custom components have the following characteristics:

Combatable: allows developers to combine system components, their properties, and methods.
Reusable: Custom components can be reused by other components and used as different instances in different parent components or containers.
Data driven UI update: driving UI refresh through changes in state variables.

Custom components are so common that function calling issues are inevitable between parent and child components. For example, how does the parent component call the function of the child component? How do child components call the functions of the parent component? This is a problem that we often inevitably encounter in project development.

Calling functions between parent and child components is a common interaction requirement, mainly used to achieve communication and functional collaboration between components. Common scenarios for calling functions between parent-child components:

The parent component needs to actively trigger the internal logic of the child component (such as: the parent component needs to control the form reset of the child component, the parent component needs to trigger the animation or data refresh of the child component, perform specific operations, etc.)
The child component needs to pass data to the parent component or trigger the logic of the parent component (such as notifying the parent component to save data after the child component form is submitted, triggering the logic of the parent component after the child component user operates, etc.).
Parent child components require frequent interaction, for example, the parent component controls the state of the child component and notifies the parent component when the state of the child component changes. (such as bidirectional binding of form input boxes, synchronization of parent-child component states (such as switches, selectors), etc.)

The following is an example of practical code:
The parent component calls the child component function

@Entry
@Component
struct CallSubComponentMethodPage {
  private childController = new ChildController()
  private count: number = 0

  build() {
    Column({ space: 10 }) {
      Text('CallSubComponentMethod Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('CallSubComponentMethod').onClick(() => {
        this.count++
        this.childController.changeText(`this is text from parent, and count = ${this.count}`)
      })

      Child({ childController: this.childController })
    }
    .height('100%')
    .width('100%')
  }
}

//定义controller对象
class ChildController {
  changeText = (value: string) => {
  }
}

@Component
struct Child {
  @State private text: string = 'this is child text'
  childController: ChildController = new ChildController();

  aboutToAppear() {
    //给childController对应的方法赋值
    this.childController.changeText = this.changeText
  }

  //封装的能力
  private changeText = (value: string) => {
    this.text = value
  }

  build() {
    Column() {
      Text(this.text)
    }
    .backgroundColor('#EEEEEE')
    .width('90%')
    .height(100)
    .justifyContent(FlexAlign.Center)
  }
}

Child component calls parent component function

@Entry
@Component
struct CallParentComponentMethodPage {
  @State sonClickCount: number = 0

  build() {
    Column({ space: 10 }) {
      Text('CallParentComponentMethod Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text(`sonClickCount = ${this.sonClickCount}`)

      Son({
        onSonClick: (count: number) => {
          this.sonClickCount = count
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  private count: number = 0
  @Require onSonClick: (count: number) => void = (count: number) => {
  }

  build() {
    Column({ space: 10 }) {
      Text('Son Component')
      Button('Son Click').onClick(() => {
        this.count++
        this.onSonClick(this.count)
      })
    }
    .backgroundColor('#EEEEEE')
    .width('90%')
    .height(200)
    .padding(10)
  }
}

HarmonyOS NEXT project practice：Load local webpage resources

victordeng — Sun, 29 Jun 2025 09:45:34 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-page-loading-with-web-components#%E5%8A%A0%E8%BD%BD%E6%9C%AC%E5%9C%B0%E9%A1%B5%E9%9D%A2

In order to reduce user waiting perception in scenarios such as startup, jumping, and weak network, and to buy time for dynamic content loading, local pages can be loaded to optimize user experience.

Show the method of loading a local page file in the following example:
By placing the local page file in the rawfile directory of the application, developers can specify the default loaded local page when creating the web component, and after loading is complete, they can change the current web component's page by calling the loadURL() interface.

When loading local HTML files, referencing local CSS style files can be achieved through the following methods.

<link rel="stylesheet" href="resource://rawfile/xxx.css">
<link rel="stylesheet" href="file:///data/storage/el2/base/haps/entry/cache/xxx.css">// 加载沙箱路径下的本地css文件。

Load \$r or \$rawfile local page

In the resources/rawfile directory
Add hello.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

add helloAgain.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello again!</h1>
  </body>
</html>

add WebLocalPage

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebLocalPage {
  src: ResourceStr = $rawfile("hello.html")
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {
      Text('WebPage')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Row({ space: 10 }){
        Button('hello')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到hello.html
              this.webController.loadUrl( $rawfile("hello.html"));
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
        Button('hello again')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到helloAgain.html
              this.webController.loadUrl( $rawfile("helloAgain.html"));
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
      }

      Web({ src: this.src, controller: this.webController })
        .width('100%')
        .layoutWeight(1)
        .horizontalScrollBarAccess(false)//设置是否显示横向滚动条
        .verticalScrollBarAccess(false) //设置是否显示纵向滚动条
    }
    .height('100%')
    .width('100%')
  }
}

Load local resources through resource protocol

Replace $rawfile with resource protocol

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebLocalPage {
  // src: ResourceStr = $rawfile("hello.html")
  src: ResourceStr = 'resource://rawfile/hello.html'
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {
      Text('WebPage')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Row({ space: 10 }) {
        Button('hello')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到hello.html
              // this.webController.loadUrl($rawfile("hello.html"));
              this.webController.loadUrl('resource://rawfile/hello.html');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
        Button('hello again')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到helloAgain.html
              // this.webController.loadUrl($rawfile("helloAgain.html"));
              this.webController.loadUrl('resource://rawfile/helloAgain.html');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
      }

      Web({ src: this.src, controller: this.webController })
        .width('100%')
        .layoutWeight(1)
        .horizontalScrollBarAccess(false)//设置是否显示横向滚动条
        .verticalScrollBarAccess(false) //设置是否显示纵向滚动条
    }
    .height('100%')
    .width('100%')
  }
}

Load HTML formatted text data

The src of a web component can directly load HTML strings.

// WebComponent.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  htmlStr: string = "data:text/html, <html><body bgcolor=\"green\"><h1>Source:<pre>source</pre></h1></body></html>";

  build() {
    Column() {
      // 组件创建时，加载htmlStr
      Web({ src: this.htmlStr, controller: this.controller })
    }
  }
}

Web components can load HTML formatted text data through the loadData() interface. When developers do not need to load the entire page and only need to display some page fragments, this feature can be used to quickly load the page. When loading a large number of HTML files, the fourth parameter baseURL needs to be set to "data".

// WebComponent.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

HarmonyOS NEXT project practice：Load web page resources

victordeng — Sun, 29 Jun 2025 09:34:33 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-page-loading-with-web-components#%E5%8A%A0%E8%BD%BD%E7%BD%91%E7%BB%9C%E9%A1%B5%E9%9D%A2

Page loading is a fundamental function of web components. According to the source of page loading data, it can be divided into three common scenarios, including loading web pages, loading local pages, and loading rich text data in HTML format.

Web(value: WebOptions)

WebOptions: Define web options through interfaces, with the following properties and meanings:

Src: URL of the webpage resource. Src cannot dynamically change the address through a state variable (e.g. @ State). If you need to change it, please reload it through loadurl().
Controller: A controller that can control various behaviors of web components, including page navigation, declaring cycle state, JavaScript interaction, and more.
RenderMode: represents the rendering mode of the current web component, renderMode.ASYNC RENDER represents self rendering of the web component, renderMode.SYNC_RENDER represents support for unified rendering capability of the web component, default value is renderMode.ASYNC RENDER, this mode does not support dynamic adjustment.
IncognitoMode: Indicates whether the currently created webview is in privacy mode. True represents creating a private mode webview, while false represents creating a normal mode webview. Default value: false.
SharedRenderProcessToken: Refers to the token specified by the current web component for the shared rendering process. In multi rendering process mode, web components with the same token will first attempt to reuse the rendering process bound to the token. The binding between the token and the rendering process occurs during the initialization phase of the rendering process. When there is no associated web component in the rendering process, its binding relationship with the token will be removed. Default value: ''.

The prerequisite for loading web page resources is:
During the page loading process, if network resource retrieval is involved, please configure network access permissions in module. json 5. The method of adding permissions can refer to declaring permissions in the configuration file.

"requestPermissions":[
    {
      "name" : "ohos.permission.INTERNET"
    }
  ]

Developers can specify the default web page to load when creating web components. After the default page is loaded, if you need to change the web page displayed by this web component, you can load the specified web page by calling the loadURL() interface. The first parameter variable src of a web component cannot dynamically change its address through a state variable (e.g. @ State). If you need to change it, please reload it through loadURL().

Load the specified URL.

loadUrl(url: string | Resource, headers?: Array<WebHeader>): void

URL: The URL that needs to be loaded.
Headers: Additional HTTP request headers for URLs.

In the following example, after the web component loads the "example. com" page, the developer can change the display page of this web component to "example. com" through the loadURL interface.

Practical code example:

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebOnlinePage {
  src: ResourceStr = 'https://m.baidu.com'
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {
      Text('WebPage')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Row({ space: 10 }){
        Button('加载百度官网')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到https://m.baidu.com
              this.webController.loadUrl('https://m.baidu.com');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
        Button('加载华为开发者官网')
          .onClick(() => {
            try {
              // 点击按钮时，通过loadUrl，跳转到https://developer.huawei.com/
              this.webController.loadUrl('https://developer.huawei.com/');
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
      }

      Web({ src: this.src, controller: this.webController })
        .width('100%')
        .layoutWeight(1)
        .horizontalScrollBarAccess(false)//设置是否显示横向滚动条
        .verticalScrollBarAccess(false) //设置是否显示纵向滚动条
    }
    .height('100%')
    .width('100%')
  }
}

HarmonyOS NEXT project practice：Manage avoidance zones

victordeng — Sun, 29 Jun 2025 09:29:16 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-immersive#section813019373176

Core concepts

The visibility and concealment of avoidance zones:
When the page is displayed or hidden, use the Window. setWindowLayoutFullScreen() method to set whether the window is in full screen mode, and use the Window. setWindowSystemBarEnabling () method to set the status bar and navigation bar to be visible or hidden.

Property settings for the system bar:

setWindowSystemBarProperties(systemBarProperties: SystemBarProperties): Promise<void>

Set the properties of the main window status bar and use Promise asynchronous callback. This interface does not take effect when called on 2-in-1 devices, and it does not take effect immediately when called on other devices in split screen mode (i.e. window mode is window.Windows Status Type. SPLIT_SCREEN), free floating window mode (i.e. window mode is window.Windows Status Type. FLOODING), and free multi window mode (can be turned on by clicking the free multi window button in the device control center). It only takes effect when entering the full screen main window.

Concept of Safe Zone:
The safe zone refers to the display area of a page. By default, interfaces developed by developers are laid out within the safe zone and do not overlap with the avoidance zones set by the system, such as the status bar and navigation bar areas. Provide attribute methods that allow developers to set the drawing content of components to exceed the limits of the safe zone. The expandSafeArea attribute supports the extension of the drawing area of components outside the safe zone without changing the layout. Set the setKeyboardAvoidMode to configure the avoidance mode of the page when the virtual keyboard pops up. When there is a title bar or other text on the page that does not want to overlap with the avoidance area, it is recommended to set the expandSafeArea property on the component to achieve immersive effects, or you can directly set full screen immersion through the window interface setWindowLayoutFullScreen.

Control the avoidance mode of the page when lifting the virtual keyboard
Interface:

setKeyboardAvoidMode(value: KeyboardAvoidMode): void

Value: Configure the avoidance mode of the page when lifting the virtual keyboard.
Default value: KeyboardAvoidMode.oFFSET, the default avoidance mode when the keyboard is lifted is upward.

describe
KeyboardAvoidMode.RISIZE mode compresses the page size, and components with percentage width and height settings on the page will be compressed along with the page, while components with directly set width and height will be laid out according to the fixed size settings. When setting the RESIZE mode of KeyboardAvoidMode, expandSafeArea ([SafeAreaType.KEYBOARD], [SafeAreEdge.BOTTOM]) does not take effect.
KeyboardAvoidMode-NONE mode configuration page does not avoid the keyboard, and the page will be covered by a raised keyboard.

KeyboardAvoidMode: Configure the avoidance mode of the page when the keyboard avoids. The meaning of attributes is as follows:
OFFSET: Upward mode.
RESIZE: Compression mode.
OFFSET_WITH_CARET: Upward mode, when the cursor position in the input box changes, it will also trigger avoidance.
RESIZE_WITH_CARET: Compression mode, which also triggers avoidance when the cursor position in the input box changes.
NONE: Do not avoid the keyboard.

Code Practical Example:

import { common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { KeyboardAvoidMode } from '@kit.ArkUI';

@Entry
@Component
struct ManageAvoidZonePage {
  context = this.getUIContext();
  uiAbilityContext = this.context.getHostContext() as common.UIAbilityContext;
  private windowClass = this.uiAbilityContext.windowStage.getMainWindowSync();
  private keyboardAvoidMode = KeyboardAvoidMode.OFFSET

  build() {
    Column() {
      Column({ space: 10 }) {
        Text('ManageAvoidZone Page')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Button('hideSystemBar')
          .onClick(() => {
            this.hide()
          })

        Button('showSystemBar')
          .onClick(() => {
            this.show()
          })

        Button('setSystemBarBgBlack')
          .onClick(() => {
            let sysBarProps: window.SystemBarProperties = {
              statusBarColor: '#000000',
              statusBarContentColor: '#ffffff'
            };
            this.windowClass.setWindowSystemBarProperties(sysBarProps);
          })

        Button('setSystemBarBgWhite')
          .onClick(() => {
            let sysBarProps: window.SystemBarProperties = {
              statusBarColor: '#ffffff',
              statusBarContentColor: '#000000'
            };
            this.windowClass.setWindowSystemBarProperties(sysBarProps);
          })

        TextInput()

        Button('changeKeyboardAvoidMode')
          .onClick(() => {
            if (this.keyboardAvoidMode === KeyboardAvoidMode.OFFSET) {
              this.keyboardAvoidMode =KeyboardAvoidMode.RESIZE
              this.getUIContext().setKeyboardAvoidMode(this.keyboardAvoidMode);
            } else {
              this.keyboardAvoidMode =KeyboardAvoidMode.OFFSET
              this.getUIContext().setKeyboardAvoidMode(this.keyboardAvoidMode);
            }
          })
      }
      .width('100%')

      Button('submit')
        .margin(10)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor('#fffffae5')
  }

  hide() {
    this.windowClass.setWindowLayoutFullScreen(true);
    this.windowClass.setWindowSystemBarEnable([]);
  }

  show() {
    this.windowClass.setWindowLayoutFullScreen(false);
    this.windowClass.setWindowSystemBarEnable(['status', 'navigation']);
  }
}

HarmonyOS NEXT project practice：Window Immersive Effect

victordeng — Sun, 29 Jun 2025 09:24:33 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-immersive

Overview of Immersive Effects
Immersive mode usually refers to making the interface of an application more focused on content, without allowing users to be distracted by irrelevant elements. In mobile applications, full screen window elements include a status bar, application interface, and navigation bar (as shown below). Immersive page development often achieves the following goals by extending the application page to the status bar and navigation bar:

Unify the color tone of the page and avoidance areas to provide users with a better visual experience.
Maximize the use of the screen's visible area to provide a larger layout space for the page.
Provide a fully immersive experience, allowing users to immerse themselves without being distracted by other things.

Two solutions to achieve immersive effects
Option 1: Set the window to full screen mode
Option 2: Expand Component Security Zone
Recommend using option one, which has the advantage of achieving immersive effects for the entire application (all pages).

interface

setWindowLayoutFullScreen(isLayoutFullScreen: boolean): Promise<void>

Set whether the layout of the main window or sub window is immersive layout, using Promise asynchronous callback. Starting from API version 14, this interface does not take effect when used in the free multi window mode of 2-in1 devices or tablet devices (which can be turned on by clicking the free multi window button in the device control center).
When the immersive layout takes effect, the layout does not avoid the status bar and bottom navigation area, and components may overlap with them.
When the non immersive layout takes effect, the layout avoids the status bar and bottom navigation area, and components do not overlap with them.

Prerequisite:
Windows provide some basic capabilities for managing windows, including creating and destroying the current window, setting various properties, and managing and scheduling between windows.
This module provides the following commonly used functions related to windows:
Window: The current window instance, the basic unit managed by the window manager.
WindowStage: Window Manager. Manage various basic window units.

Here is the practical code to achieve immersive effects:

import { window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct SetFullWindowPage {
  @StorageProp('topRectHeight')
  topRectHeight: number = 0;
  @StorageProp('bottomRectHeight')
  bottomRectHeight: number = 0;

  build() {
    Column({ space: 10 }) {
      Text('SetFullWindow Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text(`topRectHeight = ${this.topRectHeight}`)
      Text(`bottomRectHeight = ${this.bottomRectHeight}`)

      Button('SetFullWindow')
        .onClick(() => {
          this.setFullWindow(true)
        })
      Button('CancelFullWindow')
        .onClick(() => {
          this.setFullWindow(false)
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#cccccc')
    .padding({ top: this.topRectHeight, bottom: this.bottomRectHeight })
  }

  async setFullWindow(isLayoutFullScreen: boolean = true) {
    let context = getContext(this) as common.UIAbilityContext;
    let windowClass = await window.getLastWindow(context);
    // 1. 设置窗口全屏
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
      console.info('Succeeded in setting the window layout to full-screen mode.');
    }).catch((err: BusinessError) => {
      console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
    });
    // 2. 获取布局避让遮挡的区域
    let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
    let avoidArea = windowClass.getWindowAvoidArea(type);
    let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
    AppStorage.setOrCreate('bottomRectHeight', px2vp(bottomRectHeight));
    type = window.AvoidAreaType.TYPE_SYSTEM; // 以状态栏避让为例
    avoidArea = windowClass.getWindowAvoidArea(type);
    let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度
    AppStorage.setOrCreate('topRectHeight', px2vp(topRectHeight));

    // 3. 注册监听函数，动态获取避让区域数据
    windowClass.on('avoidAreaChange', (data) => {
      if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
        let topRectHeight = data.area.topRect.height;
        AppStorage.setOrCreate('topRectHeight', px2vp(topRectHeight));
      } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        let bottomRectHeight = data.area.bottomRect.height;
        AppStorage.setOrCreate('bottomRectHeight', px2vp(bottomRectHeight));
      }
    });
  }
}

HarmonyOS NEXT project practice：Get window properties

victordeng — Sun, 29 Jun 2025 09:20:01 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window#getwindowproperties9

In the Stage model, typical scenarios for managing application windows include:

Set the main window properties and target page of the application
Set application sub window properties and target page
Immersive ability in the experience window
Set floating window
Listening window non interactive and interactive events

The following is an introduction to how to obtain window properties:
Step 1: Get the Window class

getLastWindow(ctx: BaseContext): Promise<Window>

Retrieve the top-level child window within the current application. If there are no application child windows, return to the main application window and use Promise asynchronous callback.
Step 2: Obtain the properties of the current window

getWindowProperties(): WindowProperties

Retrieve the properties of the current window and return WindowProperties.

Explanation of each attribute of WindowProperties

WindowRect: Window size, which can be obtained during the onPageShow or onForeground stages of the page lifecycle or application lifecycle.
DrawableRect: The size of the drawable area within the window, where the upper boundary on the left is calculated relative to the window. In the Stage model, this interface needs to be used after calling loadContent() or setUIContent() to load the page content.
Type: Window type.
IsFullScreen: Whether it is full screen, default is false. True represents full screen; False indicates non full screen.
IsLayoutFullScreen: Whether the window is immersive and in full screen mode (not in floating windows, split screens, or other scenes), defaults to false. True means immersive and in full screen mode; False indicates non immersive or non full screen mode.
Focused: Whether the window can be focused, default is true. True indicates that it can be focused; False means unfocused.
Touchable: Whether the window is touchable, defaults to true. True means touchable; False means not touchable.
Brightness: Screen brightness. This parameter is a floating point number, and the adjustable brightness range is [0.0, 1.0]. When taken as 1.0, it represents the maximum brightness value. If the window does not have a brightness value set, it indicates that the brightness follows the system, and the obtained brightness value is -1.
IsKeepScreenOn: Whether the screen is constantly on, default is false. True indicates constant brightness; False means not frequently lit.
IsPrivacy Mode: Privacy mode, default to false. True indicates that the mode is enabled; False indicates that the mode is turned off.
IsTransparent: Whether the window background is transparent. The default is false. True represents transparency; False indicates opacity.
ID: Window ID, default value is 0, this parameter should be an integer.
Display ID: The ID of the screen where the window is located, which defaults to the main screen ID. This parameter should be an integer.

Taking the width and height of obtaining window properties as an example, the actual code is as follows:

import { common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct GetWindowPropertiesPage {
  @State windowWidth: number = 0
  @State windowHeight: number = 0

  aboutToAppear(): void {
    try {
      let context = getContext(this) as common.UIAbilityContext;
      let promise = window.getLastWindow(context);
      promise.then((data) => {
        //获取窗口对象
        let windowClass = data;
        try {
          //获取窗口属性
          let properties = windowClass.getWindowProperties();
          let rect = properties.windowRect;
          //rect.width: 窗口宽度；rect.height: 窗口高度
          this.windowWidth = px2vp(rect.width)
          this.windowHeight = px2vp(rect.height)
        } catch (exception) {
          console.error('Failed to obtain the window properties. Cause: ' + JSON.stringify(exception));
        }
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
      }).catch((err: BusinessError) => {
        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
      });
    } catch (exception) {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
    }
  }

  build() {
    Column({ space: 10 }) {
      Text('GetWindowProperties Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text(`windowWidth = ${this.windowWidth}`)
      Text(`windowHeight = ${this.windowHeight}`)
    }
    .height('100%')
    .width('100%')
  }
}

HarmonyOS NEXT project practice：use openCustomDialog

victordeng — Sun, 29 Jun 2025 09:15:18 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-uicontext-custom-dialog

Due to various limitations in the use of the Customs Dialogue Controller, it does not support dynamic creation or refresh. In relatively complex application scenarios, it is recommended to use the openCustoms Dialog interface provided by the PromptAction object obtained from UIContext to implement custom pop ups.

The openCustoms dialog can be configured with isModal to achieve modal and non modal pop ups. When isModal is true, the pop-up box is a modal pop-up window. When isModal is false, the pop-up box is a non modal pop-up window.

life cycle
The pop-up box provides a lifecycle function to notify users of the lifecycle of the pop-up box. The triggering sequence of the lifecycle is: onWillAppeal ->onDiAppeal ->onWillDisappear ->onDiDisappear.

There are two ways to create custom pop ups for openCustoms dialog:

OpenCustoms Dialog (passed as Component Content): Encapsulating content through Component Content can decouple it from the UI interface, making calls more flexible and meeting the encapsulation needs of developers. It has high flexibility, with completely customizable pop-up box styles, and can dynamically update the parameters of the pop-up box using the updateCustoms Dialog method after it is opened.
OpenCustoms Dialog (in the form of a builder): Compared to Component Content, the builder must be bound to the context and have a certain coupling with the UI. This method uses a default pop-up style, which is suitable for developers who want to achieve the same effect as the default style of system pop ups. This article introduces the creation of custom pop ups for WidgetContent through parameter input, and the usage of pop ups in builder format can refer to openCustomizalDialog.

Implementation steps:

Create WidgetContent. WidgetContent is used to define the content of custom pop ups. Among them, wrapBuilder (buildText) encapsulates custom components, and new Params (this. message) is the input parameter for custom components, which can be defaulted or passed in as the basic data type.
Open the custom pop-up box. The pop-up box opened by calling the openCustomizalDialog interface defaults to a pop-up box with customStyle set to true, which means that the content style of the pop-up box is displayed completely according to the contentNode custom style.
Close the custom pop-up box. Due to the need to pass in the Component Content corresponding to the pop-up box to be closed for the closeCustoms Dialog interface. Therefore, if you need to set a closing method in the pop-up box, you can refer to the complete example to encapsulate the static method for implementation. If you need to release the corresponding WidgetContent after closing the pop-up box, you need to call the dispose method of WidgetContent.

Example code:

import { BusinessError } from '@kit.BasicServicesKit';
import { ComponentContent, promptAction, UIContext } from '@kit.ArkUI';


@Entry
@Component
struct OpenCustomDialogPage {
  build() {
    Column({ space: 10 }) {
      Text('OpenCustomDialogPage')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('open dialog').onClick(() => {
        Dialog.setContext(this.getUIContext());
        Dialog.setOptions({ alignment: DialogAlignment.Center });
        let contentNode: ComponentContent<Object> =
          new ComponentContent(this.getUIContext(), wrapBuilder(buildText), new Params('hello, you open a dialog'));
        Dialog.setContentNode(contentNode);
        Dialog.openDialog()
      })
    }
    .height('100%')
    .width('100%')
  }
}

@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(30)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
    Button('Close')
      .onClick(() => {
        Dialog.closeDialog();
      })
  }
  .backgroundColor('#FFF0F0F0')
  .padding(20)
  .borderRadius(8)
  .clip(true)
  .margin(20)
}

class Dialog {
  static ctx: UIContext;
  static contentNode: ComponentContent<Object>;
  static options: promptAction.BaseDialogOptions;

  static setContext(context: UIContext) {
    Dialog.ctx = context;
  }

  static setContentNode(node: ComponentContent<Object>) {
    Dialog.contentNode = node;
  }

  static setOptions(options: promptAction.BaseDialogOptions) {
    Dialog.options = options;
  }

  static openDialog() {
    if (Dialog.contentNode !== null) {
      Dialog.ctx.getPromptAction()
        .openCustomDialog(Dialog.contentNode, Dialog.options)
        .then(() => {
          console.info('OpenCustomDialog complete.');
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
        })
    }
  }

  static updateDialog(options: promptAction.BaseDialogOptions) {
    if (Dialog.contentNode !== null) {
      Dialog.ctx.getPromptAction().updateCustomDialog(Dialog.contentNode, options)
        .then(() => {
          console.info('UpdateCustomDialog complete.');
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`);
        })
    }
  }

  static closeDialog() {
    if (Dialog.contentNode !== null) {
      Dialog.ctx.getPromptAction()
        .closeCustomDialog(Dialog.contentNode)
        .then(() => {
          console.info('CloseCustomDialog complete.');
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);
        })
    }
  }
}

class Params {
  text: string = "";

  constructor(text: string) {
    this.text = text;
  }
}

HarmonyOS NEXT project practice：import and use axios

victordeng — Sun, 29 Jun 2025 09:04:26 +0000

reference material:
https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios

What is Axios?
Axios is a promise based network request library that works on Node.js and browsers. It is polymorphic (i.e. the same set of code can run in both the browser and Node.js). On the server side, it uses the native Node.js HTTP module, while on the client side (browser side), it uses XMLHttpRequests.

Introduction to Axios of HarmonyOS Third Party Library:
This is a promise based network request library that can run Node.js and in browsers. This library is adapted based on the Axios original library v1.3.4 version, allowing it to run on OpenHarmony while retaining its existing usage and features.

HTTP request
Promise API
Request and response interceptors
Convert the data of request and response
Automatically convert JSON data data

Initiate a GET request:
Axios supports generic parameters, but since ArkTS no longer supports any type, the specific type of the parameter needs to be specified. For example: Axios.get, D=any>(URL)

T: It is a response data type. When sending a POST request, the client may receive a JSON object. T is the type of this JSON object. By default, T is any, which means it can receive any type of data.
R: It is the type of response body. When the server returns a response, the response body is usually a JSON object. R is the type of this JSON object. By default, R is AxiosResponse, which means that the response body is an AxiosResponse object with a data property of type T
D: It is the type of request parameter. When sending a GET request, some query parameters may be added to the URL. D is the type of these query parameters. When the parameter is empty, D is of null type.

app store

ohpm install @ohos/axios

Permission required

ohos.permission.INTERNET

Modify the modular.json5 configuration file to add network permissions:

    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

Create BaseRequest utility class

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse }  from '@ohos/axios'
import { promptAction } from '@kit.ArkUI'

class BaseRequest {
  instance: AxiosInstance;

  //构造器
  constructor(config: AxiosRequestConfig<AxiosResponse>) {
    this.instance = axios.create(config);
    // 请求拦截
    this.instance.interceptors.request.use((config) => {
        const token = '获取自己本地储存的token';
        if (token) {
          config.headers.token = token;
        }
        console.log('Request config', config);
        return config;
      }, (err) => {
        console.error('Request error', err);
        return Promise.reject(err);
      }
    );

    // 响应拦截
    this.instance.interceptors.response.use((response: AxiosResponse<any, any>) => {
        let data = response.data;
        console.log('Response data', data);
        if (typeof data === 'string') {
          data = JSON.parse(data.trim());
        }
        const { code, msg } = data;
        if (code === 200) {  // 处理成功情况
            return response.data;
        } else if (code === 400) { // 处理错误码
          promptAction.showToast({
            message: msg
          });
          return Promise.reject(new Error(msg));
        } else if (code === 500) {
          promptAction.showToast({
            message: msg
          });
          return response.data;
        } else { // 处理其他错误码
          promptAction.showToast({
            message: msg
          });
          return Promise.reject(new Error(msg));
        }
      }, (err) => {
        console.error('Response error', err);
        return Promise.reject(err);
      }
    );
  }

  request<T = any>(config: AxiosRequestConfig): Promise<T> {
    console.log('Request config', config);
    return this.instance.request<any, T>(config);
  }

  get<T = any>(config: AxiosRequestConfig): Promise<T> {
    return this.request<T>({ ...config, method: 'GET' });
  }

  post<T = any>(config: AxiosRequestConfig): Promise<T> {
    return this.request<T>({ ...config, method: 'POST' });
  }
}

export const axiosAPI = new BaseRequest ({
  baseURL: '自己接口地址',
  timeout: 60000
})

call

import { axiosAPI } from '../BaseRequest'

export const getList = (id:string) =>{
  return axiosAPI.get<object>({url:'自己的请求地址',
    params:{
      "id":id
    }})
}

HarmonyOS NEXT project practice：Network status monitoring

victordeng — Sun, 29 Jun 2025 08:59:11 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-network-61

@ohos.net connection (network connection management)
Network connection management provides basic capabilities for managing networks, including priority management of multiple network connections such as WiFi/cellular/Ethernet, network quality assessment, subscribing to default/specified network connection status changes, querying network connection information, DNS resolution, and other functions.

connection.createNetConnection
Create a NetConnection object, netSpecifier, to specify the various features of the network to be focused on; Timeout is the timeout period (in milliseconds); NetSpecifier is a necessary condition for timeout, and if neither is present, it indicates attention to the default network.

Idea: By using the ability of @ ohos.net.connection, when the network connection status changes, judge whether the current network can access the Internet, and store the judgment results in AppStorage. When it is necessary to determine the network connection status, directly obtain the results from AppStore.

prerequisite:
Modify the modular.json5 configuration file to add network permissions:

    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      }
    ]

Add the NetworkUtil utility class:

import { connection } from "@kit.NetworkKit";
import { BusinessError } from "@kit.BasicServicesKit";
import { promptAction } from "@kit.ArkUI";
import { hilog } from "@kit.PerformanceAnalysisKit";

export class NetworkUtil {
  private static netConnection: connection.NetConnection | undefined = undefined;
  public static JUDGE_NET_TAG: string = 'NetworkUtil.netConnection.isUseful';

  /**
   * 工具注册。
   * 作用：监控网络状态
   */
  static register() {
    if (NetworkUtil.netConnection === undefined) {
      NetworkUtil.init();
    }
  }

  /**
   * 获取网络连接状态
   * @returns boolean
   * true: 有网络
   * false: 无网络
   */
  static getStatus(): boolean {
    return NetworkUtil.judgeHasNet()
  }

  static continueWhenNetUsable(callback: () => void) {
    if (NetworkUtil.getStatus()) {
      callback()
    } else {
      promptAction.showToast({
        message: 'The network is not worked, please check your network',
        duration: 2000
      });
    }
  }

  private static init() {
    NetworkUtil.netConnection = connection.createNetConnection();
    NetworkUtil.netConnection.register(() => {
      Logger.info('connection register success');
    });

    NetworkUtil.netConnection.on('netAvailable', (data) => {
      Logger.info('NetworkUtil netAvailable ');
      AppStorage.setOrCreate(NetworkUtil.JUDGE_NET_TAG, NetworkUtil.judgeHasNet());
    });

    NetworkUtil.netConnection.on('netUnavailable', () => {
      Logger.info('NetworkUtil netUnavailable ');
      AppStorage.setOrCreate(NetworkUtil.JUDGE_NET_TAG, NetworkUtil.judgeHasNet());
    });

    NetworkUtil.netConnection.on('netCapabilitiesChange', (data: connection.NetCapabilityInfo) => {
      Logger.info('NetworkUtil netCapabilitiesChange');
      AppStorage.setOrCreate(NetworkUtil.JUDGE_NET_TAG, NetworkUtil.judgeHasNet());
    });

    // 订阅网络连接信息变化事件。调用register后，才能接收到此事件通知
    NetworkUtil.netConnection.on('netConnectionPropertiesChange', (data: connection.NetConnectionPropertyInfo) => {
      Logger.info('NetworkUtil netConnectionPropertiesChange');
      AppStorage.setOrCreate(NetworkUtil.JUDGE_NET_TAG, NetworkUtil.judgeHasNet());
    });

    NetworkUtil.netConnection.on('netLost', () => {
      Logger.info('NetworkUtil netLost');
      AppStorage.setOrCreate(NetworkUtil.JUDGE_NET_TAG, NetworkUtil.judgeHasNet());
    });
  }

  private static judgeHasNet(): boolean {
    try { // 获取当前网络连接
      let netHandle = connection.getDefaultNetSync();

      // 0-100 为系统预留的连接
      if (!netHandle || netHandle.netId < 100) {
        return false;
      }

      // 获取连接的属性
      let netCapability = connection.getNetCapabilitiesSync(netHandle);
      let cap = netCapability.networkCap;
      if (!cap) {
        return false;
      }

      for (let em of cap) {
        if (connection.NetCap.NET_CAPABILITY_VALIDATED === em) {
          return true;
        }
      }
    } catch (e) {
      let err = e as BusinessError;
      Logger.info('get netInfo error ：' + JSON.stringify(err));
    }
    return false;
  }
}

class Logger{
  static info(...args: string[]){
    hilog.info(0x0000, '-logger-', getFormat(args), args);
  }
}

function getFormat(args: string[]) {
  let format = ''
  for (let i = 0; i < args.length; i++) {
    if (i == 0) {
      format = '%{public}s'
    } else {
      format += ', %{public}s'
    }
  }
  return format
}

Sample code for using the NetworkUtilPage page:

import { NetworkUtil } from '../../utils/NetworkUtil'
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct NetworkUtilPage {
  //用法一：通过状态管理实时获取网络状态
  @StorageProp(NetworkUtil.JUDGE_NET_TAG)
  isNetConnectionUseful: boolean = true;

  aboutToAppear(): void {
    NetworkUtil.register()
  }

  build() {
    Column({ space: 10 }) {
      Text('NetworkUtil Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text() {
        Span('watch network status is ')
        Span(JSON.stringify(this.isNetConnectionUseful))
          .fontColor(this.isNetConnectionUseful ? Color.Green : Color.Red)
          .fontWeight(600)
      }

      Button('getNetworkStatus').onClick(() => {
        //用法二：获取当前的网络状态
        const status = NetworkUtil.getStatus()
        promptAction.showToast({
          message: 'The network status is ' + JSON.stringify(status),
          duration: 5000
        });
      })

      Button('continue When Net Usable').onClick(() => {
        //用法三：有网络继续后续动作，无网则中断后续动作并且弹窗提示用户设置网络。
        NetworkUtil.continueWhenNetUsable(() => {
          //当网络中断，弹窗提示用户设置网络且不执行后续动作
          //当网络可用，继续执行
          promptAction.showToast({
            message: 'have net, continue!',
            duration: 5000
          });
        })
      })
    }
    .height('100%')
    .width('100%')
  }
}

HarmonyOS NEXT project practice：Using an emitter for inter thread communication

victordeng — Sun, 29 Jun 2025 08:54:23 +0000

reference material:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/itc-with-emitter

An emitter is an event handling mechanism that operates within a process, providing applications with the ability to subscribe to events, publish events, and unsubscribe from events.

Scene introduction:
The emitter is used for event processing within the same process or between different threads, with asynchronous execution of events. When using, you need to subscribe to an event first, and then publish the event. After the publication is completed, the emitter will distribute the published event to the subscribers, and the subscribers will execute the callback method set when subscribing to the event. When there is no need to subscribe to the event, the subscription should be cancelled in a timely manner to release the emitter resources.

Operating mechanism:
The emitter distributes tasks by maintaining an internal event queue. The application needs to subscribe to an event and set the callback method for that event first. After the application publishes the event, it will insert an event into the queue. The task queue will execute the tasks in the queue sequentially, and the callback method of the task subscriber will be called for event processing during task execution.

Interface Description:

Send: Publish an event once.
On: Continuously subscribe to the event until it is unsubscribed.
Once: Subscribe to an event once.
Off: Cancel all subscription events. After canceling the event subscription, all subscribed events will no longer receive messages for that event.

Instructions for canceling event subscription:

When there is no need to subscribe to an event, it is necessary to unsubscribe in a timely manner to avoid memory leaks.
After using the off interface to unsubscribe from an event, events that have been published through the emit interface but have not yet been executed will be canceled.

Code example:

import { emitter } from '@kit.BasicServicesKit'

@Entry
@Component
struct EmitterPage {
  @State onResult: string = 'Emitter.on result is : '
  @State onceResult: string = 'Emitter.once result is : '
  @State emitResult: string = 'Emitter.emit result is : '
  @State count: number = 0

  build() {
    Column({ space: 10 }) {
      Text('Emitter Page')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text(`count=${this.count}`)

      Button('Emitter.on').onClick(() => {
        // 定义一个eventId为1的事件。
        let event: emitter.InnerEvent = {
          eventId: 1
        };
        // 定义一个事件的回调处理函数，当收到对应的事件后执行回调函数
        let callback: Callback<emitter.EventData> = (eventData: emitter.EventData) => {
          console.info(`eventData: ${JSON.stringify(eventData)}`);
          this.onResult = JSON.stringify(eventData)
        }
        // 收到eventId为1的事件后执行回调函数
        emitter.on(event, callback);
      })
      Text(this.onResult)

      Button('Emitter.once').onClick(() => {
        // 定义一个eventId为1的事件。
        let event: emitter.InnerEvent = {
          eventId: 1
        };
        // 定义一个事件的回调处理函数，当收到对应的事件后执行回调函数
        let callback: Callback<emitter.EventData> = (eventData: emitter.EventData) => {
          console.info(`eventData: ${JSON.stringify(eventData)}`);
          this.onceResult = JSON.stringify(eventData)
        }
        // 收到eventId为1的事件后执行回调函数
        emitter.once(event, callback);
      })
      Text(this.onceResult)

      Button('Emitter.emit').onClick(() => {
        this.count = this.count + 1
        // 定义一个eventId为1的事件，事件优先级为Low。
        let event: emitter.InnerEvent = {
          eventId: 1,
          priority: emitter.EventPriority.LOW
        };
        let eventData: emitter.EventData = {
          data: {
            content: 'emitter',
            count: this.count,
            id: 1,
            isEmpty: false
          }
        };
        // 发送eventId为1的事件，事件内容为eventData。
        emitter.emit(event, eventData);
      })
      Text(this.emitResult)

      Button('Emitter.off').onClick(() => {
        // 取消eventId为1的事件。
        emitter.off(1);
      })
    }
    .height('100%')
    .width('100%')
  }
}

HarmonyOS NEXT project practice：Share content through QQ

victordeng — Sun, 29 Jun 2025 08:48:33 +0000

Prerequisite: QQ SDK has been imported

reference material:
https://wiki.connect.qq.com/harmonyos_sdk%e6%8e%a5%e5%8f%a3%e8%af%b4%e6%98%8e

The following is the actual code practice of the HarmonyOS project shared through QQ:
Preconditions:
Modify the oh-package.json5 file to integrate CryptoJS dependencies

  "dependencies": {
    "@tencent/wechat_open_sdk": "1.0.11",
    "@ohos/crypto-js": "^2.0.4"
  }

Function: Generate signatures using the HMAC-SHA1 algorithm

Share business development process instructions:
To ensure the credibility of business shared data, it is necessary to sign the shared data. Taking the example of sharing graphic and text ark messages, we recommend the following process for business:
Business client: When users share, the shared UGC content is transmitted to the business backend.
Business backend: Use user UGC data to assemble ark business JSON data (ShareData. shareJson), generate timestamps (ShareData. timestamp) and random natural numbers (ShareData. once) in ShareData, and perform signature calculations on these three parts of data. The above data is then called back to the business client, which initiates sharing by calling the interconnection sharing interface.

Parameter description:
Type: Sharing type, currently supports graphic and text ark type 2
ShareData: Share data, including shared business data and signed partial data

The signature steps are as follows:
Splicing the original signed text. The splicing rule for the original signature string is:

Request method+request domain name+request path+? +Request string+Share content JSON string

Request method: Fixed as POST, note all uppercase
Interface domain name: fixed as connect.qq.com
Request path: fixed as/share
Request string: concatenate signature parameters and values in lexicographic order into a string, such as: appid=222222&nonce=1234&ts=1618924373
Request body: a JSON string composed of shared content

Assuming the sharing parameters are as follows:

appid：222222
nonce：1234
ts：1618924373
Share content: {"msc_style": 0, "title": "title", "summary": "content", "brief": "internet sharing", "URL":“ https://www.qq.com ","picture_url":" https://www.qq.com/picture.png "} The original text of the signature spelled out according to the rules is as follows:

POSTconnect.qq.com/share?appid=222222&nonce=1234&ts=1618924373&{"msg_style": 0, "title":"标题", "summary":"内容", "brief":"互联分享", "url":"https://www.qq.com", "picture_url":"https://www.qq.com/picture.png"}

Calculate Signature This step generates a signature string. Firstly, use the HMAC-SHA1 algorithm to sign the original signature string obtained in the previous step, and then encode the generated signature string using Base64 to obtain the final signature string. Assuming the appkey is fakeAppKey, the final signature result obtained is:

Ngyk0JS5pQR8ffygeeMHFUNFQQA=

Add QQUtil.ets

import { CryptoJS } from '@ohos/crypto-js'

export class QQUtil {
  /**
   * 分享
   * @param title 标题
   * @param summary 内容
   * @param brief QQ信息列表显示的内容
   * @param imageUrl 图片链接
   * @param url 跳转链接
   */
  static share(title: string, summary: string, brief: string, imageUrl: string, url: string) {
    let content = new Object({
      msg_style: 0,
      title: title,
      summary: summary,
      brief: brief,
      url: url,
      picture_url: imageUrl
    })
    let shareData: ShareData = new ShareData()
    shareData.timestamp = Date.parse(new Date().toString()) / 1000
    shareData.nonce = Math.floor(Math.random() * 100000000 + 100)
    shareData.shareJson = JSON.stringify(content)
    let signContent = 'POSTconnect.qq.com/share?appid=' + AppConfigs.qqsdkAppId.toString()
      + '&nonce=' + shareData.nonce.toString()
      + '&ts=' + shareData.timestamp.toString()
      + '&' + shareData.shareJson
    const hmac = CryptoJS.HmacSHA1(signContent, AppConfigs.qqsdkAppKey);
    let sign = hmac.toString(CryptoJS.enc.Base64);

    shareData.shareJsonSign = sign
    const qqOpenApi = QQUtil.getQQOpenApi()
    qqOpenApi.share(2, shareData).then((result: ShareResult) => {
      Logger.info(`qqOpenApi.share, result=${JSON.stringify(result)}`)
      switch (result.resultType) {
        case ShareResultType.Success: {
          promptAction.showToast({ message: "分享成功" })
        }
          break
        case ShareResultType.Cancel: {
          let msg: string = result.message ?? "用户取消分享"
          promptAction.showToast({ message: msg })
        }
          break
        case ShareResultType.Error: {
          let msg: string = result.message ?? "分享失败"
          promptAction.showToast({ message: msg })
        }
          break
      }
    })
      .catch((err: BusinessError) => {
        Logger.error(`error, code=${JSON.stringify(err.code)}, message=${JSON.stringify(err.message)}`)
      })
  }
}

HarmonyOS NEXT project practice：import QQ SDK

victordeng — Sun, 29 Jun 2025 08:43:30 +0000

reference material
Mobile application access process:
https://wiki.connect.qq.com/%e7%a7%bb%e5%8a%a8%e5%ba%94%e7%94%a8%e6%8e%a5%e5%85%a5%e6%b5%81%e7%a8%8b

HarmonyOS_SDK environment setup:
https://wiki.connect.qq.com/harmonyos_sdk%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba

SDK Demo Download:
https://wiki.connect.qq.com/sdk%e4%b8%8b%e8%bd%bd

Mobile application access process:
Mobile applications can access the Internet Open Platform through the following steps[ https://connect.qq.com] ：
Developer Registration>Mobile Application Application>Mobile Application Development>Call OpenAPI

Developer registration On the homepage of QQ Internet Open Platform http://connect.qq.com/ Click the "Login" button in the upper right corner and log in with your QQ account. After successful login, you will be redirected to the developer registration page, where you need to submit your company or personal basic information.
Mobile application access application
Before accessing the mobile application, it is necessary to first apply and obtain the corresponding appid and appkey to ensure that the mobile application and user can be verified and authorized correctly in the subsequent process.
If your PC application has already been connected to Tencent Open Platform, you do not need to obtain a new appid and appkey. Simply use the appid obtained when connecting to Tencent Open Platform to add it as a mobile application.
Add mobile application: After the developer successfully registers, they will be redirected to the "Management Center" page. Click on 'Add Mobile App' and fill in the corresponding information.
After filling in the mobile application information, click "OK" to complete the registration of the mobile application. Enter the management center and you can view the appid and appkey obtained by the mobile application
Mobile application development Entering the console page, you can see that the mobile application application is in the "development" status. To launch a mobile application, the first step is to develop the mobile application, which is to complete the QQ login function and place the QQ login button normally.
Use OpenAPI provided by QQ Internet After completing the development of the mobile application, you can click on "Apply for Online" under "Current Process" on the "Console" page of the "Management Center", and the process will be in the "Review" state. After submission for review, Tencent will complete the review within two working days. Once the review is approved, the mobile application will be officially launched.

Development Description
The QQ login function uses the internationally recognized OAuth2.0 protocol for verification and authorization, and can be used for mobile application development through the following methods:
(1) QQ Internet provides SDK development packages for iOS and Android respectively. If QQ is installed on the phone, start QQ on the phone for SSO login. If not installed, log in through the mobile system's browser. The login process has been integrated into the SDK, and it is recommended that developers use this method. See: SDK Download
(2) According to the QQ login OAuth2.0 protocol, independently developed, this method has a high degree of customization and can be used for mobile applications that require integration with existing systems.

Hongmeng project configuration:
Add dependencies and execute commands

ohpm i @tencent/qq-open-sdk

After running, you can see the newly added dependency libraries in the project level oh-package.json5 file

  "dependencies": {
    "@tencent/qq-open-sdk": "^1.0.3"
  }

Modify module configuration:
Modify the module.json5 file of entry and configure skills

        "skills": [
          {
            "entities": [
              "entity.system.home",
              "entity.system.browsable"
            ],
            "actions": [
              "action.system.home",
              "ohos.want.action.viewData"
            ],
            "uris": [
              {
                "scheme": "qqopenapi", // 接收 QQ 回调数据
                "host": "xxxxxxxxx", // 业务申请的互联 appId，如果填错会导致 QQ 无法回调
                "pathRegex": "\\b(auth|share)\\b",
                "linkFeature": "Login",
              }
            ]
          }
        ]

Continue to modify the modular.json5 file of entry and add queryPlans

    "querySchemes": [
      "https",
      "qqopenapi"
    ]

Add SDK tool classes:
Add QQOpenApiHolder

import { SdkConfig } from '@heduohao/bases'
import { IQQOpenApi, OpenApiConfig, QQOpenApiFactory } from '@tencent/qq-open-sdk'

export class QQOpenApiHolder {
  private static qqOpenApi: IQQOpenApi

  private constructor() {

  }

  public static create(): IQQOpenApi {
    if (!QQOpenApiHolder.qqOpenApi) {
      let openApiOption: OpenApiConfig = {
        forceEnableWeb: false,
        autoHandleAuthResult: true,
      }

      QQOpenApiHolder.qqOpenApi =
        QQOpenApiFactory.createApi(SdkConfig.QQ_SDK_APP_ID, openApiOption)
    }
    return QQOpenApiHolder.qqOpenApi
  }

  public static getInstance(): IQQOpenApi {
    return QQOpenApiHolder.qqOpenApi
  }
}

EntryAbility connects to QQOpenApiHolder

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    QQOpenApiHolder.create()
  }

  onNewWant(want: Want, _launchParam: AbilityConstant.LaunchParam): void {
    QQOpenApiHolder.getInstance()?.handleResult(want)
  }