DEV Community: CoderFeri

Mastering Custom Components in HarmonyOS NEXT

CoderFeri — Fri, 27 Jun 2025 09:35:11 +0000

Mastering Custom Components in HarmonyOS NEXT

I'm Feri, a programmer with over 12 years of experience, having been involved in development projects, led teams, and even ventured into entrepreneurship. Proficient in Java, embedded systems, HarmonyOS, artificial intelligence, and more, I'm dedicated to the growth of programmers. I look forward to walking this journey alongside you! Where there is a will, there is a way!

In the development world of HarmonyOS NEXT, have you ever been frustrated by repeatedly writing similar UI interfaces? Do you long for the "code magic" that allows you to combine interface elements as freely as building blocks? Don't worry! Today, I'll guide you to unlock the "magic weapon" of custom components, enabling you to effortlessly build personalized UIs and bid farewell to reinventing the wheel!

1. Custom Components: Your Exclusive UI "Magic Factory"

On the stage of ArkUI, all UI elements are components. System components are like standardized parts mass-produced by a factory, while custom components are unique crafts you create with your own hands. Compared with the lightweight @builder reuse mechanism, custom components are like a "super factory." They can not only reuse UI but also encapsulate complex business logic, making them an essential skill for improving development efficiency in daily work.

2.Grammar Basics: Three Steps to Set Up a Custom Component "Production Line"

The grammar of custom components isn't overly complex. Remember these three key elements, and you can easily set up your own "production line":

@Entry
@Component
struct Index {
  build() {

Here, the @Entry is the "key to the UI page's door," the @Component decorator labels the component as "customized," and the build() function serves as the "design blueprint" that describes what the component looks like.

3.Hands-On Operation: Creating Your First Custom Component from Scratch

Curious about how to create a custom component? Follow these steps, and you'll have your very own component in no time:
Remember, the name of a custom component cannot be the same as that of a system component, just as everyone needs a unique ID.
Tips for Component Creation
struct: The "skeleton" of a custom component, implemented based on struct. You can instantiate it without using new, which is both concise and efficient.
@Component: The exclusive "customization badge" that can only decorate data structures declared with struct, marking it as a custom component.

build() function: The core "design blueprint" that must be defined, used to describe the UI layout of the component.

@Entry: The "storefront sign" of the page. There can be at most one per page, determining where the user interface starts.

@Preview: The component's "fitting room." Use it to preview the component's effect separately, making it convenient to adjust the design.

4.Practice Makes Perfect: Creating Personalized Components and Mastering Parameter Passing

Theory alone isn't enough. Let's roll up our sleeves and practice! Try creating and using custom components, and explore different ways to use them:
Reference Example 1: A Simple Interactive Component

Reference Example 2: File-Splitting Management
Separate component definition and usage to make the code neater:
HelloComponent.ets
Page.ets

5.Advanced Techniques: Adding a "Brain" to Components

Custom components aren't just about looks; they can also be "intelligent"! Besides the build() function, you can add member functions and variables:
However, note that static functions and variables aren't supported here, and all member functions and variables are private, like the component's "personal secrets."
Practical Case: An Intelligent Interactive Component

When using it, you can also pass parameters to overwrite default values or even pass in custom functions:

6.Beautifying Components: Creating "Gorgeous Looks" with Styles and Events

Custom components can also be stunningly beautiful! You can easily set common styles and events using dot notation:

However, it's important to note that styles are actually applied to an invisible container outside the component. Take this example:

You'll notice that the red background isn't directly applied to the Button but rather to the invisible container wrapping it. Mastering this feature allows you to control the component's appearance more precisely!

Now, you've grasped the core techniques of custom components in HarmonyOS NEXT! From basic creation to advanced applications, these skills empower you to shine in development. Roll up your sleeves and start creating your personalized components! If you encounter any issues or have new discoveries during practice, feel free to share them in the comments. Let's explore more "code magic" together!

Mastering Debugging Techniques in HarmonyOS NEXT Development: A Comprehensive Guide

CoderFeri — Fri, 27 Jun 2025 09:34:00 +0000

Mastering Debugging Techniques in HarmonyOS NEXT Development: A Comprehensive Guide

1.Mastering Practical Debugging Techniques in HarmonyOS NEXT Development

I'm Feri, a programmer with over 12 years of experience. I've been deeply involved in development projects, led teams, and even ventured into entrepreneurship. Proficient in Java, embedded systems, Hongmeng (HarmonyOS), artificial intelligence, and more, I'm dedicated to helping fellow programmers grow. Let's journey together! Where there's a will, there's a way!

The world of programming is like a mysterious labyrinth full of unknowns. Have you ever been trapped by tricky bugs during HarmonyOS NEXT development, scratching your head without a clue? Fear not! Today, I'll be your exclusive "Debugging Special Agent Captain," guiding you through three essential practical debugging techniques to crack the code puzzles with ease!

2.Logging Detective: Unveiling Data with Preview and Logs

In the initial debugging phase, logging is like a meticulous "detective," tracking down clues in the code by printing out data. However, this "detective" has specific ways to "interrogate" different types of data:
Primitive Data: For primitive types such as numbers and booleans, you need to "dress them up" with String() or .toString() before they can make a proper "appearance."
Object Data: Complex object types require a "magic transformation" through JSON.stringify to be presented clearly.
Emulator Requirement: When using an emulator, printed messages must have a prefix. It's like attaching a unique label; otherwise, the messages will "hide" and be hard to find!
Here's a "crime scene" code example:


@Entry
@Component
struct Index {
    // Recording the click count, like a little counting book
    @State cs: number = 1;

    build() {
        Column() {
            Text('Click Count=' + this.cs);
            Button('Print for Debugging').onClick(() => {
                // Every click adds a number to our little counting book
                this.cs++;

                // Directly printing the raw number will "cause an error," like going out without proper clothes
                // console.log(this.cs)  Why does it report an error?
                // Dressing up the number allows it to be printed smoothly
                console.log(this.cs.toString());
                console.log(String(this.cs));
                // Complex object data also needs a "transformation"
                // console.log({id:1,age:22})  Why does it report an error?
                console.log(JSON.stringify({ id: 1, age: 22 }));
                // In the emulator, adding a prefix is like giving the message a navigation; otherwise, it will get lost
                console.log('Feri'+ this.cs);
            });
        }
    }
}

This method is suitable for simple debugging. It's like shining a flashlight on a small area in front of you, helping you quickly locate basic data issues.

2.Breakpoint Time Machine: Pinpointing Problem Areas

When dealing with complex issues that the logging detective can't solve, breakpoint debugging is like a "time machine," allowing you to pause the code execution and dive deep into the problem scene. Taking emulator debugging as an example, starting this "time - travel journey" only requires three steps:

Step 1: Writing the "Script" (Coding)

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

    build() {
        Row() {
            Column() {
                Text(this.message)
                   .fontSize(50)
                   .fontWeight(FontWeight.Bold);
            }
           .width("100%");
        }
       .height("100%");
    }
}

Step 2: Setting "Time Anchors" (Adding Breakpoints)

A simple click on the left side of the suspicious code line is like planting an anchor in the code's time - space.
Step 3: Launching the "Time - Travel Program"
Click the Debug icon in the upper - right corner, or select the Attach Debugger to Process icon. The code will then pause, just like pressing the pause button on a video. When the code runs to the breakpoint, it stops, highlighting the current position. This allows you to carefully observe variable states and execution flows, leaving no detail overlooked!
Debugging Function Keys: Your Exclusive "Time - Control Buttons"
During this time - travel journey, these function keys act as your "control buttons," enabling you to master the code's execution at will:
Button
Name
Function
Shortcut Key

Resume Program
When the program pauses at a breakpoint, pressing this button is like pressing the play button, and the program continues execution.
F9 (Option+Command+R on macOS)

Step Over
During single - step debugging, it directly moves to the next line. If there are sub - functions within a function, it won't step into the sub - function but executes the entire sub - function as one step, like quickly walking past a familiar street without entering the shops along the way.
F8 (F8 on macOS)

Step Into
During single - step debugging, when encountering a sub - function, it "dives" into the sub - function and continues single - step execution, like exploring a mysterious alley and not missing any details.
F7 (F7 on macOS)

Force Step Into
During single - step debugging, it forces entry into a method, like forcefully pushing open a closed door to check the secrets inside.
Alt+Shift+F7 (Option+Shift+F7 on macOS)

Step Out
When single - step debugging inside a sub - function, clicking Step Out will execute the remaining part of the sub - function and jump back to the upper - level function, like taking an elevator back to the ground floor after exploring inside a building.
Shift+F8 (Shift+F8 on macOS)

Stop
Stops the debugging task, like ending an adventure and returning to the real world.
Ctrl+F2 (Command+F2 on macOS)

Run To Cursor
Runs the program directly to the position where the cursor is located, like teleporting to a specified location.
Alt+F9 (Option+F9 on macOS)

3.HiLog Intelligence Agent: Recording the "Black Box" of Code Execution

During the long journey of application development, HiLog is like a tireless "intelligence agent," silently recording log information at key code points. These logs are like the "black box" of an airplane, documenting every detail of the application's operation.

Compared with the ordinary console, HiLog is more professional and powerful. It provides different levels of log output (info, debug, warn, error, etc.), allowing you to filter important information as needed. However, keep in mind that HiLog logs can print a maximum of 4096 bytes, and longer messages will be truncated!

import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
    build() {
        Column() {
            Button('Print for Debugging').onClick(() => {
                // The domain is like assigning different department numbers to logs
                // The tag is the log's unique name
                hilog.info(0xFF00, "slj", 'hello');
            });
        }
    }
}

For ease of use and future maintenance, it is recommended to encapsulate or use the @open/log library:
ohpm install @open/log

import log from '@open/log';
log.info(yourData);

With HiLog, you can check the application's running status at any time, analyze whether the code logic is correct, and easily identify hidden problems.

Armed with these three debugging secrets, you now have the "key" to navigate the world of HarmonyOS NEXT development! The next time you encounter a bug, don't panic. Take the initiative with these techniques! If you have any questions during practice or discover more interesting debugging methods, feel free to share them in the comments. Let's upgrade the "Debugging Special Agent Team" together!

Mastering the Differences and Connections Among State, Prop, and Link in HarmonyOS NEXT

CoderFeri — Fri, 27 Jun 2025 09:33:10 +0000

Mastering the Differences and Connections Among State, Prop, and Link in HarmonyOS NEXT

I'm Feri, a programmer with over 12 years of experience. I've been through the journey of development, team leadership, and entrepreneurship. I specialize in Hongmeng, embedded systems, Java, and artificial intelligence. Focused on programmer growth, I hope to accompany you on this journey! Where there is a will, there is a way!

Have you ever felt lost in the fog when dealing with State, Prop, and Link during HarmonyOS NEXT development? Don't worry! Today, I'll guide you to become a "code hunter" and precisely capture their mysteries, saying goodbye to confusion once and for all!

1. Unveiling the Mystery of Decorators: The "Code Magic Wand" of HarmonyOS

In the coding world of HarmonyOS, decorators are like magical "magic wands"! Without having to drastically modify the original code structure, they can inject new functions and features into classes, methods, properties, etc., instantly enhancing code readability, maintainability, and extensibility.
Decorators make a grand entrance with the unique symbol, followed by the name of a function or class. This function or class acts like a highly skilled "code tailor," skillfully wrapping and meticulously modifying the code elements it decorates. Essentially, it's a higher-order function that takes a function or class as "raw materials" and processes them into a more powerful and refined version. With decorators, code can easily achieve a magnificent upgrade!

2.@State: The "Private Ledger" of Components

State is like a component's exclusive "private ledger," used to define internal state variables of the component, which are completely private states. When the records (variables) in the ledger change, the component will immediately "refresh the ledger" and re-render, displaying the latest state in real-time on the interface.
It is closely bound to the component's lifecycle, "living and dying together" with it. Once the component "exits the stage," the State variables disappear along with it. Moreover, changes in its state only "take effect" within its own "small circle" — the current component and its subcomponents, without affecting other components.
For example, in a counter component, when you define the count variable with State, every time you click the button and the count increases, the component will immediately update the display. Isn't it very convenient?

3.@prop: The "One-Way Courier" Between Parent and Child Components

Prop serves as the "one-way courier" for data transfer between parent and child components. The parent component packages the data and passes it to the child component through Prop. The child component can only "sign for" and read the data, without the permission to modify the contents of the package.
Once the parent component updates the package (Prop data), the courier will immediately set out and notify the child component that a new package has arrived. Upon receiving the notice, the child component will re-render immediately to display the latest data.
For instance, if the parent component has data for displaying a title and passes it to the child component for display via Prop, when the parent component modifies the title, the child component can update the display in a timely manner.

4.@link: The "Two-Way Walkie-Talkie" Between Parent and Child Components

Link also shoulders the important task of data transfer between parent and child components, but it is like a "two-way walkie-talkie," enabling two-way data communication. The child component can not only receive data but also modify the data obtained through Link, and this modification will be immediately reflected back to the parent component, just like an echo.

The Link variables in both the child and parent components are tightly connected by a "data red thread," sharing the same data and keeping their states synchronized at all times.
Imagine an input box component. When the child component enters content, through Link, the parent component can obtain and process this content in real-time. Isn't it extremely convenient?

Now, are you already clear about State, Prop, and Link? Use them more in actual development, and they will become powerful weapons in your hands! If you still have any questions, feel free to leave a comment, and let's solve the problems together!

In - Depth HarmonyOS NEXT Navigation Component Guide

CoderFeri — Fri, 27 Jun 2025 09:30:49 +0000

HarmonyOS NEXT Application Development: In - Depth Analysis of the Navigation Component for Page Navigation and Routing Management

I'm Feri, a programmer with over 12 years of experience. I've engaged in development work, led teams, and started businesses. I specialize in Hongmeng development, embedded systems, Java programming, and artificial intelligence. My focus lies in the growth of programmers, and I hope to accompany you on this journey of growth! Where there is a will, there is a way!

I. Introduction

In HarmonyOS application development, page navigation is a core aspect of building user experience. How to achieve smooth cross - page navigation, efficient page stack management, and multi - device adaptive layout are key technologies that developers must master. As the official routing solution provided by HarmonyOS, the Navigation component offers a complete set of page navigation solutions through a standardized component model and a flexible configuration system. This article will provide an in - depth analysis of the core features and application scenarios of the Navigation component from the perspectives of technical principles, implementation steps, and best practices.

II. Core Concepts and Architectural Design of the Navigation Component

2.1 Component Positioning: The Core Carrier for Full - Scenario Navigation

The Navigation component is the root view container responsible for page routing and navigation management in HarmonyOS, undertaking the following core responsibilities:

Cross - Page Navigation: Supports page navigation within and across modules, and realizes page mapping relationships through routing table configuration.
Page Stack Management: Maintains the page stack through the NavPathStack object, supporting stack operations such as push and pop.
Multi - Device Adaptation: Automatically identifies the device screen size and achieves optimal layout on mobile phones (single - column Stack mode), tablets (two - column Split mode), and foldable devices (Auto adaptive mode).
Title Bar Customization: Provides title bar style configuration (title text, menu buttons, hiding the navigation bar, etc.), and supports the hideNavBa property to achieve an immersive experience.

Its architecture consists of two core elements:

Navigation Page (Navigation Container): As the entry page of the application (marked with @Entry), it carries the entire navigation stack structure, including the title bar, content area, and toolbar (optional).
Sub - Page (NavDestination Component): As a specific business page, it is embedded in the navigation stack after being registered in the routing table, and supports independent title bar configuration and back - navigation logic.

2.2 Analysis of Three Display Modes

Mode	Applicable Scenarios	Layout Characteristics
Stack	Mobile Phones/Small - Screen Devices	Single - column vertical stacking, with left - to - right sliding transition animations during page switching. The current page title is displayed in the title bar by default.
Split	Tablets/Large - Screen Devices	Two - column layout on the left and right. The left side displays the navigation list, and the right side displays the specific content. It supports the fixed navigation bar mode.
Auto	Adaptive Layout Scenarios	Automatically switches between the Stack and Split modes according to the window size, enabling multi - device adaptation with a single development.

III. Practical Demonstration: Implementing Basic Page Navigation in Three Steps

3.1 Project Preparation and Page Structure Design

Project Skeleton Setup

src
├── main
│   └── ets
│       ├── pages
│       │   ├── Index.ets         # Navigation Page (Entry Page)
│       │   ├── OnePage.ets       # Sub - Page 1
│       │   └── TwoPage.ets       # Sub - Page 2
│       └── app
│           └── router            # Routing Configuration Directory
│               └── router_map.json # System Routing Table
├── resources
│   └── base
│       └── profile
│           └── module.json5      # Module Configuration File

Page Component Design

Index.ets (Navigation Page): Contains jump buttons and operates the page stack through NavPathStack.
OnePage.ets/TwoPage.ets (Sub - Pages): Contain back buttons and declare routing nodes through NavDestination.

3.2 Implementing the Navigation Page: Building the Routing Entry

@Entry
@Component
struct Index {
  // Initialize the page stack object to maintain navigation history
  private pageStack: NavPathStack = new NavPathStack();

  @State welcomeMsg: string = "我是导航页";

  build() {
    Navigation(this.pageStack)  // Bind the page stack instance
      .title("首页")            // Set the navigation page title
      .hideNavBa(false)         // Display the title bar (true by default)
    {
      Column({ space: 30 })
        .width("100%")
        .height("100%")
        .justifyContent(FlexAlign.Center)
      {
        Text(this.welcomeMsg)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)

        // Jump to Sub - Page 1
        Button("跳转第一个页面")
          .onClick(() => {
            // Push operation, the name corresponds to the configuration in the routing table
            this.pageStack.pushPath({ name: "page1" });
          })

        // Jump to Sub - Page 2
        Button("跳转第二个页面")
          .onClick(() => {
            this.pageStack.pushPath({ name: "page2" });
          })
      }
    }
  }
}

Key Technical Points:

The NavPathStack instance manages the page stack, and the pushPath method triggers page navigation and pushes the page onto the stack.
The Navigation component must be the root container of the entry page and accept the page stack instance as a parameter.
Title bar configuration supports dynamic styles and can be customized through modifiers such as .title() and .backgroundColor().

3.3 Implementing Sub - Pages: Defining Routing Nodes

// OnePage.ets
@Builder
export function buildPage1() {  // Export the build function for routing table calls
  return new OnePage().build();
}

@Component
struct OnePage {
  private pageStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination()  // Declare the current page as a routing node
      .title("第一个页面")  // Independent title for the sub - page
    {
      Column({ space: 30 })
        .width("100%")
        .height("100%")
        .justifyContent(FlexAlign.Center)
      {
        Text("子页-OnePage")
          .fontSize(40)
          .fontWeight(FontWeight.Bold)

        // Return to the previous page (pop operation)
        Button("点击返回上一级")
          .onClick(() => {
            this.pageStack.pop();  // Equivalent to popPath()
          })
      }
    }
  }
}

Development Specification Instructions:

Sub - pages must export the build function (such as buildPage1) through the @Builder decorator for reflection calls by the routing table.
The NavDestination component, as the root container of the sub - page, is responsible for interacting with the navigation stack.
The title bar of the sub - page is configured independently, and the current page title is automatically displayed during navigation.

3.4 System Routing Table Configuration: Establishing Page Mapping Relationships

1. Routing Table Definition (resources/base/profile/router_map.json)

{
  "routerMap": [
    {
      "name": "page1",            // Routing Name (Unique Identifier)
      "pageSourceFile": "src/main/ets/pages/OnePage.ets",  // Page File Path
      "buildFunction": "buildPage1",  // Build Function Name
      "data": {
        "description": "第一个子页的元数据"  // Optional Parameters (Support Passing Initialization Data)
      }
    },
    {
      "name": "page2",
      "pageSourceFile": "src/main/ets/pages/TwoPage.ets",
      "buildFunction": "buildPage2",
      "data": { "description": "第二个子页的元数据" }
    }
  ]
}

2. Module Configuration (module.json5)

{
  "module": {
    // ... Other Configurations
    "routerMap": "$profile:router_map"  // Reference the routing table resource
  }
}

Routing Resolution Mechanism:

The system loads the routerMap configuration during startup and creates page instances through the reflection mechanism.
The name field serves as the routing identifier and must strictly match the parameter in pushPath.
The data field supports passing page initialization parameters, which can be retrieved through router.getParams().

IV. Advanced Features and Best Practices

4.1 Advanced Page Stack Operations

Method	Function Description	Typical Scenarios
`pushPath`	Push and Navigate (Create a New Page Instance)	Regular Page Navigation
`replacePath`	Replace the Top Page of the Stack (Update the Current Page)	Refresh the current page after form submission
`pop`	Pop the Top Page of the Stack (Go Back to the Previous Page)	Back button logic
`clear()`	Clear the Page Stack (Navigate to a Specified Page and Clear the History)	After successful login, navigate to the home page and clear the login process pages

// Clear the stack and navigate to the home page
this.pageStack.clear();
this.pageStack.pushPath({ name: "home" });

4.2 Passing Routing Parameters

1. Passing Parameters During Navigation

// Pass parameters from the navigation page
this.pageStack.pushPath({ 
  name: "page1", 
  params: { userId: "123", timestamp: Date.now() } 
});

// Receive parameters in the sub - page
import router from '@ohos.router';

@Builder
export function buildPage1() {
  let params = router.getParams();  // Get routing parameters
  return Column() { Text(`用户ID: ${params.userId}`) };
}

2. Pre - defined Parameters in the Routing Table

{
  "routerMap": [
    {
      "name": "page1",
      "data": { "defaultColor": "#FF0000" },  // Pre - defined default parameters
      // ... Other Configurations
    }
  ]
}

4.3 Navigation Bar Customization Techniques

Navigation(this.pageStack)
  .title("自定义标题")
  .titleColor(Color.White)
  .backgroundColor(Color('#007DFF'))
  .hideNavBa(true)  // Hide the navigation bar (suitable for full - screen pages)
  .menu(MenuItem({  // Add a menu button in the upper right corner
    icon: $r('app.media.menu_icon'),
    onClick: () => { /* Menu click logic */ }
  }))

4.4 Multi - Device Adaptation Optimization

// Dynamically switch the navigation mode according to the device type
let isTablet = DeviceInfo.getDeviceType() === DeviceType.Tablet;

Navigation(this.pageStack)
  .mode(isTablet ? NavigationMode.Split : NavigationMode.Stack)

V. Common Problems and Solutions

5.1 Route Not Found Exception

Phenomenon: When clicking the navigation button, an error message "Route not found" is displayed.

Reasons:

The name in the routing table does not match the parameter in pushPath.
The build function is not correctly exported (missing the @Builder decorator).
The pageSourceFile path is incorrect (pay attention to case - sensitivity and file extensions). Solutions: Check the routing table configuration to ensure that the exported name of the build function matches the configuration.

5.2 Page Stack Disorder

Phenomenon: The back button logic is abnormal after multiple navigations.

Best Practices:

Use a unified navigation stack instance (avoid multiple NavPathStack instances).
In complex scenarios, use getPageCount() to obtain the stack depth and avoid out - of - bounds popping. -优先使用pushPath/pop组合进行导航，避免直接操作栈数组。

5.3 Title Bar Style Conflicts

Solutions:

Set independent titles for the navigation page and sub - pages through .title() respectively.
Use hideNavBa to uniformly control the display status of the navigation bar.
Define common navigation bar styles in the App.less file for global styles.

VI. Conclusion

As the core solution for HarmonyOS application navigation, the Navigation component greatly simplifies the development of complex page navigation scenarios through standardized routing configuration, flexible page stack management, and powerful multi - device adaptation capabilities.

In practical projects, the following points should be noted:

Design the routing table structure reasonably to avoid redundant configurations.
Manage the NavPathStack instance uniformly to ensure the atomicity of page stack operations.
Make full use of the Auto adaptive mode to achieve unified multi - device layout.
Combine with animation components (such as Animate) to optimize the page transition experience.

With the continuous improvement of the HarmonyOS ecosystem, the Navigation component will continue to evolve with more advanced features (such as routing guards, dynamic route loading, etc.).

It is recommended to follow updates in the official documentation, master the latest navigation management techniques, and create a more seamless full - scenario application experience.

Through the practices in this article, you can quickly master the core usage of the Navigation component, achieving the entire development process from basic page navigation to complex navigation scenarios, laying a solid foundation for building high - performance HarmonyOS applications.

Well, that's all for this article. I hope it's helpful to you. Keep it up!

Mastering the Lifecycle of UIAbility in HarmonyOS NEXT

CoderFeri — Fri, 27 Jun 2025 09:28:18 +0000

Mastering the Lifecycle of UIAbility in HarmonyOS NEXT

Core of HarmonyOS Application Development: In - Depth Analysis of UIAbility Lifecycle

Hello, everyone! I'm Feri, a programmer with over 12 years of experience specializing in Hongmeng development. In the HarmonyOS application architecture, UIAbility serves as the core component for presenting the user interface. Its lifecycle management directly impacts application performance, resource utilization, and user experience. This article will combine source - code - level analysis with practical experience to help you gain an in - depth understanding of the state transitions and best practices of UIAbility.

I. Overview of the UIAbility Lifecycle: The Complete Chain from Creation to Destruction

The lifecycle of UIAbility consists of four core states and two window - related states, forming a rigorous state - machine model. Understanding the triggering sequence and interaction logic of these states is the foundation for building robust applications.

1.1 Lifecycle State Diagram

(Note: The image shows the state transitions: Create → WindowStageCreate → Foreground → Background → WindowStageDestroy → Destroy)

II. Detailed Explanation of Core Lifecycle States

2.1 Create State: The Initialization Phase of Application Launch

Triggering Condition:
Triggered when the UIAbility instance is created by the system. It is the starting point of the lifecycle and corresponds to the onCreate() callback.

Core Responsibilities:

Basic Initialization: Complete global configurations (such as setting the color mode in the above example), and load static resources (non - time - consuming operations).
Context Acquisition: Obtain the application context through this.context for cross - component communication or resource access.
Lightweight Operations: Avoid performing time - consuming operations such as network requests and file I/O here to prevent application startup lag.

// Best Practice: Only handle necessary configurations during initialization
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  // Configure the application theme mode
  this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
  // Record lifecycle logs (it is recommended to add tracking statistics in a production environment)
  hilog.info(DOMAIN, 'Lifecycle', 'UIAbility onCreate'); 
}

Precautions:

The UI has not been created at this stage, so interface elements cannot be manipulated.
If complex initialization is required, it can be implemented through AsyncTask or sub - threads.

2.2 WindowStage - related States: The Infrastructure for Interface Rendering

2.2.1 WindowStageCreate State (Key Node)

Triggering Condition:
Triggered when the UIAbility instance is successfully created and the interface window (WindowStage) is created, corresponding to the onWindowStageCreate() callback.

Core Functions:

UI Loading Entry: Load page components (such as pages/Index in the example) through windowStage.loadContent().
Window Event Subscription: Set up event listeners for window size changes, focus switching, etc.
Resource Pre - loading: Initialize resources such as images and fonts required for the interface at this stage.

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Load the main page, supporting synchronous and asynchronous modes
  windowStage.loadContent('pages/Main', (err) => {
    if (err) {
      // An error retry mechanism should be added in a production environment
      hilog.error(DOMAIN, 'UI Load', 'Failed to load content: %s', err.message);
      return;
    }
    hilog.info(DOMAIN, 'UI Load', 'Succeeded in loading main page');
    // Optional: Initialize window features (such as full - screen, transparent status bar)
    windowStage.setWindowProperty({
      layoutConfig: { width: 1024, height: 600 }
    });
  });
}

2.2.2 WindowStageDestroy State

Triggering Condition:
Triggered when the window is destroyed by the system, and the interface is no longer visible at this time, corresponding to the onWindowStageDestroy() callback.

Key Points of Resource Release:

Unbind window event listeners.
Release unused graphic resources (such as unrendered image objects).
Stop page - level timers or background tasks.

2.3 Foreground and Background States: The Core Logic of Foreground - Background Switching

2.3.1 Foreground State (Visible in the Foreground)

Triggering Scenarios:

When the application is launched for the first time and the interface loading is completed.
When switching back to the foreground from the background (such as restoring from the recent tasks list).
When returning from another application (such as returning from cross - application jumping).

Development Key Points:

Resource Application: Re - obtain sensor permissions (such as camera, location) that were released in the background.
Interface Refresh: Update real - time data (such as the number of unread messages, real - time weather).
Performance Optimization: Avoid performing complex calculations here. Frame - by - frame processing can be achieved through UI thread scheduling.

onForeground(): void {
  hilog.info(DOMAIN, 'Lifecycle', 'Enter foreground');
  // Example: Resume audio playback (paused in the background)
  if (audioPlayer.isPaused()) {
    audioPlayer.resume();
  }
  // Register a foreground notification (for long - running tasks)
  this.context.createLocalNotification().send();
}

2.3.2 Background State (Invisible in the Background)

Triggering Scenarios:

When the user presses the Home key to return to the desktop.
When switching to another application.
When the interface is reclaimed by the system (when memory is insufficient).

Best Practices:

Lightweight Processing: Only perform necessary state saving (such as the current page scroll position).
Resource Release: Close unnecessary network connections and release GPU resources.
Background Tasks: Use AbilityScheduler or Service to handle long - running tasks to avoid blocking the main thread.

onBackground(): void {
  hilog.info(DOMAIN, 'Lifecycle', 'Enter background');
  // Example: Pause video playback and release decoder resources
  videoPlayer.pause();
  videoDecoder.release();
  // Save the user's operation progress (it is recommended to use an asynchronous storage API)
  AppStorage.SetOrCreate('lastPage', 'MainPage');
}

Key Differences:

onForeground() is triggered before the interface becomes visible, making it suitable for preparing resources for user interaction.
onBackground() is triggered after the interface is completely invisible, making it suitable for performing lightweight cleanup operations.

2.4 Destroy State: The Final Phase of Instance Destruction

Triggering Condition:

When the user actively exits the application.
When the application is reclaimed by the system due to insufficient memory.
When the application is upgraded or uninstalled.

Required Operations:

Global Resource Release: Close all open file handles and database connections.
Task Termination: Cancel all incomplete network requests or background threads.
Data Persistence: Write key states to local storage (such as user settings, unsaved form data).

onDestroy(): void {
  hilog.info(DOMAIN, 'Lifecycle', 'UIAbility onDestroy');
  // Example: Clear the timer
  clearInterval(updateTimer);
  // Unsubscribe from all global event listeners
  EventManager.unsubscribeAll();
  // In a production environment, it is recommended to add memory leak detection logic
  MemoryProfiler.checkLeak(); 
}

III. Practical Tips: Analyzing the Lifecycle Process through Logs

3.1 Example Code Analysis

// Log output rule: state name + timestamp + call stack (optional)
console.log(`[${new Date().toISOString()}] UIAbility-Lifecycle-Create`);

3.2 Log Output Sequence for Typical Scenarios

First Launch: onCreate() → onWindowStageCreate() → onForeground()
Switch to Background and Then Back: onBackground() → onForeground()
Complete Exit: onBackground() → onWindowStageDestroy() → onDestroy()

Debugging Tools:

Use the Logcat in DevEco Studio to filter tags with testTag.
Differentiate the importance of logs through different levels of hilog (info/error/warn).

IV. Advanced Topics: Lifecycle and Performance Optimization

4.1 Golden Rules for Avoiding Memory Leaks

Context Holding: Release all strong references to the UIAbility instance in onDestroy().
Event Unbinding: Ensure that all registered window events are removed in onWindowStageDestroy().
Singleton Pattern: Avoid creating long - lived singletons in lifecycle callbacks (which may lead to memory leaks).

4.2 Background Task Handling Solutions

Scenario	Solution	Implementation Suggestion
Short - term background operations	`setTimeout`/`setInterval`	Start in `onBackground()`, reset in `onForeground()`
Long - term tasks	`Service` component	Start an independent Service through `startAbility()`
Cross - process communication	`DataAbility`/`EventChannel`	Initialize the communication channel in `onCreate()`

V. Conclusion: Building a Robust UI Lifecycle Management System

The lifecycle management of UIAbility is essentially an art of balancing resource utilization and user experience:

Create Phase: Perform lightweight initialization and avoid blocking the main thread.
WindowStage Phase: Focus on UI rendering and window control.
Foreground - Background Switching: Precisely release and restore resources to ensure response speed.
Destruction Phase: Thoroughly clean up to prevent memory leaks.

By making rational use of lifecycle callbacks, we can ensure that applications remain in the best state in different scenarios. In the next article, we will delve deeper into HarmonyOS. Stay tuned!

Follow me to get more Hongmeng development tips, and let's ride the wave of distributed application development together!

Mastering Network Requests in HarmonyOS NEXT: A Practical Guide from Novice to Expert

CoderFeri — Fri, 27 Jun 2025 09:27:30 +0000

Mastering Network Requests in HarmonyOS NEXT: A Practical Guide from Novice to Expert

Feri一到，编程开窍，嗨，我是Feri!

When Feri arrives, programming becomes a breeze. Hi, I'm Feri!

🚀 Mastering Network Requests in HarmonyOS NEXT: A Practical Guide from Novice to Expert

I. Why Do We Need Network Requests? The "Food Delivery Philosophy" for Programmers

Imagine you're developing a news app. When users tap the screen, you need to fetch the latest news from the server. It's just like ordering food delivery:

URL is the restaurant's address (e.g., https://www.juhe.cn/news/api).
Request Methods are your ways of placing an order:
- GET is like asking the chef, "Give me a serving of Kung Pao Chicken" (retrieving data).
- POST is like submitting an order (sending data to the server).
Request Parameters are your special requests: for example, "mildly spicy with less rice" (type=tech&page=1).
Response Results are the food boxes delivered by the delivery person (possibly news data in JSON format).

Once you understand this analogy, we can start getting our hands dirty!

II. HTTP Basics: The "Network Conversation" Rules for Programmers

1. Eight Request Methods: How Should You "Speak"?

Method	Function	Analogous Scenario
`GET`	Retrieve resources (read-only)	Checking the menu
`POST`	Create resources (add new data)	Submitting an order
`PUT`	Update resources (modify data)	Modifying an order (e.g., changing a drink)
`DELETE`	Delete resources	Canceling an order
`HEAD`	Retrieve only the response headers (not the body)	Asking the chef, "Is this dish spicy?"
`OPTIONS`	Check the methods supported by an interface	Asking the waiter, "Do you accept card payments?"

💡 In development, GET and POST are the most commonly used methods. However, mastering the entire family will help you handle complex scenarios!

2. JSON: The "Universal Language" for Programmers

JSON looks like this:

{
  "news": [
    {
      "title": "HarmonyOS Network Request Practice",
      "author": "Feri",
      "tags": ["programming", "HarmonyOS", "network development"]
    }
  ]
}

Objects {}: They're like drawers, holding compartments of "property name: value".
Arrays []: They're like boxes, holding multiple objects or values.
Language-Agnostic: Whether you're using Java or JavaScript, you can understand this "alien language".

III. The First Step in Practice: Initiating Your First Request (Using a News API as an Example)

1. Preparation: Applying for a "Network Pass"

Add this line to config.json (otherwise, the request will be blocked):

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

2. Three Steps in Code (Taking a GET Request as an Example)

① Import the Toolkit: Open the "Network Toolbox"

import { http } from '@kit.NetworkKit'; // Import network tools

② Create a Request Object: Get the "Order Menu"

let request = http.createHttp(); // It's like getting a blank order form

③ Initiate the Request: Click the "Place Order" Button

Button("Get Top News")
  .onClick(async () => {
    const API_KEY = "7f14068bf84db1f93377e4a98c8c8404"; // Your API key (like an order password)
    const url = `http://v.juhe.cn/toutiao/index?key=${API_KEY}&type=top`; // Concatenate the full address

    // Initiate the request. Here, async/await is used to make the code feel more synchronous.
    const response = await request.request(url, {
      method: http.RequestMethod.GET, // Tell the server, "I want to retrieve data"
      header: { "Content-Type": "application/x-www-form-urlencoded" } // Request header: Tell the server the data format
    });

    // Process the result: It's like opening the food delivery box.
    if (response.responseCode === 200) { // 200 means "order successful"
      const newsData = JSON.parse(response.result); // Parse the JSON data
      console.log("Latest News:", newsData.data[0].title); // Print the title of the first news item
    } else {
      console.log("Request failed, error code:", response.responseCode);
    }

    request.destroy(); // Remember to clean up after eating (release resources)
  })

IV. Advanced Operations: Encapsulating Utility Classes — Making Code More Elegant

Imagine having to repeatedly write the address and phone number every time you order food. Isn't that troublesome?
Encapsulating utility classes is like creating "common order templates" that you can use directly next time.

1. Encapsulate HttpUtil (Supports Promises and Interceptors)

import { http } from '@kit.NetworkKit';

export class HttpUtil {
  // Default configuration: such as common timeout and data format
  static DEFAULT_CONFIG = {
    timeout: 10000, // 10-second timeout
    headers: { "Content-Type": "application/json" }
  };

  // Generic request method (supports all request types)
  static async request(url: string, options: any) {
    const config = { ...this.DEFAULT_CONFIG, ...options };
    const request = http.createHttp();

    try {
      const res = await request.request(url, {
        method: config.method,
        header: config.headers,
        extraData: config.data, // Parameters for POST requests
        connectTimeout: config.timeout,
        readTimeout: config.timeout
      });

      if (res.responseCode >= 200 && res.responseCode < 300) {
        return JSON.parse(res.result); // Automatically parse JSON
      } else {
        throw new Error(`Request failed: ${res.responseCode}`);
      }
    } finally {
      request.destroy(); // Remember to release resources!
    }
  }

  // Quick GET method (automatically concatenates parameters)
  static get(url: string, params?: any) {
    const query = params ? new URLSearchParams(params).toString() : "";
    return this.request(`${url}?${query}`, { method: http.RequestMethod.GET });
  }

  // Quick POST method
  static post(url: string, data?: any) {
    return this.request(url, { method: http.RequestMethod.POST, data });
  }
}

2. Using the Utility Class: Initiate a Request with One Line of Code

// Get a joke (GET request)
Button("Tell Me a Joke")
  .onClick(async () => {
    const joke = await HttpUtil.get("http://v.juhe.cn/joke/randJoke", {
      key: "b12d46180eda262ec3a1cec558aa950e"
    });
    console.log(joke.result.joke); // Get the joke content directly
  })

// Submit a form (POST request)
Button("Submit Feedback")
  .onClick(async () => {
    const feedback = {
      content: "This utility class is amazing!",
      userId: "12345"
    };
    await HttpUtil.post("http://api.example.com/feedback", feedback);
    console.log("Feedback submitted successfully!");
  })

V. Pitfall Guide: I've Filled These Holes for You!

Forgetting to Add Network Permissions: You'll get an error like net::ERR_CLEARTEXT_NOT_PERMITTED. Remember to check config.json!
Incorrect Parameter Format: For GET requests, parameters should be appended to the URL (using ?key=value&...), and for POST requests, parameters should be in JSON format.
Cross-Origin Issues: If you're debugging locally, the server needs to set the Access-Control-Allow-Origin header.
Memory Leaks: Always call request.destroy() after each request; otherwise, it will lead to memory overflow!

VI. Expanded Thinking: How to Make Requests More Powerful?

Interceptors: You can uniformly add tokens (e.g., Authorization: Bearer xxx) before requests and uniformly handle error codes (e.g., redirect to the login page for a 401 error) after responses.
Caching Mechanisms: Add caching for frequently accessed interfaces (such as home page data) to reduce server load.
Retry Mechanisms: Automatically retry requests that time out or return a 500 error (e.g., retry up to 3 times with a 1-second interval between each retry).

Conclusion: From Manual Labor to Tool Building, You've Progressed!

Now you've mastered the core of network requests in HarmonyOS:

Basic concepts (HTTP methods, JSON format)
Practical skills (initiating requests, handling responses)
Advanced capabilities (encapsulating utility classes, solving common problems)

Next, try to develop a complete news app using today's knowledge. Remember, when you encounter problems, think of network requests as "ordering food delivery" and break down the problems step by step. You'll find that everything is much simpler than you thought!

If you find this useful, feel free to like, bookmark, and follow me for more tips on programmer growth. See you in the next issue! 👋

Where there is a will, there is a way! May you always maintain a passion for exploration in the world of code 🔥

HarmonyOS NEXT ArkUI Pop-ups: Customize & Use with Ease

CoderFeri — Fri, 27 Jun 2025 09:26:36 +0000

Mastering HarmonyOS NEXT ArkUI Pop - up Boxes: A Comprehensive Guide from Customization to Ready - to - Use Solutions, Effortlessly Mastering Interactive Experiences

I. Pop-up Box Tutorial: The "72 Transformations" of Modal Windows

Imagine users are happily navigating your app when suddenly they need a "temporary assistant" to remind them of crucial information—that's the mission of pop-up boxes!

As modal windows, they temporarily "take over" the screen and won't disappear until users complete the interaction. ArkUI thoughtfully offers two main types:

DIY Customization: With complete freedom to shape every aspect, from layout to components, it’s perfect for complex interaction scenarios.
Ready-to-Use Templates: Just insert content like building blocks, ideal for common tasks such as simple prompts, selections, and confirmations—saving time and effort.

📦 Custom Pop-up Boxes: Full Control Over Your Windows

1. "Global Free Agent" Without UI Component Dependencies (openCustomDialog)

This is suitable for scenarios that require dynamic updates of pop-up properties, like content that changes in real-time based on user input. It supports both "modal" (interaction must be completed before proceeding) and "non-modal" (can be ignored temporarily) modes, and comes with lifecycle hooks: onWillAppear → onDidAppear → onWillDisappear → onDidDisappear, allowing you to manage the pop-up's entire lifecycle from creation to dismissal.

2. Step-by-Step Guide to Creating a "Unique Pop-up"

Step 1: Give the Pop-up a "Home" (Encapsulate the Pop-up Class)

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

export class FirstDialog {
  ctx?: UIContext; // Context object, the pop-up's "identity document"
  content?: ComponentContent<Object>; // The "furniture" inside the pop-up
  option?: promptAction.BaseDialogOptions; // The pop-up's "decoration style"

  constructor(ui: UIContext, c: ComponentContent<Object>, o: promptAction.BaseDialogOptions) {
    this.ctx = ui;
    this.content = c;
    this.option = o;
  }

  showDialog() {
    this.ctx?.getPromptAction().openCustomDialog(this.content)
      .then(() => console.log("Pop-up is now live. Check it out!")); // A little success message
  }
}

Step 2: Decorate the Pop-up's "Interior" (Customize the Content)

Use the @Builder decorator to create a unique component. Here, we've added an image, a text input box, and a button, even a red border for emphasis:

@Builder 
export function buildDialog(msg: string) {
  Column() {
    Image($r("sys.media.ohos_ic_public_scan")) // Add an icon
      .width(100).height(100)
    Text(msg) // Display the prompt text
    TextInput({ placeholder: "Please enter content" }) // Encourage user interaction
      .onChange(v => msg = v)
    Button("Click Me") // Button click triggers a Toast
      .onClick(() => promptAction.showToast({ message: "Button inside pop-up triggered: " + msg }))
  }
  .width("90%") // Leave some space for width
  .backgroundColor(Color.White) // Clean white background
  .padding(10) // Comfortable internal spacing
  .border({ style: BorderStyle.Solid, width: 2, color: Color.Red }) // Red border for attention!
}

Step 3: "Summon" the Pop-up on the Page

After instantiation, bind it to a button click event. Clicking the button will "summon" this pop-up with an input box, as shown below:

(Imagine the pop-up appearing with its red border, and when the user enters content and clicks the button, the Toast provides real-time feedback—it’s highly interactive!)

🧩 Fixed-Style Pop-up Boxes: A Boon for Lazy Developers, Solving Common Scenarios with One Click

No need to worry about layout—ArkUI has already provided "template rooms." Just insert the content!

1. Savior for Decision-Makers: Action Menu (showActionMenu)

Great for presenting multiple options for users to choose from, like a list of "favorite foods":

Button("Action Menu Pop-up")
  .onClick(() => {
    promptAction.showActionMenu({
      title: "Soul - searching Question: What's Your Favorite Food?", // A dramatic title
      buttons: [
        { text: "Cucumber", primary: true, color: "#007dfe" }, // Main button in blue
        { text: "Tomato", color: "#fd750f" }, // Tomato - red
        { text: "Eggplant", color: "#6a0dad" }, // Mysterious purple
        { text: "Radish", color: "#fd750f" } // Consistent orange - tone
      ]
    }).then(data => {
      const foods = ["Cucumber", "Tomato", "Eggplant", "Radish"];
      promptAction.showToast({ message: `You chose the ${data.index + 1}st option: ${foods[data.index]}` });
    });
  })

When the button is clicked, the option list slides up from the bottom. Clicking any option triggers a Toast—simple and intuitive!

2. Guardian Against Risky Operations: Dialog Box (showDialog)

Essential for "double confirmation" in sensitive operations like deletion or payment, for example:

Button("Delete File")
  .onClick(() => {
    promptAction.showDialog({
      title: "⚠️ Risky Operation", // Title with a warning icon
      message: "Dear, this action cannot be undone. Are you sure you want to proceed?", // More user-friendly tone
      buttons: [
        { text: "I'm Sure", color: "#e53935" }, // Warning red button
        { text: "Let Me Think", color: "#225473" } // Calming blue
      ]
    }).then(data => {
      data.index === 0 
        ? promptAction.showToast({ message: "Deletion successful! Fast hands!" }) 
        : promptAction.showToast({ message: "Cancellation successful. Caution is a virtue～" });
    });
  })

Users must choose either "Confirm" or "Cancel" to continue, preventing accidental operations.

3. Time/Date Manager: Picker Dialogs (PickerDialog)

CalendarPickerDialog: Ideal for selecting year, month, and day, with "Confirm/Cancel" buttons and customizable button styles.
DatePickerDialog: Slide to select dates, with the option to limit the time range (e.g., only select from 2023 - 2025).
TimePickerDialog: Precise down to hours, minutes, and seconds, supporting 24-hour format, perfect for appointment and reminder scenarios.

Example: Triple Date Selection

// Calendar picker
Button("Select an Auspicious Date")
  .onClick(() => {
    CalendarPickerDialog.show({
      selected: new Date(), // Default to today
      acceptButtonStyle: { fontColor: Color.Red, backgroundColor: Color.LightGray }, // Red confirm button
      onAccept: (v) => promptAction.showToast({ message: `You selected: ${v.toLocaleDateString()}` })
    });
  })

// Time picker
Button("Select an Alarm Time")
  .onClick(() => {
    TimePickerDialog.show({
      format: TimePickerFormat.HOUR_MINUTE, // Display only hours and minutes
      useMilitaryTime: true, // 24-hour format
      onAccept: (v) => promptAction.showToast({ message: `Time set to: ${v.hour}:${v.minute}` })
    });
  })

II. Conclusion: Choose Wisely to Elevate Interaction

Custom Pop-up Boxes: Best for complex layouts (like pop-ups with forms or images), offering maximum freedom—akin to "bespoke design."
Fixed-Style Pop-up Boxes: Ideal for common, simple scenarios (confirmation, selection, time/date), ready to use out-of-the-box, saving time and increasing efficiency.

Mastering these pop-up techniques will definitely make your app's interaction experience stand out! Remember, pop-ups are bridges for "conversations" with users. Used properly, they can convey key information without being intrusive.

💡 Tips for Programmer Growth: Technical details require repeated practice. It’s recommended to type out the example code, modify the styles and logic, and fully understand the features of each API. The next time you have a pop-up requirement, simply pick the right solution from your "arsenal"!

Where there is a will, there is a way! See you next time～ 👋

Mastering HarmonyOS NEXT Third-Party Libraries: lithe_refresh

CoderFeri — Fri, 27 Jun 2025 09:24:36 +0000

Mastering HarmonyOS NEXT Third-Party Libraries: A Comprehensive Guide from Basics to Practice, Effortlessly Conquering lithe_refresh

Hello, fellow developers! I'm Feri, a programmer with over 12 years of experience. Today, I'm going to introduce you to the "efficiency booster" in OpenHarmony development — the OHPM third-party library. We'll also dive into hands-on practice with the incredibly smooth refresh component lithe_refresh! 👇

Demonstrating the application of the lithe_refresh third-party library in HarmonyOS NEXT projects

I. OHPM Third-Party Library: The "App Store" of OpenHarmony

Imagine being able to call ready-made high-quality components with just one click, eliminating the need to reinvent the wheel and skyrocketing your development efficiency. That's the magic of OHPM!

It consists of three "golden partners":

Website: A search powerhouse similar to the Google Play Store, enabling seamless library searching, documentation viewing, and configuration management.
Command-Line Interface (CLI): A programmer's "shortcut key," streamlining package management with a single command.
Registry: A treasure trove of numerous third-party libraries, storing code and data for easy access.

🌟 Direct Link to the Official Website: https://ohpm.openharmony.cn/

(Psst... Bookmark this URL and boost your development efficiency by 10086!)

II. OHPM Usage Guide: Unlock "Lazy Development" in 3 Steps

🔍 Step 1: Searching for Libraries is Like Shopping on Taobao

Open the official website, type in keywords (such as "refresh" or "charts") in the search bar, and hit Enter!

Results are sorted by "relevance" and "popularity." Opt for libraries with high star ratings and download counts — they're usually a safe bet!

🚀 Step 2: Installation in One Click

Open the terminal in DevEco Studio and enter the command:

ohpm install library_name # For example: ohpm install @abner/lithe_refresh

✨ Bonus: After installation, oh-package.json5 automatically records your dependencies, ensuring you never miss a package again!

✍️ Step 3: Just Copy and Paste the Code

Follow the library's documentation, copy and paste the sample code, and tweak the parameters to finish up!

III. Practical Case: Creating a Smooth Refresh Experience with lithe_refresh

🧊 What is lithe_refresh?

It's a "feather-light" refresh component that supports pull-to-refresh and load-more-on-scroll. It's compatible with various layouts like List and Grid and can even refresh any custom component!

Core Advantages:

Zero dependencies! It doesn't couple with any framework, offering ultimate flexibility.
Stunning appearance! It comes with multiple built-in animation effects and supports custom styling.
Extremely flexible! The refresh logic is separated from the UI, resulting in crystal-clear code structure.

📝 Three-Step Practice: From Installation to Takeoff

1️⃣ Installation: Introduce the "Magic Tool" with One Command

ohpm install @abner/lithe_refresh

2️⃣ Code: Achieve Refresh Freedom

// Import the component
import { RefreshController, LitheRefresh } from '@abner/lithe_refresh';

@Component
struct RefreshDemo {
  @State dataList: string[] = [];
  @State page: number = 1;
  scroller = new Scroller();
  controller = new RefreshController();

  // Pull-to-refresh logic: Simulate loading new data
  async loadNewData() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.dataList = [`New Data 1`, `New Data 2`, `New Data 3`]; // Clear old data and load the latest
    this.controller.finishRefresh(); // Notify the component that refresh is complete
  }

  // Load-more-on-scroll logic: Simulate loading additional data
  async loadMoreData() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.page++;
    this.dataList.push(`Data 1 on Page ${this.page}`, `Data 2 on Page ${this.page}`); // Append data
    this.controller.finishLoadMore(); // Notify the component that loading is complete
  }

  @Builder
  build() {
    LitheRefresh({
      scroller: this.scroller,
      controller: this.controller,
      itemLayout: () => {
        // List layout to display data
        List({ scroller: this.scroller }) {
          ForEach(this.dataList, (item) => {
            ListItem() {
              Text(item)
                .padding(15)
                .border({ width: 1, color: "#E0E0E0" })
            }
          })
        }
      },
      onRefresh: this.loadNewData.bind(this), // Bind the pull-to-refresh event
      onLoadMore: this.loadMoreData.bind(this) // Bind the load-more-on-scroll event
    })
    .margin(10)
    .statusBar({ backgroundColor: "#F5F5F5" })
  }
}

3️⃣ Effect: Smooth Animations for an Ultimate Experience

When pulling down: The loading animation spins, and new data refreshes after 2 seconds!
When scrolling to load more: A "Load More" prompt appears at the bottom, with seamless data integration!

IV. Developer Extras: Hidden Tips for Mastering OHPM

🔍 Tip 1: Use Keyword Combinations for Precise Library Searching

For example, search for "charts high-performance" or "lists animation" to find hidden gems more easily than with single keywords!

🛠️ Tip 2: Customize Component Styles

Take lithe_refresh as an example. To modify the refresh header style:

LitheRefresh({
  // ...other configurations
  refreshHeader: () => { // Customize the pull-to-refresh header
    Text("Pull to Refresh")
      .fontSize(14)
      .color("#666")
  }
})

🚦 Tip 3: Avoid Dependency Conflicts

Check the library's "dependency instructions" before installation and use ohpm list to check for version conflicts, ensuring smooth operation!

V. Feri's Insights: Why Recommend OHPM?

As someone with extensive experience, I understand how time-consuming it is to "reinvent the wheel." OHPM is like a "developer convenience store," allowing you to call mature components at any time and focus on the core business logic.

Tools like lithe_refresh, in particular, help you quickly achieve "highly interactive experiences," making users perceive your app as "professional" and "smooth" — all with just a few lines of code!

💡 Pro Tip: Beginners can start with "UI component" libraries (such as buttons and pop-ups) and gradually move on to libraries for network requests and data processing as they become more proficient.

🌟 Interactive Time!

Feeling inspired? Open DevEco Studio now, enter ohpm install @abner/lithe_refresh, follow the tutorial, and experience the joy of smooth refreshing for yourself!

Encounter any issues? Leave a comment, and I'll help you debug!

👉 Follow me for more OpenHarmony development tips and programmer growth strategies. Let's level up together!

Where there is a will, there is a way! See you next time~ 🚀

Mastering HarmonyOS NEXT Modal Pages: A Comprehensive Guide to Effortless Implementation

CoderFeri — Fri, 27 Jun 2025 09:22:56 +0000

Mastering HarmonyOS NEXT Modal Pages: A Comprehensive Guide to Effortless Implementation

0. Preface

Recently, while working on the HarmonyOS NEXT native development of an exam app, I hit a roadblock when it came to displaying the answer sheet for the exam feature. Initially, I used pop - up windows for the answer sheet, but the result was a far cry from expectations—it was so poorly presented that I almost considered resigning out of embarrassment (just kidding). After some reflection, I discovered the "magic weapon" of modal pages, which opened up a whole new world for me. Today, I'd like to share with you how to work with these amazing features.

1. Modal Pages: The "Transformers" of Pop - up Windows 🤖

Imagine you're playing a game, and suddenly a task panel (modal page) pops up. It doesn't block the game screen but allows you to focus on handling the task—that's the charm of modal pages.
It's a "large - panel interactive pop - up window." The biggest difference from regular pop - up windows is that the content is fully customizable, so you can include as much information as you need (such as your exam answer sheet). ArkUI offers two forms:

Semi - modal: A non - full - screen pop - up that allows the underlying page to be partially visible. It's suitable for lightweight operations, like selecting a date or filling in a note.
Full - modal: A domineering full - screen overlay that can only be dismissed by swiping from the side. It's ideal for scenarios that require immersive operations, such as viewing an extra - long answer sheet.

Key point: The semi - modal can be dismissed by swiping, tapping the dimmed background, or clicking the close button. The full - modal, by default, can only be dismissed by swiping, effectively preventing accidental touches by clumsy users!

2. Semi - modal Pages: The Gentle "Side Assistant" 👨💻

Semi - modal pages are like your attentive personal assistants. They don't block the main interface but help you complete tasks quickly. For example, when implementing a "memorial day management" feature, you can select a date and write a note seamlessly.
Lifecycle: The "Heartbeat Record" of the Pop - up 📅
The life cycle of a semi - modal is straightforward:
Before birth (onWillAppear) → Debut (onAppear) → Before disappearance (onWillDisappear) → Exit (onDisappear)
Just like an actor on stage, each stage has its own corresponding "background music" (callback functions), allowing you to "control" its state at any time.
Code Implementation: Step - by - Step Guide to Building a "Memorial Day Assistant" 🚀

@Entry
@Component
struct Index {
  // Define the state of whether the page is displayed (it's just like a switch)
  @State isShow:boolean=false;
  // Selected date: set to today by default to prevent users from choosing magical options like "tomorrow's exam"
  @State selectedDate:Date=new Date();
  // Remark information: left blank for users to fill in
  @State remark:string="";

  // Method to create a semi - modal page: it's like building with blocks, stacking components together
  @Builder
  createSheet() {
    Column({ space: 10 }) { // Column layout, components arranged vertically with a 10px gap
      Row({ space: 10 }) { // Row layout, components arranged horizontally with a 10px gap
        Text("Memorial Day:") // Label to tell users this is for date selection
        // Calendar picker: aligned to the right, with a striking red font color, and allows date selection on click
        CalendarPicker({ hintRadius: 10, selected: this.selectedDate })
          .edgeAlign(CalendarAlign.END)
          .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })
          .margin(10)
          .onChange((value) => { // Log the selected date for easy debugging
            console.info("CalendarPicker onChange:" + JSON.stringify(value))
          })
      }
      .margin({ top: 30 }) // 30px top margin to separate from the component above
      .width("90%") // Width takes up 90% of the parent container to avoid overflowing the screen

      Row() { // Remark input box area
        Text("Remark:") // Label
        TextInput({ placeholder: "Please enter remark information" }) // Input box, prompting the user to "write something"
          .onChange(v => { // Update the remark variable in real - time as the user types
            this.remark = v
          })
      }
      .width("90%") // Also takes up 90% width

      // Confirm and save button: shows a Toast when clicked and closes the pop - up
      Button("Confirm and Save")
        .width("80%") // Make the button a bit narrower for a more refined look
        .onClick(() => {
          this.getUIContext().getPromptAction().showToast({
            message: "Memorial Day: " + this.selectedDate.toDateString() + " Remark: " + this.remark
          })
          this.isShow = false; // Close the pop - up, and peace is restored
        })
    }
    .width("90%") // The entire semi - modal content area takes up 90% width
    .padding(20) // 20px internal padding to prevent components from being cramped
  }

  // Main page layout: a button to open the semi - modal
  build() {
    Column({space:20}){
      Text("Semi - modal Page") // Title, simple and straightforward
      Button("Open Semi - modal Page") // Button, clicks to trigger the "switch"
        .bindSheet($$this.isShow,this.createSheet,
          {mode:SheetMode.EMBEDDED, detents: [SheetSize.MEDIUM, SheetSize.LARGE, 300]})
        .onClick(()=>{ // Set the "switch" to on (isShow to true) when clicked
          this.isShow=true;
        })
    }
    .height('100%') // Fill the screen height
    .width('100%') // Fill the screen width
  }
}

Effect Preview: The Transformation from "Ugly Duckling" to "Swan" 📱
Before opening: The main page is clean, with only an "Open" button, like an unopened parcel.
After opening: The semi - modal slides up from the bottom, bringing the calendar and input box, like a "secret drawer" popping out.
During operation: Slide to select the date, enter the remark. The underlying page is dimmed but still visible, constantly reminding you "I'm still here."
When closing: Swipe, tap the dimmed background, or click the button, and the pop - up smoothly disappears, as if nothing happened (but the data has been saved, of course).
Conclusion: Why Are Modal Pages So Great? 🤔
High flexibility: Easily switch between semi - modal and full - modal to adapt to different scenarios (use full - modal for exam answer sheets and semi - modal for date selection).
User - friendly experience: Don't block the main interface, and the operation logic is intuitive (swiping to close is extremely convenient).
Highly customizable: You can write everything from the layout to the interaction, so you can make it as cool as you want (for example, add a sliding page - turning effect to the answer sheet).

Next time, I plan to talk about practical cases of full - modal pages, such as how to use them to create an "immersive exam answer sheet." If you encounter any strange problems during development, feel free to leave a comment, and let's figure them out together! 💪

Where there is a will, there is a way! I'm Feri, an experienced programmer dedicated to the growth of fellow developers. See you next time! 🚗💨

一文就可搞清楚的HarmonyOS NEXT解锁模态页面的“真香”操作

CoderFeri — Fri, 27 Jun 2025 02:53:59 +0000

0.前言

最近在搞考试App的HarmonyOS NEXT原生开发，卡在考试功能的答题卡显示上。一开始用弹框做答题卡，效果堪称“买家秀vs卖家秀”——丑到想给产品经理递辞职信（不是）。痛定思痛后，我发现了模态页面这个“神器”，简直打开新世界大门！今天就来和大家聊聊这玩意儿怎么玩～

1.模态页面：弹窗界的“变形金刚”🤖

想象一下：你正在打游戏（当前上下文），突然弹出一个任务面板（模态页面），既不挡住游戏画面，又能让你专注处理任务——这就是模态页面的魅力！

它是个“大面板交互式弹窗”，和普通弹窗最大的区别是内容全靠自定义，想塞多少东西塞多少（比如你的考试答题卡）。ArkUI提供了两种形态：

半模态：非全屏弹窗，允许底层页面“露个脸”，适合做轻量级操作（比如选日期、填备注）。
全模态：霸道总裁式全屏覆盖，必须侧滑才能退出，适合需要沉浸式操作的场景（比如看超长答题卡）。

划重点：半模态支持侧滑、点蒙层、点关闭按钮退出，全模态默认只能侧滑——专治手残党误触！

2.半模态页面：温柔的“侧边小助手”👨💻

半模态就像你的贴心小秘书，不遮挡主界面，却能帮你快速完成任务。比如做个“纪念日管理”功能，选日期、写备注一气呵成～

生命周期：弹窗的“心跳记录”📅

半模态的一生很简单：

诞生前（onWillAppear）→ 登场（onAppear）→ 消失前（onWillDisappear）→ 退场（onDisappear）

就像舞台上的演员，每个阶段都有专属BGM（回调函数），方便你随时“操控”它的状态～

代码实现：手把手教你搭一个“纪念日小助手”🚀

@Entry
@Component
struct Index {
  // 定义页面是否显示的状态（是不是很像开关？）
  @State isShow:boolean=false;
  // 选中的日期：默认今天，防止用户选“明天考试”这种魔幻操作
  @State selectedDate:Date=new Date();
  // 备注信息：留空，等用户吐槽用
  @State remark:string="";

  // 创建半模态页面的方法：就像搭积木，把组件堆起来
  @Builder
  createSheet() {
    Column({ space: 10 }) { // 列布局，组件上下排，间距10px
      Row({ space: 10 }) { // 行布局，组件左右排，间距10px
        Text("纪念日：") // 标签，告诉用户这是选日期的地方
        // 日历选择器：右边对齐，字体颜色骚气红，点击能选日期
        CalendarPicker({ hintRadius: 10, selected: this.selectedDate })
          .edgeAlign(CalendarAlign.END)
          .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })
          .margin(10)
          .onChange((value) => { // 选完日期打印日志，方便debug
            console.info("CalendarPicker onChange:" + JSON.stringify(value))
          })
      }
      .margin({ top: 30 }) // 上边距30px，和上面的组件隔开
      .width("90%") // 宽度占父容器90%，防止撑破屏幕

      Row() { // 备注输入框区域
        Text("备注：") // 标签
        TextInput({ placeholder: "请输入备注信息" }) // 输入框，提示用户“快写点什么”
          .onChange(v => { // 输入内容实时更新到remark变量
            this.remark = v
          })
      }
      .width("90%") // 同样占90%宽度

      // 确认保存按钮：点击后弹Toast，关闭弹窗
      Button("确认保存")
        .width("80%") // 按钮窄一点，显得精致
        .onClick(() => {
          this.getUIContext().getPromptAction().showToast({
            message: "纪念日：" + this.selectedDate.toDateString() + " 备注：" + this.remark
          })
          this.isShow = false; // 关闭弹窗，世界清净
        })
    }
    .width("90%") // 整个半模态内容区占90%宽度
    .padding(20) // 内边距20px，防止内容挤成一团
  }

  // 主页面布局：一个按钮，点击打开半模态
  build() {
    Column({space:20}){
      Text("半模态页面") // 标题，简单粗暴
      Button("打开半模态页面") // 按钮，点击触发“开关”
        .bindSheet($$this.isShow,this.createSheet,
          {mode:SheetMode.EMBEDDED, detents: [SheetSize.MEDIUM, SheetSize.LARGE, 300]})
        .onClick(()=>{ // 点击时把“开关”打开（isShow设为true）
          this.isShow=true;
        })
    }
    .height('100%') // 撑满屏幕高度
    .width('100%') // 撑满屏幕宽度
  }
}

效果预览：从“丑拒”到“真香”的蜕变📱

打开前：主页面干干净净，只有一个“打开”按钮，像等待拆封的快递盒。
打开后：半模态从底部滑出，带着日历和输入框，仿佛弹出一个“秘密小抽屉”。
操作中：滑动选择日期、输入备注，底层页面“虚化”但不消失，随时提醒你“我还在这儿呢”。
关闭时：侧滑、点蒙层或点击按钮，弹窗顺滑消失，仿佛一切没发生过（但数据已经保存啦～）。

总结：模态页面为什么香？🤔

灵活度高：半模态/全模态随意切换，适配不同场景（考试答题卡用全模态，选日期用半模态）。
体验友好：不遮挡主界面，操作逻辑符合直觉（侧滑关闭超顺手）。
自定义强：从布局到交互全靠自己写，想多酷炫就多酷炫（比如给答题卡加个滑动翻页效果）。

下次准备聊聊全模态页面的实战案例，比如如何用它做一个“沉浸式考试答题卡”～如果你在开发中遇到什么奇葩问题，欢迎留言吐槽，咱们一起搞事情！💪

君志所向，一往无前！ 我是Feri，一个专注程序员成长的老司机，下次见～🚗💨

HarmonyOS NEXT开发实战：从图标库到布局属性全解析

CoderFeri — Fri, 27 Jun 2025 01:23:52 +0000

作者：Feri（12年+资深程序员，鸿蒙开发/Java技术专家）

一、HarmonyOS图标库深度应用

1.1 图标库核心优势

HarmonyOS官方图标库专为开发者设计，具备三大核心能力：

多场景覆盖：包含系统组件、设备控制、生活服务等18+分类图标
灵活定制：支持颜色（fillColor）、尺寸（width/height）、格式（SVG/PNG）实时调整
工程化适配：默认遵循ic_命名规范，与ArkUI框架无缝集成

1.2 图标下载与工程集成

操作步骤：

访问官方图标库：HarmonyOS图标库
选择SVG格式下载（推荐，支持无损缩放）
存储路径规范：resources/base/media/
命名优化示例：

   原文件：material-account.svg → 重命名：ic_user_account.svg

1.3 ArkUI图标组件实战

通过Image组件加载图标，并通过fillColor实现主题色适配：

@Entry
@Component
struct IconDemo {
  @State themeColor: ResourceColor = Color.Primary

  build() {
    Column() {
      // 标题栏
      Text("鸿蒙图标应用案例")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      // 图标展示区
      Row() {
        // 系统图标
        Image($r('app.media.ic_system_settings'))
          .width(48)
          .height(48)
          .fillColor(this.themeColor)
        .margin({ right: 30 })

        // 自定义业务图标
        Image($r('app.media.ic_user_avatar'))
          .width(60)
          .height(60)
          .fillColor(Color.Gray)
      }
      .padding(15)
      .backgroundColor(Color.White)
      .shadow({ radius: 5, color: '#1A000000' })
    }
    .width("100%")
    .padding(20)
  }
}

效果预览：

二、ArkUI布局属性权威指南

2.1 常用布局属性速查表

属性分类	核心属性	作用场景	典型值示例
容器布局	Column/Row/Stack	页面结构搭建	`Column() { ... }`
尺寸控制	width/height	组件大小定义	`width("90%")`
间距控制	padding/margin	内外边距调节	`padding(10)`
对齐方式	justifyContent/alignItems	子组件排列规则	`justifyContent.FlexEnd`

2.2 内边距padding深度解析

核心作用： 控制组件内容与边框的距离，提升视觉呼吸感

三种配置方式：

单值配置（等距内边距）：

   .padding(20)  // 上下左右各20px

双向配置（水平/垂直分离）：

   .padding({ horizontal: 15, vertical: 10 })  // 水平15px，垂直10px

四向精准配置：

   .padding({ top: 8, right: 16, bottom: 8, left: 16 })  // 典型按钮内边距

实战案例：

@Entry
@Component
struct PaddingDemo {
  build() {
    Column() {
      // 基础文本框
      Text("标准内边距")
        .backgroundColor('#FF9500')
        .fontColor(Color.White)
        .padding(12)

      // 自定义内边距
      Text("上10/右20/下10/左20")
        .backgroundColor('#34C759')
        .fontColor(Color.White)
        .padding({ top: 10, right: 20, bottom: 10, left: 20 })
    }
    .width("100%")
    .padding(20)
  }
}

效果对比：

2.3 外边距margin高级应用

核心作用： 控制组件与外部元素的间距，实现布局分层

实战技巧：

组件水平排列：通过margin({ right: 15 })设置元素间隔
卡片阴影效果：利用margin留出阴影显示空间
响应式布局：使用marginPercent适配不同屏幕

@Entry
@Component
struct MarginDemo {
  build() {
    Column() {
      // 卡片容器
      Row() {
        // 左侧组件
        Text("Feri编程")
          .backgroundColor('#FF3B30')
          .fontColor(Color.White)
          .padding(12)
          .margin({ right: 20 })  // 右侧边距20px

        // 右侧组件
        Text("鸿蒙开发")
          .backgroundColor('#007AFF')
          .fontColor(Color.White)
          .padding(12)
          .margin({ left: 20 })  // 左侧边距20px
      }
      .backgroundColor(Color.White)
      .padding(15)
      .margin(15)  // 卡片整体边距
      .shadow({ radius: 8, color: '#1A000000' })
    }
    .width("100%")
    .padding(10)
  }
}

布局效果：

🚀 进阶学习指南

图标库扩展：可结合Font Awesome等第三方图标库，通过SVG转换工具适配鸿蒙工程
布局实战：关注FlexGrow属性（弹性布局权重）与LayoutWeight（重量布局）的高级应用

💬 互动时间：

你在鸿蒙开发中遇到过哪些布局难题？评论区留言，下期针对性解答！

📌 关注@程序员Feri，获取更多「技术干货+搞钱攻略」，一起在鸿蒙赛道升级打怪！