Introduction

In this article, we’ll walk through the creation of a simple Note App using ArkUI and ArkTS on HarmonyOS. We’ll demonstrate how ArkUI’s modern UI capabilities integrate seamlessly with a relational database for efficient data management. By the end of this guide, you’ll have a foundational understanding of how to develop a functional app that allows users to add, update, delete, and view notes in a local database.

Understanding HarmonyOS and its Development Tools

HarmonyOS, developed by Huawei, is designed to provide a seamless experience across a wide range of devices, from smartphones to wearables and smart home products. For developers, HarmonyOS offers a robust set of tools and APIs optimized for creating apps within this ecosystem.

Key tools for HarmonyOS app development include:

• ArkUI: A UI framework for building modern, dynamic user interfaces that allow for easy navigation and interaction.

• ArkTS: A TypeScript-based programming language specifically tailored for HarmonyOS, providing syntax to work with ArkUI and integrate seamlessly with the system’s APIs.

In this tutorial, we’ll focus on using ArkUI and ArkTS to build our Note App, creating a responsive and smooth experience for users on HarmonyOS.

What You Need to Get Started with HarmonyOS App Development

To start developing apps for HarmonyOS, you will need the HarmonyOS SDK and DevEco Studio, which is the recommended IDE. DevEco Studio simplifies the app creation process, from building and debugging to testing.

The SDK provides tools in the following key areas:

• Application Framework: Includes ArkUI for UI development and Ability Kit for program services.

• System Services: Key management and networking libraries.

• Media Services: Tools for managing audio and media files.

• Graphics Services: ArkGraphics for 2D graphics and acceleration.

• Application Services: Libraries for game and location services.

• AI Capabilities: AI tools like the HiAI Foundation Kit.

These tools allow developers to create powerful, cross-platform apps that provide a consistent experience across HarmonyOS devices.

App Overview

Now that we’ve covered the basics of HarmonyOS development, let’s dive into building our Note App using ArkUI and ArkTS. This Note App provides an intuitive, minimalist user interface with a tabbed layout. Users can easily navigate through different sections to add, view, update, and delete notes.

The app’s core features are organized under various tabs, offering a streamlined and straightforward experience. Users can quickly manage their notes, making the app ideal for everyday use.

Note: To build this app, you should use SDK 5.0.0 (12) as the framework and DevEco Studio NEXT Developer Beta1 as the development environment.

Preparing Database Operations

Before diving into the UI, let’s set up the database operations that our Note app will rely on for data management. In this section, we’ll create functions to create, insert, update, delete, and retrieve notes from a local database.

Step 1: Create the Database

Start by creating a new file named DBUtils to encapsulate all database operations. We’ll use ArkData relational database (RDB) APIs in DBUtils.

In DBUtils, we’ll define functions for each key operation in our Note app.

The createDb() function defines the database configuration (STORE_CONFIG) and creates a table named NOTE_TABLE if it doesn’t already exist. This ensures our database is ready for subsequent operations.

Step 2: Insert a New Note

The insertNote() function inserts a new note into the NOTE_TABLE by creating a noteData object, where "NOTE" is the column name, and its value is the note content.

Step 3: Update an Existing Note

The updateNote() function updates an existing note in the NOTE_TABLE. It creates an updatedNoteData object with the new content and applies a condition to match the old content.

Step 4: Delete a Note

The deleteNote() function deletes a note from the NOTE_TABLE. It creates a delete condition based on the note content and executes the delete operation.

Step 5: Get All Notes

The getAllNotes() function retrieves all notes from the NOTE_TABLE. It queries the database and extracts the note content into a list of notes, which is then returned.

Integrating Database Operations in UI Component

Now that our database is set up, we can focus on the UI component, where users will interact with the app, view their notes, and manage them through a tabbed interface.

Step 1: Initial Setup in Index.ets

In the Index.ets file, we initialize core UI elements, tabs, and set up initial states.

State Variables:

• currentIndex: Keeps track of the current tab.

• notes: Stores the list of notes fetched from the database.

• content, buttonText, oldNote: Used for managing note input, button labels, and previous note content for updates.

Step 2: Initializing the Database

The aboutToAppear() method initializes the database when the component first loads. This lifecycle method ensures that the database setup happens just before the app appears on the screen.

Step 3: Loading Notes with loadNotes

The loadNotes() function uses the getAllNotes() method from DBUtils to fetch all notes from the database. It then updates the notes state with the list of notes.

Step 4: Handling Tabs with changeTab

The changeTab function is responsible for switching between different tabs (e.g., “Add Note” and “My Notes”).

Step 5: Building the Tab Bar with tabBarBuilder

The tabBarBuilder() function creates a tab bar with icons and titles for each tab. It allows users to navigate between tabs and highlights the active tab.

Step 6: Saving or Updating Notes with saveOrUpdateNote

The saveOrUpdateNote() function checks whether to save a new note or update an existing one based on the input and button state (“Save” or “Update”).

The function:

• Ensures the content isn’t empty.

• In the update flow, calls updateNote() to modify the note in the database and refresh the list.

• In the save flow, calls insertNote() to add the note to the database.

• Calls resetNoteState() to clear input fields after saving or updating.

Now that all steps have been covered, we hope this guide has provided a clear and complete path to building your own Note App on HarmonyOS.

Conclusion

This Note App demonstrates how to build a functional, user-friendly app using ArkUI and ArkTS on HarmonyOS. By combining ArkUI’s component-based UI design with ArkTS’s powerful data management capabilities, developers can efficiently create apps that deliver smooth and responsive user experiences. With this foundational structure, you are now ready to extend your app with more advanced features or customizations that meet your users’ needs.

Happy coding!

Original Source: Building a Note App With ArkUI and ArkTS on HarmonyOS | by Emine İNAN | Huawei Developers | Medium

This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system (up to API 12 as of now) in terms of application internationalization and localization, and is summarized based on actual development practices. It mainly serves as a carrier for technical sharing and communication. Mistakes and omissions are inevitable. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.
In today's era of globalization, application internationalization and localization have become key factors in enhancing user experience and expanding market share. The Huawei HarmonyOS Next system provides powerful tools and functions for developers to help create cross-language and cross-cultural applications. This article will introduce in detail the concepts, advantages, processes, and key steps of internationalization and localization of HarmonyOS Next applications, helping developers embark on the road to application globalization.

I. Concepts and Differences between Internationalization and Localization

(I) Internationalization (Internationalization, I18n)

Internationalization refers to the process of designing and developing an application so that it can adapt to different languages, regions, and cultures. It involves not only simple language translation but also the adaptation of various formats such as dates, times, numbers, currencies, weights and measures, as well as the universal design of interface layouts, icons, colors, and other elements. The goal of internationalization is to create an application that can be used globally without extensive code modifications. For example, in an internationalized application, the date format may be displayed in different styles depending on the user's region, such as "YYYY-MM-DD" (China) or "MM/DD/YYYY" (United States).

(II) Localization (Localization, L10n)

Localization is the process of customizing and optimizing an application for a specific target language and region on the basis of internationalization. This includes translating the interface text of the application into the local language, adjusting the interface layout to adapt to different text lengths and reading habits, and using local cultural elements and symbols. Localization ensures that the application can provide a natural, smooth, and user-expected experience in each target market. For example, when localizing an English application to Japan, not only should the text be translated into Japanese, but the interface layout may also need to be adjusted to adapt to the display of Japanese characters, and Japanese cultural elements may be used to enhance user affinity.

(III) Differences between the Two

Internationalization focuses on building the general framework and infrastructure of an application to enable it to support multiple languages and cultures; while localization is the personalized adaptation and optimization of an application for specific languages and regions. Internationalization is a global and forward-looking design concept, while localization is the actual implementation for specific markets on the basis of internationalization.

II. Advantages of Internationalization and Localization of HarmonyOS Next Applications

(I) Expanding the Global Market

Through internationalization and localization, applications can break through language and cultural barriers, attract users from different countries and regions, greatly expand market coverage, and increase the potential user base.

(II) Enhancing User Experience

Providing users with interfaces and functions that conform to their language habits and cultural backgrounds enables them to use the application more naturally and conveniently, thereby increasing user satisfaction and loyalty.

(II) Strengthening Competitiveness

In the global market competition, applications with internationalization and localization capabilities have an advantage, can better meet user needs, compete with local competitors, and enhance brand image and market share.

(IV) Reducing Development Costs

Adopting internationalization and localization design methods and following certain norms and standards during the development process can reduce the costs of separate development and maintenance for different languages and regions in the later stage.

III. Processes of Internationalization and Localization of HarmonyOS Next Applications

(I) Requirement Analysis

1. Target Market Research: Understand the potential markets of the application, including factors such as languages, cultures, user habits, and laws and regulations in different regions. For example, certain regions may have different cultural meanings for specific colors or icons, which need to be considered in the design.

2. Function Requirement Evaluation: Determine the functions that the application needs to support in different language and cultural environments, such as multi-language input, payment methods in different regions, and localized push notifications. ### (II) Design Stage

3. Interface Layout Design: Adopt a flexible layout method and reserve sufficient space to adapt to the length changes of different language texts. At the same time, consider functions such as interface mirroring to support the display requirements of right-to-left (RTL) languages such as Arabic.

4. Resource Separation: Separate interface texts, pictures, audio, and other resources from the code logic to facilitate subsequent translation and replacement. For example, store all string resources in independent files instead of hard-coding them in the code. ### (III) Development Stage

5. Using the Internationalization Framework: Utilize the internationalization and localization development services provided by HarmonyOS Next, such as the Localization Kit, to perform language and region-related settings, resource loading, and format conversions.

6. Function Implementation and Adaptation: According to the requirement analysis, implement functions that support multiple languages, such as displaying the corresponding interface according to the user's language setting and handling date and time formats in different regions. ### (IV) Testing Stage

7. Language Testing: Have local language experts or users test the translation accuracy, language fluency, and interface display of the application to ensure the quality of the application in different language environments.

8. Localization Testing: Include interface layout testing, function compatibility testing, and cultural adaptability testing to check whether the application can operate normally in each target region and meet the expectations of local users.

9. Pseudo-Localization Testing: Before formal localization, simulate the localization process by using pseudo-translated texts and special test regions (such as en-XA) to discover potential localization problems such as interface truncation and incorrect text direction. ### (V) Release and Maintenance Stage

10. Multi-Language Version Release: Release the application in corresponding language versions according to different target markets.

11. Continuous Optimization: Collect user feedback, promptly fix localization-related problems, and continuously update and optimize the internationalization and localization content of the application according to market changes and user needs. ## IV. Key Steps of Internationalization and Localization of HarmonyOS Next Applications ### (I) Setting the System Language and Region

12. Obtaining the System Language and Region: Use the methods i18n.System.getSystemLanguage() and i18n.System.getSystemRegion() to obtain the language and region information of the current system.

13. Setting the Application Preferred Language: The method i18n.System.setAppPreferredLanguage() can be used to set a specific preferred language for the application, so that the application loads the corresponding resources according to the user's setting or the default language when it starts. For example:

import { i18n } from '@kit.LocalizationKit';
import {BusinessError } from '@kit.BasicServicesKit';
try {
    i18n.System.setAppPreferredLanguage("zh-Hans"); // Set the application preferred language to Simplified Chinese
} catch(error) {
    let err: BusinessError = error as BusinessError;
    console.error(`Failed to set the application preferred language, error code: ${err.code}, message: ${err.message}.`);
}

(II) Resource File Configuration and Management

1. Determining the Target Region: Clearly define the languages and regions that the application needs to support, referring to the region identifier (consisting of language, script, country/region, and extension parameters).

2. Creating Resource Directories and Files: - Resource directories include the default (base) directory and qualifier directories (such as resources/en_GB-vertical-car-mdpi). The default directory stores general resources, and the qualifier directories are customized according to languages, scripts, etc., and are used to store resources for specific regions. - Create resource files (such as .json files) in the corresponding directories and classify and store resources such as strings, pictures, and audio. For example, store string resources in different languages in the strings.json file in the corresponding language directory.

3. Resource Matching Rules: The application matches the user's language preference list with the resource directories and displays the most matching resources first. If no matching resources are found, the content in the default directory is used. ### (III) Interface Text Processing

4. Avoiding Hard Coding: Extract all the text displayed on the interface to resource files and load them using relevant interfaces, avoiding directly hard-coding strings in the code. For example, define in the strings.json file:

{
    "name": "welcome_message",
    "value": "欢迎使用应用"
}

Then obtain and display this string in the code through the resource loading mechanism.

1. Supporting Singular and Plural Forms: According to the singular and plural rules of different languages, use methods such as getPluralStringValueSync to correctly handle the singular and plural forms of nouns or unit expressions. For example, in English, for the word "apple", display "apple" (singular) or "apples" (plural) depending on the quantity. ### (IV) Internationalization of Dates, Times, Numbers, and Weights and Measures

2. Date and Time Formatting: - Use the format interface of the DateTimeFormat class to format date and time objects into appropriate strings according to the language and cultural habits of the user's region. For example:

import { intl } from '@kit.LocalizationKit';
let date = new Date(2021, 8, 17, 13, 4, 0);
let dateFormat1 = new intl.DateTimeFormat('zh-CN', {dateStyle: 'full', timeStyle: 'full'});
let formattedDate1 = dateFormat1.format(date); // Friday, September 17, 2021 China Standard Time 13:04:00

- At the same time, pay attention to handling daylight saving time transitions to ensure that the application displays the correct time during daylight saving time. The Calendar class can be used to obtain and set time zones, calculate time offsets related to daylight saving time, etc.

1. Number and Weights and Measures Formatting: - Through the format interface of the NumberFormat class, format numbers according to the user's region settings, including decimal separators, grouped displays, and currency symbols. For example:

import { intl } from '@kit.LocalizationKit';
let numberFormat1 = new intl.NumberFormat('zh-CN', {notation:'scientific', maximumSignificantDigits: 3});
let formattedNumber1 = numberFormat1.format(123400); // 1.23E5

- For weights and measures conversion, use the unitConvert interface of the I18NUtil class to perform unit conversion and formatting according to different weights and measures systems.

(V) Localization Testing and Optimization

1. Comprehensive Testing: Conduct language testing, localization testing, and pseudo-localization testing to cover all functions and interface elements of the application. During the testing process, check issues such as translation accuracy, interface layout rationality, and cultural adaptability.

2. Problem Fixing and Optimization: According to the testing results, promptly fix the discovered problems and optimize the application. This may include adjusting the interface layout, modifying the translation text, optimizing resource loading, etc. At the same time, continuously monitor user feedback and continuously improve the internationalization and localization quality of the application. ### (VI) Continuous Update and Maintenance

3. Language and Resource Updates: With the changes in the market and the evolution of user needs, promptly update the language resources of the application, including the update of translation texts and the support of new languages.

4. Function Adaptation and Optimization: According to the user feedback and market needs in different regions, adapt and optimize the functions of the application to ensure that the application always maintains a good user experience globally. Through the above steps, we can gradually realize the internationalization and localization of HarmonyOS Next applications and create high-quality applications that adapt to the global market. In the actual development process, various language and cultural differences need to be fully considered, attention should be paid to details, and continuous optimization should be carried out to meet the diverse needs of users in different regions.

Original source: The Road to Globalization of HarmonyOS Next Applications: Internationalization and Localization - DEV Community

In daily development, manually switching signature files and package names when dealing with multi-signature and multi-product build outputs is error-prone and time-consuming. HarmonyOS provides custom hvigor plugins and multi-target product building capabilities. We can use hvigor plugins to dynamically modify project configurations, ensuring that a single codebase can switch between different package names while maintaining core functionality. This allows us to generate customized build products through multi-target product building.

I. Understanding Multi-Target Product Building

1. What is Multi-Target Product Building?

Simply put, multi-target products refer to highly customized output modules. Developers can build different HAP, HAR, HSP, APP, etc., by defining different build configurations to achieve differentiation between products. For detailed customization options, see: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-target#section19846433183815

2. Build Schematic Diagram

II. Implementing Multi-Target Product Building in a Project

(Source code reference branch: feature/multiTargetProduct)

1. Configuring Multi-Target Product Building

Multi-target product building requires modifying configuration files like build-profile.json5 and module.json5 to define different product and target entries. Developers can specify device types, source sets, resources, and assign different targets to products. The build tool generates targets based on these configurations and combines them into customized products.

Configure Signing Configs for Different Projects:

Define default, demo_debug, and demo_release signing configurations for debugging and release builds:

"signingConfigs": [
  {
    "name": "default", // Default certificate
    "type": "HarmonyOS",
    "material": { /* ... default certificate details ... */ }
  },
  {
    "name": "demo_debug", // Debugging certificate
    "type": "HarmonyOS",
    "material": { /* ... debug certificate details ... */ }
  },
  {
    "name": "demo_release", // Release certificate
    "type": "HarmonyOS",
    "material": { /* ... release certificate details ... */ }
  }
]

Define Products with Different Signing Configs:

Each product uses a specific signing configuration to generate differentiation outputs:

"products": [
  {
    "name": "default",
    "signingConfig": "default", // Default product uses default certificate
    "compatibleSdkVersion": "5.0.1(13)",
    "runtimeOS": "HarmonyOS",
    "buildOption": { /* ... build options ... */ }
  },
  {
    "name": "products_debug",
    "signingConfig": "demo_debug", // Debug product uses debug certificate
    "compatibleSdkVersion": "5.0.1(13)",
    "runtimeOS": "HarmonyOS",
    "buildOption": { /* ... build options ... */ }
  },
  {
    "name": "products_release",
    "signingConfig": "demo_release", // Release product uses release certificate
    "compatibleSdkVersion": "5.0.1(13)",
    "runtimeOS": "HarmonyOS",
    "buildOption": { /* ... build options ... */ }
  }
]

Link Products to Targets in HAP/HSP Modules:

Configure targets in modules to associate products with build outputs:

"modules": [
  {
    "name": "entry",
    "srcPath": "./entry",
    "targets": [
      {
        "name": "default",
        "applyToProducts": [
          "default",
          "products_debug",
          "products_release"
        ]
      }
    ]
  }
]

2. Switching Product Configurations and Output Packages

Manual Switching Interface:

III. Building Different Package Names and Configurations on Multi-Target Products

(Source code reference branch: feature/differentPackageConfigurations)

1. Adding Signing and Product Configs for a Second App

New Signing Configuration for Second App:

"signingConfigs": [
  // ... existing configs ...
  {
    "name": "demo_debug_test2", // Signing for the second app
    "type": "HarmonyOS",
    "material": { /* ... testDemo2 certificate details ... */ }
  }
]

Define a New Product with Unique Identifiers:

Configure label, icon, bundleName, and output for differentiation. Use buildProfileFields for custom parameters:

"products": [
  // ... existing products ...
  {
    "name": "products_debug_test2",
    "signingConfig": "demo_debug_test2",
    "compatibleSdkVersion": "5.0.1(13)",
    "runtimeOS": "HarmonyOS",
    "label": "$string:app_name_test2", // Second app's name
    "icon": "$media:app_icon_test2", // Second app's icon
    "bundleName": "com.atomicservice.6917571239128090930", // Second app's package name
    "buildOption": { /* ... build options ... */ },
    "output": { "artifactName": "products_debug_test2" } // Unique output directory
  }
]

2. Implementation Results After Configuration

Output Product Information:

Desktop icon and application name after it takes effect:

3. Querying and Using Custom Constants

Use buildProfileFields to define product-specific parameters for code differentiation.

Configure Custom Constants in Products:

"products": [
  {
    "name": "default",
    "buildOption": {
      "arkOptions": {
        "buildProfileFields": {
          "isStartNet": false,
          "isDebug": true,
          "productsName": "default"
          // ... other custom parameters ...
        }
      }
    }
  },
  // ... repeat for other products with unique values ...
]

Access Custom Configs in Code:

Import BuildProfile and use parameters in UI:

import BuildProfile from 'BuildProfile';  
Column() {  
  Text(`productsName:${BuildProfile.productsName}`)  
  // ... other Text components for custom fields ...  
}  

UI Display of Custom Parameters:

IV. Conclusion

Multi-target product building allows rapid switching between different build configurations and solves package name differentiation for scenarios like multi-entity app submissions (e.g., domestic vs. foreign entities on AG). While this covers basic customization, advanced needs (e.g., dynamic client_id/app_id in module.json5) require integration with hvigor plugins. Future articles will explore using custom scripts to modify hard-coded configurations during builds.

VI. Source Code Repository

Repository Address

VII. Reference Materials

Multi-Target Product Building Practice - Huawei HarmonyOS Developers
HarmonyOS Multi-Environment Building Guide - Juejin

Original source links: HarmonyOS Next： Build Application with Different Package Names - Discuss - LeetCode redirected from HarmonyOS Next： Build Application with Different Package Names | Hacker News

In Android and iOS development, dependencies and collaborations are often carried out in the form of binary products. Android uses Maven as the repository, and iOS has Pod as the repository. We can use open libraries provided by others on the officially provided platforms, which greatly improves everyone's development efficiency. However, some libraries related to a company's business do not want to be used by external personnel. Uploading them to external common repositories is not very safe. Many companies have built private repositories internally. On the one hand, it is more secure, and on the other hand, pushing and pulling products is usually faster.

HarmonyOS has the same issue. We can conveniently use open products from third parties on the official repository platform, but for a company's internal business, it still needs to rely on private repositories. This article builds its own private repository based on the tools provided by the official.

Introduction to HarmonyOS Shared Packages

HarmonyOS shared packages are divided into static shared packages and dynamic shared packages:

• HAR (Harmony Archive) is a static shared package that can contain code, C++ libraries, resources, and configuration files. Through HAR, multiple modules or multiple projects can share relevant codes such as ArkUI components and resources. HAR is different from HAP and cannot be independently installed and run on devices. It can only be referenced as a dependency of application modules.

• HSP (Harmony Shared Package) is a dynamic shared package. Static shared packages will be packaged into each dependent HAP, resulting in a large package size and repeated packaging of multiple copies of public resources and codes into the application. Dynamic shared packages allow multiple HAPs to share the same public resource code. HSP only supports sharing within an application and does not support cross-application sharing.

Building a Private Repository with the ohpm-repo Private Repository Tool

The official provides the ohpm-repo tool to help developers quickly build lightweight ohpm private repositories. It is compatible with the ohpm package manager and caches all dependencies on demand to accelerate installation in a private network.

ohpm-repo supports single-point deployment and multi-instance deployment:

• Single-point deployment: ohpm-repo is only deployed and used on one machine.

• Multi-instance deployment: ohpm-repo will be deployed on multiple machines with the same configuration content and shared data storage space.

Installation of the Dependent Environment

1. ohpm-repo depends on node to run and supports node.js 16.x and above versions. Nodejs needs to be installed first, and the environment needs to be configured. NodeJs can be downloaded from the official website (https://nodejs.org/download/release/latest/).

Downloading the ohpm-repo Tool

1. Download the ohpm-repo tool. The download address is: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-software-download-0000001507075446

2. Unzip the ohpm-repo tool.

Configuring the ohpm-repo Environment Variables

1. Configure the path of the bin directory in the unzipped directory of the ohpm-repo tool package to the system environment variable path: export PATH=$OHPM-REPO-PATH/bin:$PATH

2. Execute the command ohpm-repo -v to view the version number and verify that the unzipped package is intact.

Configuration of the ohpm-repo Service Configuration File

Enter the conf directory in the unzipped directory, open the config.yaml file. The default configuration is as follows:

##### server configuration section #####
listen: 0.0.0.0:8088
# listen:
# - localhost:8088            # Listen to the local loopback address
# - http://localhost:8088     # Listen to the local loopback address
# - 0.0.0.0:8088              # Listen to all local addresses (INADDR_ANY)
# Protocol Configurable http or https，default http
# port: 1-65535(Windowssystems)/ 1024-65535(LinuxmaybeMacsystems）

# selectable (listen because of https You must configure the)
https_key: ''                 # https service-usable key pathways  (No configuration defaults to'')
https_cert: ''                # https service-usable crt pathways  (No configuration defaults to'')

##### server deploy root section #####
deploy_root: ''                # Installation root directory (No configuration defaults to `<existing userhomedirectory (on computer hard drive)>/ohpm-repo`)，Only absolute paths are supported，and the path directory must exist

##### server numeric limit section #####
max_package_size: 100          # Upload packet size limit inMB (0, 100]，不配置默认为 100
max_extract_size: 500          # Unpacked zip size limit，The unit isMB [max_package_size, 500]，No configuration defaults to 500
max_extract_file_num: 10240    # Limit the number of files in a zip archive after decompression (0, 102400]，No configuration defaults to 10240
user_rate_limit: 100           # User access frequency control in times/s (0, 10000]，No configuration defaults to 100
fetch_timeout: 60              # Request/response timeout in seconds (0, 3600]，No configuration defaults to 60
keep_alive_timeout: 60         # TCP Hold connection timeout，In seconds. (0, 3600]，不配置默认为 60
api_timeout: 60                # apitimeout，In seconds.(0, 3600]，No configuration defaults to 60
upload_lock_hour: 24           # After taking down all versions of a package, a time-limited ban on uploads of packages with the same name will be imposed.，单Bit is the hour. (0, 168]，non-configuration，default 24
upload_max_times: 100          # Limit on the number of uploads in a 24-hour period for a single user (0, 10000]，No configuration defaults to 100

##### metadata storage section #####
## Data storage type filedb respond in singing mysql Either/or, not both
db:                         # must yaml Writing in array form
  type: filedb
  config:                   # If you want to change the storage path and keep the old data, you need to change the number under the old path to the new path. Migration of documents to new paths
    path:./db              # Local data storage path, not configured defaults to <deploy_root>/db;

#db:                        # Must be written in yaml array form
#  type: mysql
#  config:
#    host: "localhost"      # Database host address
#    port: 3306             # database port (0,65535]
#    username: root         # User name of the database
#    password: "password"   # User password for the database (please configure it in plaintext, it will eventually be converted to ciphertext in the deployment directory)
#    database: "repo"       # database name

##### storage section #####
## File storage typefs,sftp 和 custom Three choices, not more.

store:                               # Must be written in yaml array form
  type: fs
  config:                            # If you want to change the storage path after uploading a resource, you need to migrate the data under the old path to the new path.
    path:./storage                  # The path to the triple repository store that has been shelved, without configuration the default is  <deploy_root>/storage;
    #server: http://localhost:8088   # Tripartite library download link, no default value configured

# The file storage type is sftp 时，Configure up to three sftp services
#store:                               # Must be written in yaml array form
#  type: sftp                         # if and only if db The type of the mysql hour，store It is only when the type of the sftp
#  config:
#    location:
#      -
#        name: test_one_sftp          # Host name, name cannot be duplicated with other sftp configurations
#        host: "localhost"            # host address
#        port: 22                     # host port (0,65535]
#        read_username: "read"        # Name of the user with read access to the host
#        read_password: "password"    # Passwords for users with read access to the host (please configure plaintext, it will be converted to ciphertext in the deployment directory)
#        write_username: "write"      # Name of the user with write access to the host
#        write_password: "password"   # Passwords for users with write access to the host (please configure plaintext, it will be converted to ciphertext in the deployment directory)
#        path: /source22              # Path to a file relative to the sftp root directory, starts with / only, and the path folder must exist.
#      -
#        name: test_two_sftp
#        host: "localhost"
#        port: 24
#        read_username: "read"
#        read_password: "password"
#        write_username: "write"
#        write_password: "password"
#        path: /source24
#    #server: http://localhost:8088   # The address of the local repository download link, without configuring the default value of listen,
#store:
#  type: custom                                            # is a custom storage plugin type, the custom storage plugin development process is described in the guidance document
#  config:
#    export_name: CustomStorage                            # Class name of the plugin export
#    plugin_path:../plugins/CustomStorage.js              # The absolute path of the plugin or the path relative to the ohpm-repo package, it is recommended to place the plugin in the plugins directory of the package
#    custom_field: "test"                                  # Custom fields, get the value of a custom field by introducing the getStorageConfigInfo method of libs/common/getStorageConfigInfo.js
#    #server: http://localhost:8088                        # Local repository download link address, not configured to take the default value of listen
##### uplink section #####
uplink_cache_path:./uplink      # Cache path, no configuration defaults to <deploy_root>/uplink
uplink_cache_time: 168           # Remote packet metadata cache time, in hours, default 168 hours, range (0, 8760]

##### log section #####
logs_path:./logs                # log path, no configuration defaults to <deploy_root>/logs

##### log level section #####
# Log Levels: In descending order, the levels are all、trace、debug、info、warn、error、fatal、mark、off
# run，operate respond in singing access Not configured or misconfigured, defaults to info
loglevel_run: info
loglevel_operate: info
loglevel_access: info

It includes listening ports, https configuration, the private repository deployment directory deploy_root, service-related configurations, storage configurations, logs, etc. Just configure it according to the actual situation.

Regarding the storage module:
The db is the configuration item for metadata storage. The db supports local storage of fileDB and storage in the mysql database.
The store is the configuration item for file storage. The store supports local storage, sftp storage, and custom plugin storage.

Methods for Modifying the Configuration File After the Private Repository is Successfully Started:

• When starting the private repository for the first time, execute the install command to specify the configuration file: Find the specified configuration file to modify its content, then re-execute install to specify the modified configuration file, and then execute start to start the private repository.

• When starting the private repository for the first time, execute the install command without specifying the configuration file: The configuration file in the conf directory under the unzipped path of the private repository compression package is used by default. Modify the content of this file, and then re-execute the install and start operations.

Installation and Startup

Execute ohpm-repo install to install. After the installation is completed, set the environment variables according to the configuration. After the setting is completed, execute ohpm-repo start to start the service.

Using Private Repository Shared Packages

By default, the client ohpm tool only pulls dependency packages from the official public repository. To pull from a private repository, additional configuration is required. There are two configuration methods:

1. Configure this private repository for all projects: ohpm config set registry <Configured Private Warehouse Service Address>/repos/ohpm

2. Configure for a certain dependency installation: ohpm install @ohos/lottie --registry <Configured Private Warehouse Service Address>/repos/ohpm

The configured private repository service address above refers to the address information of store.config.server in the configuration file. For example, if store.config.server is

http://127.0.0.1:8088

, then the registry is: http://127.0.0.1:8088/repos/ohpm. If store.config.server is not configured, the default value will be taken.

Publishing Shared Packages

Locally developed shared packages, whether static shared packages or dynamic shared packages, can be published through the ohpm command tool or using the Web page. For convenience and efficiency in general development work, we usually use the command line to publish.

1. Generate an ssh key locally: ssh-keygen -m PEM -t RSA -b 4096 -f <your_key_path>

2. Log in to the ohpm-repo private repository management address, click on the personal center in the upper right corner of the home page, and add a new public key. Paste the content of the public key file (<your_key_path>.pub) into the public key input box.

3. Set the private key path: ohpm config set key_path <your_key_path>

4. Log in to the ohpm-repo private repository management address, click on the personal center in the upper right corner of the home page, and copy the publishing code.

5. Configure the publishing code to the.ohpmrc file: ohpm config set publish_id <your_publish_id>

6. Publish the static shared library: ohpm publish demo.har

7. Publish the dynamic shared package: ohpm publish demo.tgz

   1. The HSP package of the dynamic shared package cannot be directly published in the private repository and needs to be converted into a.tgz package first.

   2. Switching the compilation mode to the release mode will package out a.taz package.

Module Configuration

In the library module (at the same level as the src folder), add the following files:

• Newly create a README.md file: In the README.md file, it must include the introduction and reference method of the package, and more detailed introductions can also be added according to the content of the package.

• Newly create a CHANGELOG.md file: Fill in the version update record of HAR.

• Add a LICENSE file: The LICENSE license file.

The README.md file will eventually be displayed on the private repository web platform, and the dependent users can use it directly according to the description in README.md, so it is best to describe it clearly.

Explanation of the oh_package.json5 configuration file:

{  
    "parameterFile": "../dependencies.json5",  
    "keywords": [  
        "asr"  
    ],  
    "name": "@xx/base-asr",  
    "version": "1.0.0-rc.9",  
    "repository": "http://gerrit.google.com/mobile_harmony/base_asr",  
    "description": "asr sdk",  
    "main": "Index.ets",  
    "author": "qingkouwei",  
    "license": "Apache-2.0",  
    "dependencies": {  

    }  
}

The module name, version number, and description must meet the requirements. Otherwise, the upload to the private repository will fail. The version number can only increase sequentially and cannot be overwritten infinitely like a SNAPSHOT in Android.

Best Practices

In the actual development process, an engineering project may have multiple SDKs. After the SDKs are developed, they need to be integrated into other engineering projects. Sometimes, when locating problems and debugging, they may need to be frequently uploaded to the private repository, and other engineering projects rely on the packaged ones for debugging. In this way, it is particularly cumbersome and inefficient to compile the SDK each time and then execute commands to upload it, especially when an engineering project has multiple SDKs and these SDKs also have dependencies.

The best way is to be able to compile and upload to the private repository with one click through scripts, and upload them one by one according to the dependency relationship. It is also possible to package and upload a certain module separately.

First, create a version.json5 to store the SDK version:

{  
  "project": {  
    "sdk_version": "1.1.0-rc.1",  
  }  
}

Automatic packaging:

def run_commands(modulename, productname):  
    hvigor_home = '/Applications/DevEco-Studio.app/Contents/tools/hvigor'  

    # Packing Command
    command1 = 'node %s/bin/hvigorw.js --mode module -p product=default -p module=%s@default -p buildMode=debug assembleHar --analyze --parallel --incremental --daemon' %(hvigor_home,modulename)  

    # Wait for the first command to complete    
    process1.wait()  

    # Upload command   
    ohpm publish productname
    process2.wait()

Automatically modify the version number:

python
def changeVersionAModule():  
    with open('version.json5', 'r') as f:  
        data = json5.load(f)  
        versionName = data['project']['sdk_version']  

        with open('AModule/oh-package.json5', 'r') as f:  
            aData = json5.load(f)  
            aData['version'] = versionName  
            with open('AModule/oh-package.json5', 'w') as f:  
                json.dump(aData, f, indent=4)  

        with open('dependencies.json5', 'r') as depf:  
            depData = json5.load(depf)  
            depData

Original source: HarmonyOS Next Private Repository Construction in Practice - DEV Community

Welcome everyone to join the nut pie and build the HarmonyOS ecosystem: https://gitcode.com/nutpi

Flutter 3.22. We’re bringing WebAssembly to the stable channel, a fully featured Vulkan backend for Impeller on Android, promising smoother graphics and a major performance boost. We’re also introducing streamlined workflows with new widget state properties, dynamic view sizing, and improved form validation. But that’s not all — you’ll find flavor-conditional asset bundling, a preview of Vertex AI for Firebase in Dart, and updated DevTools to make your life easier.

In just a few months since our last update, we’ve merged an impressive 1595 pull requests from the Flutter community, with 37 new community members contributing to Flutter for the first time!

So, dive in and discover all the new features and enhancements that the Flutter community has brought to this latest release!

WebAssembly

With the release of Flutter 3.22, Wasm is now available on the stable channel, offering significant performance improvements. In our internal benchmarks using Chrome on an M1 MacBook, the Wonderous app’s frame rendering time improved by 2x on average and 3x in worst-case scenarios.

These enhancements are vital for apps with animations and rich transitions, where maintaining a smooth frame rate is essential. Wasm helps achieve this by reducing performance bottlenecks, resulting in smoother animations and transitions. To start using Wasm with your Flutter web apps, check out our Dart Wasm documentation and Flutter Wasm documentation. For the full announcement, visit the Flutter at Google I/O blog post.

Engine

Flutter 3.22 introduces significant updates to Impeller, the rendering engine that powers your Flutter applications. Key highlights include the completion of the Vulkan backend on Android for smoother graphics and improved performance, ongoing optimizations for blur effects and complex path rendering, and a new experimental API for testing with Impeller. In line with our roadmap, we’re committed to enhancing Impeller’s quality and performance, including completing the iOS migration to Impeller and expanding Android support.

Impeller

Vulkan backend feature complete on Android

In this release, Impeller’s Vulkan backend for Android is feature complete. In particular, in the past few months, the team has been hard at work completing the implementation of fast advanced blends, support for custom fragment shaders with the FragmentProgram API, PlatformView support (though it requires a small API migration), and fully implementing all blur styles.

Android preview

In the 3.19 stable release, after releasing improvements in Impeller’s OpenGL backend, we invited users to try out Impeller on Android devices both with and without Vulkan support. Over the past few months, after evaluating the performance of the OpenGL backend and estimating the remaining work on the Vulkan backend, we have decided to focus our efforts on making the Vulkan backend production ready first.

Impeller solves the issue of shader compilation jank. Additionally, in our benchmarks it outperforms the legacy renderer on average, 90th, and 99th percentile frame times. We therefore believe that the performance of the Vulkan backend on Android is acceptable. In this release (3.22), an app that opts-in to Impeller will use the Vulkan backend where available. In a future release, this will become the default. When an app that opts-in to Impeller runs on a device that doesn’t support Vulkan, Flutter will gracefully fall back automatically to using OpenGL ES with Skia. No action is necessary on your part. In the future, when we believe the OpenGL ES Impeller backend is production ready, this fallback will also use Impeller.

As the Impeller preview on Android continues through the 3.22 stable cycle, we request that Flutter developers upgrade to the latest stable version, and file issues about any shortcomings noticed when Impeller is enabled. Feedback at this stage is invaluable to ensuring that Impeller is successful on Android and that we will be able to confidently make it the default renderer in a release later this year. The Android hardware ecosystem is very diverse. For that reason, the most helpful feedback about Impeller should include detailed information about the specific device and Android version where issues occurred.

Blur performance improvements

Blur has been reimplemented in Impeller for both iOS and Android. In particular, the new approach, which is similar to Skia’s, reduces the CPU and GPU time of blurs by nearly half in benchmarks.

The chart below shows worst-case, 99%-ile, 90%-ile, and average frame rasterization times and GPU frame times in ms on an iPhone 11 device in a pathological benchmark intended to highlight blur performance. After rewriting Impeller’s blur, both the CPU and GPU cost of backdrop filter blurs has been nearly halved. This scale of this improvement translates to non-pathological cases as well, as would appear in typical apps.

Stencil-then-Cover

Impeller on both iOS and Android has moved to a new rendering strategy based on the Stencil-then-Cover approach described in the chapter “Drawing Filled, Concave Polygons Using the Stencil Buffer” in the OpenGL Redbook. Team members discussed more on this technique as it applies to Flutter in GitHub issue #123671.

This approach solves the issue where the raster thread was spending too much time calculating tessellations for complex paths on the CPU for example, SVGs and Lottie animations. After the change, the total frame time (UI thread on the CPU + raster thread on the CPU + GPU work) is much lower for frames that contain complex paths. Users will notice that Lottie animations and other complex paths render more smoothly, with lower CPU utilization, and slightly higher GPU utilization.

While pleased with these improvements, there is still more work to do. Among other opportunities, we are aware that polyline generation remains prominent in CPU profiles, and we intend to investigate shifting this work to the GPU, as well.

New API

While still experimental, flutter test now accepts the --enable-impeller flag, which exercises Impeller using the Vulkan backend.

Framework

Widget state properties

MaterialState has been moved outside of the Material library and renamed WidgetState, in order to make it available to Cupertino, the base Flutter framework, and package authors. For more information on migrating to the new WidgetState, see the migration guide.

Dynamic view sizing

Enhancements to dynamic view sizing benefits developers building responsive layouts, ensuring better UI adaptability across various device screens.

Improved form validation

Thanks to the contributions of Flutter community member SharbelOkzan, Flutter 3.22 comes with more flexible form validation methods allowing developers to create more robust user input handling, enhancing both usability and security.

Covariants in 2D APIs

Reducing the need for type casts in 2D graphics APIs simplifies development workflows and enhances performance, important for games and complex animations.

Flavor-conditional asset bundling

Developers using the flavors feature can now configure individual assets to be bundled only when building for a specific flavor. For more information, check out Conditionally bundling assets based on flavor.

Transformation of assets using Dart packages

Users can now configure Dart packages to transform their app’s assets as they are bundled. For more information, check out Transforming assets at built time.

Android

Deep linking

Deep links can significantly improve the user experience in your Flutter app, acting as shortcuts that seamlessly guide users to specific content within your app, boosting engagement, and driving sales. While Universal Links for iOS and App Links for Android are highly recommended for their security and user-friendly nature, setting them up can be a bit tricky.

In the last Flutter stable release, we introduced a deep link validator tool within DevTools that supports checking web configuration for Android apps. In this version, we added a new set of features to help verify setups within your Android manifest files.

For more information on using this tool, check out Validate deep links.

Predictive back gesture

Flutter now adds more support for Android’s upcoming predictive back feature, where users can peek at the previous route or even the previous app during a back gesture. This is still behind a feature flag on Android devices, but you can find details on how to try it out yourself on GitHub.

Flutter tool enforces version requirements on Gradle, AGP, Java, and Kotlin

In this release, the Flutter tool enforces a policy regarding the versions that it supports for Gradle, the Android Gradle Plugin (AGP), Java, and Kotlin. Initially, the tool only provides warnings.

Currently, the supported version ranges are as follows:

• Gradle — Fully supported 7.0.2 to current, warn otherwise

• AGP — Fully supported 7.0.0 to current, warn otherwise

• Java — Fully supported Java 11 to current, warn otherwise

• Kotlin — Fully supported 1.5.0 to current, warn otherwise

In the next major release these warnings will become errors, which can be overridden with the flag --android-skip-build-dependency-validation. More generally speaking, the tool provides a warning for at least one release before fully dropping support (generating an error) for a given version of these dependencies.

This policy was discussed in an associated design spec. Comments and feedback are always welcome.

Support for using Gradle Kotlin DSL in Gradle build scripts on Android

Gradle Kotlin DSL is now supported in Flutter, providing an alternative to the traditional Gradle Groovy DSL. This support allows for a better code editing experience, featuring auto-completion, quick access to documentation, source navigation, and context-aware refactoring.

This initial support was contributed by GitHub user bartekpacia. Developers can now choose to rewrite their Gradle build scripts in Kotlin to take advantage of these benefits, although the Flutter tool doesn’t yet allow for selecting Kotlin over Groovy when using flutter create.

For more details, check out the PR 140744 by bartekpacia.

Platform views improvements

Heads up for all Flutter app developers! If you’re using Flutter to build apps that rely on native Android components (like maps, web views, or certain UI elements), we have some important news.

Due to a bug in Android 14, apps built with older versions of Flutter might not work properly on devices running this new Android version.

Flutter 3.22 fixes this issue and improves the overall performance of these native components in your Android apps. So, to ensure your app runs smoothly on all Android devices, make sure to rebuild and release your app with Flutter 3.22.

This update also includes behind-the-scenes improvements to make platform views on Android more reliable and performant overall.

End of support for KitKat

Flutter’s minimum supported Android version is now Lollipop (API 21). Beginning with Flutter’s 3.22 stable release, Flutter will no longer work on devices running Android KitKat (API 19). For more details, see our deprecation guide.

iOS

Platform view performance

We understand that platform view performance on iOS has been a pain point for many Flutter developers. This has been especially noticeable within scroll views when using platform views.

Recent updates directly address these concerns, with significant improvements in scenarios like embedding multiple inline ads within an article. Here are some key improvements in our benchmark:

• Reduced GPU usage: GPU usage has been reduced by 50%, leading to less power consumption and a potentially smoother user experience.

• Improved frame rendering: Average frame render times have decreased by 1.66ms (33%).

• Minimized jank: Worst-case frame render times have been reduced by 3.8ms (21%).

If you’ve previously experienced performance challenges when using multiple platform views (like ads, maps, etc) within scrolling views, these optimizations offer the potential for a more fluid and responsive scrolling experience. Please give it a try and let us know what you think.

Ecosystem

Vertex AI for Firebase Dart SDK preview release

The Vertex AI for Firebase product has been released to public preview and includes the Dart SDK. This enables you to use the Gemini API to build generative AI features for your Dart or Flutter app, with production, performance and enterprise scale in mind. The SDK is integrated with Firebase App Check, which protects your API calls, and safeguards your backend infrastructure from serious threats like billing fraud, phishing, and app impersonation. Jump into the Getting Started for Dart and start using it with no cost with a promo code

The Google AI Dart SDK remains available, and is recommended for prototyping only. Google AI has free-of-charge access (within limits and where available) and pay-as-you-go pricing. If you have been prototyping with the Google AI Dart SDK, and are ready to migrate to Vertex AI for Firebase, check out the migration guide.

DevTools updates

We continue to improve DevTools, the suite of performance and debugging tools for Dart and Flutter. This release includes performance improvements, general polish, and new features like including CPU samples in the timeline, advanced filtering, and support for importing and exporting memory snapshots.

Other notable improvements were shipped with the devtools_extensions and devtools_app_shared packages that support DevTools extension authors. We added support for connecting an extension to the new Dart Tooling Daemon (DTD), which allows DevTools extensions to access public methods registered by other DTD clients, such as an IDE, as well as allowing access to a minimal file system API for interacting with the development project.

To learn more about all the updates included in Flutter 3.22 check out the release notes for DevTools 2.32.0, 2.33.0, and 2.34.1.

Google Mobile Ads SDK for Flutter

For those of you monetizing your Flutter apps with Ads, we’ve got some exciting news: Google Mobile Ads for Flutter has just released a major update to version 5.0.1!

Enhanced support for User Messaging Platform (UMP) SDK: The update adds support for the latest APIs from the Android UMP SDK version 2.2.0 and iOS UMP SDK version 2.4.0. The UMP SDK is crucial for complying with privacy regulations, making it easier for you to obtain user consent for personalized ads. This new version introduces several new APIs to simplify the consent gathering process.

Expanded mediation partners: We’ve broadened your ad monetization horizons by offering integrations with popular ad partners, including Unity, Meta, AppLovin, Iron Source, Mintegral, Pangle, DT Exchange, InMobi, and Liftoff. You can now maximize your app revenue with expanded mediation options and simplified implementation.

We encourage you to try out these new features in your Flutter apps and let us know which other mediation partners you’d like to see us support. Your feedback is invaluable as we continue to enhance the Google Mobile Ads SDK for Flutter.

Breaking Changes and Deprecations

Removal of v1 Android embedding

Deletion of version one of the Android embedding is under way. This will likely have no effect on most apps, as

1. Version two has been the default for many years

2. The Flutter tool would already block building version one apps, unless specifically overridden with the flag -- ignore-deprecation.

This release breaks Flutter tool support for v1 apps completely. It is no longer possible to override.

Plugin authors, please note: when the v1 android embedding was initially deprecated a migration doc was written for plugin authors at https://docs.flutter.dev/release/breaking-changes/plugin-api-migration. As part of this migration, it was recommended that plugin authors keep support for apps using the v1 embedding, by including in their *Plugin.java a method with the signature

public static void registerWith(@NonNull io.flutter.plugin.common.PluginRegistry.Registrar registrar)

We plan to fully delete the v1 Android embedding in the next release, at which point plugins that include a method with this signature will no longer compile (as it makes reference to a type from the v1 android embedding).

It currently serves no purpose, as this release has broken apps using the v1 embedding. We recommend that plugin authors release updated versions of their plugins with the v1 code removed as soon as possible, to avoid breakage in future versions of Flutter. For an example, check out PR 6494, which removed the plugins maintained by the Flutter team.

Deprecations removed in 3.22

Breaking changes in this release include deprecated APIs that expired after the release of v3.19. To see all affected APIs, along with additional context and migration guidance, see the deprecation guide for this release. Many of these are supported by Flutter fix, including quick fixes in the IDE. Bulk fixes can be evaluated and applied with the dart fix command-line tool.

As always, many thanks to the community for contributing tests — these help us identify these breaking changes. To learn more, check out Flutter’s breaking change policy.

Conclusion

At the heart of Flutter’s success is you — our amazing community. This release wouldn’t be possible without your countless contributions and unwavering passion. From the bottom of our hearts, thank you.

Ready to explore Flutter 3.22? Dive into the full release notes and changelog, fire up your terminal, and run flutter upgrade. We can’t wait to see what you build!

HarmonyOS Next API 16 for HarmonyOS Flutter 3.22.0 is released

Welcome everyone to join the nut pie and build the HarmonyOS ecosystem: https://gitcode.com/nutpi

Flutter 3.22.1 to the stable channel; This hotfix release addresses the following issues:

dart/55714 - Fixes a bug in the CFE which could manifest as compilation errors of Flutter web apps when compiled with dart2wasm.

dart/55758 - Fixes a bug in the pub client, such that dart run will not interfere with Flutter l10n (at least for most cases).

What’s new in Flutter 3.22

WebAssembly, Graphics rendering enhancements, and more options for AI integration - Flutter app framework development up to May 2024 https://medium.com/flutter/whats-new-in-flutter-3-22-fbde6c164fe3

3.29.2[2] Edit this on Wikidata / 13 March 2025; 40 days ago current version https://en.wikipedia.org/wiki/Flutter_(software)

This article is for Android developers, so I won't go into the basics, and you can check out the documentation.华为开发者联盟

The following content is based on the HarmonyOS development environment (DevEco Studio, HarmonyOS SDK).

The DevEco Studio application signature is bound to a HUAWEI ID, so you need to register a HUAWEI ID before you start (a prompt will be displayed if it fails to run for the first time).

To run a HarmonyOS project, you need a HarmonyOS phone; (At present, only Mate 50 and 60 series mobile phones can be used normally, other models need to use the screen projection tool to operate, and it will be stuck when operated directly on the mobile phone);

Let's start with Hello World

DevEco Studio

Android development is developed using Android Studio, and HarmonyOS also provides a DevEco Studio development tool, which is also developed based on IDEA, so the functional interface and Android Studio are available It's pretty much the same, it's easy to get started, and you can select the official template library from the menu and download it to run locally.Import Sample

Download the tool: Download and upgrade the HUAWEI DevEco Studio and SDK | Huawei Developer Alliance

Create a project

Click on the welcome screen, the process of creating a new project is also similar to Android Studio, the UI component here is similar to Android , which is used to provide UI display and life cycle callbacks, here we simply use the default template to create a Demo project;Create ProjectAbilityActivity

Bundle name Equivalent to Android , the project name and save location can be selected, and other configurations can be left default to complete the project creation.package name

Project structure

Once the project is created, you will see the following project directory structure, which looks like a lot of files, but we only need to focus on the important parts;

PROJECT_FILE_TREE

• Demo/build-profile.json5 The project configuration file, which is equivalent to the one in the Android project:settings.gradle.kts

json

Code interpretation

Copy the code

{ "app": { "signingConfigs": [], // 签名配置 "compileSdkVersion": 9, // SDK 版本配置 "compatibleSdkVersion": 9, // SDK 版本配置 "products": [ { "name": "default", "signingConfig": "default", } ] }, "modules": [ // 模块配置 { "name": "entry", // 模块名 "srcPath": "./entry", // 模块路径 "targets": [ { "name": "default", "applyToProducts": [ "default" ] } ] } ] }

• Demo/AppScope The path where the global resources and configurations are stored;

• Demo/AppScope/resources apply global resource paths;

• Demo/AppScope/app.json5 Application configuration, define the package name, version, application icon, name, etc.:

json

Code interpretation

Copy the code

{ "app": { "bundleName": "com.sample.demo", // 包名 "vendor": "example", // 供应商 "versionCode": 1000000, // 版本号 "versionName": "1.0.0", // 版本名 "icon": "$media:app_icon", // 应用图标，此处配置影响应用管理中显示 "label": "$string:app_name" // 应用名，此处配置影响应用管理中显示 } }

Icons used:

Name Resources:

json

Code interpretation

Copy the code

{ "string": [ { "name": "app_name", "value": "Demo" } ] }

In App Management:

• Demo/entry The main module of the application, the application entrance, and the path to store the code and resources;

• Demo/entry/src/main/module.json5 Module configuration files, similar to those in Android projects:AndroidManifest.xml

json

Code interpretation

Copy the code

{ "module": { "name": "entry", // 当前module的名字，module打包成hap后，表示hap的名称，标签值采用字符串表示（最大长度31个字节），该名称在整个应用要唯一 "type": "entry", // 表示模块的类型，类型有三种，分别是entry、feature和har "srcEntry": "./ets/DemoAbilityStage.ts", // 模块的入口文件路径，默认没有，需要手动创建，类似 Android 中的 Application "description": "$string:module_desc", // 当前模块的描述信息 "mainElement": "EntryAbility", // 该标签标识hap的入口ability名称或者extension名称。只有配置为mainElement的ability或者extension才允许在服务中心露出 "deviceTypes": [ // 该标签标识hap可以运行在哪类设备上 "phone", "tablet" ], "deliveryWithInstall": true, // 该模块是否随应用一起安装 "installationFree": false, // 释放支持免安装 "pages": "$profile:main_pages", // ability 中使用的 page 信息配置 "abilities": [ // ability 配置列表，类似 Android 中的 Activity 列表 { "name": "EntryAbility", // 逻辑名，整个应用要唯一 "srcEntry": "./ets/entryability/EntryAbility.ts", // 入口代码路径 "description": "$string:EntryAbility_desc", // 描述信息 "icon": "$media:icon", // 图标，如果为 MainElement，必填，此处配置影响应用列表显示及任务栈显示 "label": "$string:EntryAbility_label", // 标签名，此处配置影响应用列表显示及任务栈显示 "startWindowIcon": "$media:icon", // 启动页图标 "startWindowBackground": "$color:start_window_background", // 启动页背景颜色 "exported": true, "skills": [ { "entities": [ "entity.system.home" ], "actions": [ "action.system.home" ] } ] } ] } }

Icons used:

Name Resources:

json

Code interpretation

Copy the code

{ "string": [ { "name": "EntryAbility_label", "value": "Ability1" } ] }

Display on desktop:

In the task stack displays:

If there is more than one , all icons will be created on the desktop:UIAbilityskillsentity.system.home

bash

Code interpretation

Copy the code

"skills": [ { "entities": [ "entity.system.home" ], "actions": [ "action.system.home" ] } ]

• Demo/entry/src/main/ets source code file path;

• Demo/entry/src/main/ets/entryability/EntryAbility.ts UI components, similar to the one in Android;Activity

• Demo/entry/src/main/resources resource file path;

Project architecture and comparison with Android

From the perspective of the overall project architecture, the HarmonyOS project is relatively close to the Compose + single-activity architecture of the Android project, and we can also find some corresponding relationships with the Android project in HarmonyOS:

AndroidHarmonyOSsettings.gradle.ktsProject configuration filesDemo/build-profile.json5The project configuration file, except that the application signature, SDK version, and multi-channel configuration have been moved herebuild.gradle.ktsModule configuration filesDemo/AppScope/app.json5Apply the configuration file, configure the package name, version, icon, and nameAndroidManifest.xmlManifest fileDemo/entry/src/main/module.json5Configure the module configuration file and configure the application entry and routeApplicationApplication entryAbilityStageApplication entryActivityUI componentsUIAbilityUI componentsNavgationPage routingpagesPage routing

life cycle

In the node declaration in , we can also configure a global application entry just like an Android app, with similar lifecycle method callbacks:module.json5modulesrcEntry

jsx

Code interpretation

Copy the code

import AbilityStage from '@ohos.app.ability.AbilityStage'; export default class DemoAbilityStage extends AbilityStage { onCreate() { // 应用启动回调 } }

UI components in HarmonyOS have a similar lifecycle to Android:UIAbilityActivity

jsx

Code interpretation

Copy the code

import UIAbility from '@ohos.app.ability.UIAbility'; import hilog from '@ohos.hilog'; import window from '@ohos.window'; export default class EntryAbility extends UIAbility { onCreate(want, launchParam) { // 组件创建 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); } onDestroy() { // 组件销毁 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); } onWindowStageCreate(windowStage: window.WindowStage) { // window 创建 // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); // 设置布局，显示 ets/pages/Index.ets 的布局 windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); }); } onWindowStageDestroy() { // window 销毁 // Main window is destroyed, release UI related resources hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); } onForeground() { // 进入前台 // Ability has brought to foreground hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); } onBackground() { // 进入后台 // Ability has back to background hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); } }

HarmonyOS does not have a lifecycle callback method in Android, but there are still solutions to implement it if needed, which need to be implemented in the method:UIAbilityActivityonResumeonPauseonWindowStageCreatewindowStage

dart

Code interpretation

Copy the code

onWindowStageCreate(windowStage: window.WindowStage) { windowStage.on('windowStageEvent', (event) => { // event 取值为枚举类型 window.WindowStageEventType if(event === window.WindowStageEventType.ACTIVE) { // 获取焦点 } else { // 失去焦点 } }) }

layout

HarmonyOS uses ArkTS as the development language and provides ArkTS UI components for UI layout, as shown in the layout above:UIAbilityets/pages/Index.ets

kotlin

Code interpretation

Copy the code

@Entry // 声明这个组件可作为页面入口，即在 UIAbility 中加载或进行页面跳转 @Component // 声明这是一个UI组件 struct Index { @State message: string = 'Hello World' build() { // 声明布局 Row() { // 横向布局 Column() { // 竖向布局 Text(this.message) // 文本控件 .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') // 宽度铺满 } .height('100%') // 高度铺满 } }

The above is the default generated layout of the new project, the effect is to display the text in the middle of the screen, and more components can be referred to the component reference (declarative development paradigm based on ArkTS.Hello World

The interface jumps

Pages jump

In the projects generated by HarmonyOS, there is only one by default, and the display layout is loaded through , so a multi-interface approach is to write different pages and jump directly to different pages.UIAbilitywindowStage.loadContent

First, let's create a new file under the path, declare the layout with reference, and add a button to go back to the previous level:ets/pagesSecond.etsIndex.ets

tsx

Code interpretation

Copy the code

import router from '@ohos.router' @Entry @Component struct Second { @State message: string = 'Second Page' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // 添加按钮 Button("点击返回") .onClick(() => { // 按钮点击通过 router 返回上一级 router.back() }) } .width('100%') } .height('100%') } }

Then, we need to add the declaration of this interface to the file:resources/base/profile/main_pages.json

json

Code interpretation

Copy the code

{ "src": [ "pages/Index", "pages/Second" ] }

Add a button to the previous layout and configure the click-to-jump logic:Index.ets

tsx

Code interpretation

Copy the code

import router from '@ohos.router' @Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // 添加按钮 Button("点击跳转") .onClick(() => { // 按钮点击通过 router 跳转到 pages/Second router.pushUrl({ url: "pages/Second" }) }) } .width('100%') } .height('100%') } }

In this way, you can jump to the interface by clicking the button. It is recommended to create a Page in the Path Use, which will automatically generate the corresponding layout file and configuration, which is more convenient and less error-prone.ets/pagesNew -> Page

UIAbility Jump

Although there is only one template officially provided by HarmonyOS, it still supports many.UIAbilityUIAbility

Similarly, create a new one under the path, load the layout in , and add the corresponding configuration in , which is still recommended to be created;etsEntryAbility.tsSecondEntryAbility.tsonWindowStageCreatepages/SecondAblitymodule.json5New -> Ability

Modify the text and add a back button in :ets/pages/SecondAbility.ets

tsx

Code interpretation

Copy the code

import common from '@ohos.app.ability.common' @Preview @Entry @Component struct SecondAbility { @State message: string = 'Second Ability' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) Button("点击返回") .margin({ top: 30 }) .onClick(() => { // 按钮点击关闭当前 UIAbility let context = getContext(this) as unknown as common.UIAbilityContext context.terminateSelf() }) } .width('100%') } .height('100%') } }

Then we modify the code in to add a new button below the previous button and click Jump:ets/pages/Index.etsSecondEntryAbility

tsx

Code interpretation

Copy the code

import common from '@ohos.app.ability.common' import Want from '@ohos.app.ability.Want' @Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) Button("点击跳转") .onClick(() => { // 按钮点击跳转到 SecondEntryAbility let context = getContext(this) as unknown as common.UIAbilityContext let want: Want = { deviceId: "", bundleName: "com.sample.demo", abilityName: "SecondEntryAbility", } context.startAbility(want) }) // 添加按钮 Button("点击跳转Ability") .onClick(() => { // 按钮点击跳转到 SecondEntryAbility let context = getContext(this) as unknown as common.UIAbilityContext let want: Want = { deviceId: "", bundleName: "com.sample.demo", abilityName: "SecondEntryAbility", } context.startAbility(want) }) } .width('100%') } .height('100%') } }

Here we are going to mention the difference between and , although they are both UI components, but in HarmonyOS, each open will be displayed separately in the task stack;UIAbilityActivityUIAbility

summary

As an Android developer, I'm looking for the similarities between HarmonyOS and Android development when I write this article, and we don't need to learn about HarmonyOS from scratch development, you can start faster.

Finally, share a HarmonyOS development study guide

Pay attention to VX public account: Android Lao Pi

HarmonyOS Development Learning Guide

Chapter 1 Quick Start

1. Preparation for development

2. Build the first ArkTS application (Stage model)

3. Build the first ArkTS application (FA model)

4. Build the first JS application (FA model)

5、........

Chapter 2 Basic Knowledge of Development

1. Basic knowledge of application packages

2. Application configuration file (Stage model)

3. Overview of application configuration files (FA model)

4、.......

Chapter 3 Resource Classification and Access

1. Resource classification and access

2. Create resource directories and resource files

3. Resource access

4、.......

Chapter 4 Learning the ArkTs language

1. Familiarize yourself with the ArkTS language

2. Basic grammar

3. State management

4. Other status management

5. Rendering control

6、......

Chapter 5 UI Development

1. Overview of the Ark Development Framework (ArkUI).

2. Based on the ArkTS declarative development paradigm

3. Compatible with JS-like web development paradigm

4.......

Chapter 6 Web Development

1. Overview of web components

2. Use the web component to load the page

3. Set the basic properties and events

4. Use front-end page JavaScript in your app

5. Overview of the basic class library of the ArkTS language

6. Concurrency

7.......

11. Networks and Connections

12. Telephone Service

13. Data Management

14. Document Management

15. Background task management

16. Device Management

17......

Chapter 7 Application Models

1. Overview of the application model

2. Stage model development guidance

3. FA model development guidance

4.......

Label:

databaseprogrammer

作者：用户26245236817
链接：https://juejin.cn/post/7348363874963783680
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Hello everyone, Today I would like to share with you the comparison of the pure code layout of iOS, Android, and HarmonyOS Next. Because many students have a common problem is to rely too much on third-party frameworks, the basic skills are very poor, and even lazy, and they basically don't want to move when they encounter complex layouts.

iOS code implementation

cpp

代码解读

复制代码

// // LoginView.m // 016登录界面 // // Created by xuqing on 2022/5/5. // #import "LoginView.h" #import "WHToast.h" #import "AFNetworking.h" #import "TextUtils.h" #import "ToastUtils.h" #import "RegisterView.h" @implementation LoginView @synthesize usernameLabel=_usernameLabel; @synthesize pswLabel=_passwordLabel; @synthesize userTextfield=_userTextfield; @synthesize pswfield=_passwordfield; @synthesize loginBtn=_loginBtn; @synthesize registerBtn=_registerBtn; @synthesize blackBgV=_blackBgV; @synthesize alertV=_alertV; - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self setUpSubView]; } return self; } - (void)setUpSubView { self.frame = [UIScreen mainScreen].bounds; // 初始化遮罩视图 self.blackBgV = [[UIView alloc]initWithFrame:self.bounds]; self.blackBgV.backgroundColor = [UIColor grayColor]; self.blackBgV.alpha = 0; [self addSubview:self.blackBgV]; // 初始化actionSheetView self.alertV = [[UIView alloc] initWithFrame:CGRectMake(30,self.bounds.size.height/2-120, self.bounds.size.width-60, 240)]; self.alertV.backgroundColor = [UIColor whiteColor]; self.alertV.layer.cornerRadius = 5; self.alertV.layer.masksToBounds = YES; self.alertV.alpha = 0; [self addSubview:self.alertV]; _usernameLabel =[[UILabel alloc]init]; _usernameLabel.frame=CGRectMake(60, 50, 60, 40); _usernameLabel.text=@"账号:"; _usernameLabel.textColor=[UIColor blueColor]; [self.alertV addSubview:_usernameLabel]; _userTextfield =[[UITextField alloc] init]; _userTextfield.frame=CGRectMake(100, 50,180, 40); _userTextfield.font= [UIFont systemFontOfSize:15]; // 设置字体颜色 _userTextfield.textColor=[UIColor blackColor]; //设置边框的风格 // UITextBorderStyleBezel bezel线框 // UITextBorderStyleRoundedRect 圆角风格 // UITextBorderStyleLine 线框风格 // UITextBorderStyleNone 无边框风格 _userTextfield.borderStyle= UITextBorderStyleRoundedRect; //设置虚拟键盘风格 //UIKeyboardTypeDefault 默认风格 //UIKeyboardTypeNumberPad 纯数字风格 //UIKeyboardTypeNamePhonePad 字母和数字组合风格 _userTextfield.keyboardType=UIKeyboardTypeNamePhonePad; _userTextfield.placeholder=@"请输入用户名..."; //是否作为密码输入 //YES 做为处理 圆点加密 //NO: 正常显示输入的文字 _userTextfield.secureTextEntry= NO; [self.alertV addSubview: _userTextfield]; _passwordLabel =[[UILabel alloc]init]; _passwordLabel.frame=CGRectMake(60, 100, 60, 40); _passwordLabel.text=@"密码:"; _passwordLabel.textColor=[UIColor blueColor]; [self.alertV addSubview:_passwordLabel]; _passwordfield =[[UITextField alloc] init]; _passwordfield.frame=CGRectMake(100, 100,180, 40); _passwordfield.font= [UIFont systemFontOfSize:15]; // 设置字体颜色 _passwordfield.textColor=[UIColor blackColor]; //设置边框的风格 // UITextBorderStyleBezel bezel线框 // UITextBorderStyleRoundedRect 圆角风格 // UITextBorderStyleLine 线框风格 // UITextBorderStyleNone 无边框风格 _passwordfield.borderStyle= UITextBorderStyleRoundedRect; //设置虚拟键盘风格 //UIKeyboardTypeDefault 默认风格 //UIKeyboardTypeNumberPad 纯数字风格 //UIKeyboardTypeNamePhonePad 字母和数字组合风格 _passwordfield.keyboardType=UIKeyboardTypeNamePhonePad; _passwordfield.placeholder=@"请输入密码..."; //是否作为密码输入 //YES 做为处理 圆点加密 //NO: 正常显示输入的文字 _passwordfield.secureTextEntry= YES; [self.alertV addSubview: _passwordfield]; _loginBtn=[UIButton buttonWithType: UIButtonTypeRoundedRect]; _loginBtn.frame=CGRectMake(80, 160, 80, 40); [_loginBtn setTitle:@"登录" forState:UIControlStateNormal]; [_loginBtn addTarget:self action:@selector(login) forControlEvents:UIControlEventTouchUpInside]; _loginBtn.backgroundColor=[UIColor blueColor]; [_loginBtn setTitleColor: [UIColor whiteColor ] forState:UIControlStateNormal] ; //设置按钮颜色 [_loginBtn setTitleColor: [UIColor grayColor] forState:UIControlStateHighlighted] ; [self.alertV addSubview:_loginBtn]; _registerBtn=[UIButton buttonWithType:UIButtonTypeRoundedRect]; _registerBtn.frame=CGRectMake(180, 160, 80, 40); [_registerBtn setTitle:@"注册" forState:UIControlStateNormal]; [_registerBtn addTarget:self action:@selector(registerMethod) forControlEvents:UIControlEventTouchUpInside]; _registerBtn.backgroundColor=[UIColor blueColor]; [_registerBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [self.alertV addSubview:_registerBtn]; } -(void)registerMethod{ [self hidden]; RegisterView * registerview=[[RegisterView alloc]init]; registerview.registerBlock=_logBlock; [registerview show]; } -(void)login{ NSString * _strTextName=_userTextfield.text; NSString * _strTextPsw=_passwordfield.text; if(![TextUtils isBlankString:_strTextName] &&![TextUtils isBlankString:_strTextPsw]){ NSLog(@"登录成功"); NSLog(@"%@ %@",_strTextName,_strTextPsw); NSString * registerString=@"http://175.178.200.180:8090/boss/user/validlogin?"; NSString * str1=@"username="; NSString * str2=@"password="; NSMutableString *geturl = [NSMutableString string]; [geturl appendString:registerString]; [geturl appendString:str1]; [geturl appendString:_strTextName]; [geturl appendString:@"&"]; [geturl appendString:str2]; [geturl appendString:_strTextPsw]; NSLog(@" geturl --- > %@",geturl); [[AFHTTPSessionManager manager]GET:geturl parameters:nil headers:nil progress:^(NSProgress * _Nonnull downloadProgress) { NSLog(@""); } success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) { NSLog(@""); NSLog(@"请求成功---%@",responseObject); NSLog(@"请求 msg ---%@",[responseObject objectForKey:(@"msg")]); NSString * msg=[responseObject objectForKey:(@"msg")]; NSInteger code = [[responseObject objectForKey:(@"code")] integerValue]; if(code==200){ if (self.logBlock) { //缓存token NSString * token=[responseObject objectForKey:(@"token")]; NSUserDefaults * ud =[NSUserDefaults standardUserDefaults]; [ud setObject:token forKey:@"token"]; self.logBlock(YES, responseObject); [self hidden]; } }else{ [ToastUtils showInfo:msg]; } } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) { NSLog(@""); }]; }else { [ToastUtils showInfo:@"账号或者密码不能为空" ]; } } - (void)show { [self setUpSubView]; [[UIApplication sharedApplication].keyWindow addSubview:self]; self.hidden = NO; [UIView animateWithDuration:0.3 animations:^{ self.alertV.alpha = 1; self.blackBgV.alpha = 0.5; } completion:^(BOOL finished) { }]; } - (void)hidden { __block typeof(self) weakSelf = self; [UIView animateWithDuration:0.3 animations:^{ self.alertV.alpha = 0; self.blackBgV.alpha = 0; } completion:^(BOOL finished) { weakSelf.hidden = YES; [weakSelf removeFromSuperview]; }]; } #pragma mark -- 遮罩视图点击 - (void)tapClick:(UIGestureRecognizer *)tap { NSLog(@"遮罩视图点击"); } @end

Renderings

Android code implementation

ini

代码解读

复制代码

package com.example.myapplication; import android.app.Dialog; import android.content.Context; import android.graphics.Color; import android.os.Bundle; import android.text.InputType; import android.util.DisplayMetrics; import android.view.Gravity; import android.view.Window; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; import androidx.appcompat.widget.AppCompatCheckBox; /** * *创建人：xuqing *创建时间：2025年1月26日15:18:50 * 类说明：登录弹出 * */ public class LoginDialog extends Dialog { protected final static int MATCH_PARENT = LinearLayout.LayoutParams.MATCH_PARENT; protected final static int WRAP_CONTENT = LinearLayout.LayoutParams.WRAP_CONTENT; protected final int _10dp = DisplayUtils.dip2Px(getContext(), 10); protected final int _5dp = DisplayUtils.dip2Px(getContext(), 5); protected final int _32dp = DisplayUtils.dip2Px(getContext(), 32); protected final int _20dp = DisplayUtils.dip2Px(getContext(), 20); public static final String C_COMFIRM = "#FF26ADF0"; public static final String C_COMFIRM_P = "#DD26ADF0"; public static final String C_CANCEL = "#FFCCCCCC"; public static final String C_CANCEL_P = "#DDCCCCCC"; private Context mContext; protected LinearLayout mParentView; protected LinearLayout mContentView; private EditText editAccount; private EditText editPwd; protected LinearLayout editAccountiLlView; protected LinearLayout editPwdLlView; protected LinearLayout buttomLlView; private TextView accountText; private TextView editPwdText; private RelativeLayout editAccountRl; private RelativeLayout editPwdRl; public LoginDialog(Context context) { super(context); this.mContext = context; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().setBackgroundDrawableResource(android.R.color.transparent); getWindow().requestFeature(Window.FEATURE_NO_TITLE); mParentView = new LinearLayout(getContext()); mParentView.setOrientation(LinearLayout.VERTICAL); mParentView.setPadding(0, 0, _5dp, _5dp); mParentView.setBackground(DrawableUtils.createShape(0, 0, 0, "#ffffff", "#ffffff"));//#ffffff mContentView=new LinearLayout(getContext()); mContentView.setOrientation(LinearLayout.VERTICAL); LinearLayout.LayoutParams mContentViewlayoutparams=new LinearLayout.LayoutParams( DisplayUtils.dip2Px(getContext(), 255), DisplayUtils.dip2Px(getContext(), 255)); mContentView.setLayoutParams(mContentViewlayoutparams); mContentView.setGravity(Gravity.CENTER); // 账号输入框 editAccount = addNOBgEditText(); //suakuds_pinputaccount_str editAccount.setHint("请输入账号"); //editAccount.setText("huangyueze"); RelativeLayout.LayoutParams editAccountlayoutParams = new RelativeLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); editAccountlayoutParams.setMargins(dip2px(0),0,dip2px(30),0); editAccount.setLayoutParams(editAccountlayoutParams); accountText =addTextView(); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); accountText.setLayoutParams(layoutParams); accountText.setText("账号:"); layoutParams.setMargins(dip2px(20),0,0,0); editAccountRl=new RelativeLayout(getContext()); RelativeLayout.LayoutParams editAccountRllayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT); editAccountRl.setBackground(DrawableUtils.createShape(1, 10, -1, "#000000", "#ffffff")); editAccountRl.setLayoutParams(editAccountRllayoutParams); editAccountRllayoutParams.setMargins(dip2px(10),0,0,0); editAccountRl.addView(editAccount,editAccountlayoutParams); //账号线性布局 editAccountiLlView=new LinearLayout(getContext()); LinearLayout.LayoutParams editAccountiLlViewlayoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, dip2px(40)); editAccountiLlView.setLayoutParams(editAccountiLlViewlayoutParams); editAccountiLlView.setOrientation(LinearLayout.HORIZONTAL); editAccountiLlView.setGravity(Gravity.CENTER); editAccountiLlView.setPadding(0, 0, _5dp, _5dp); editAccountiLlView.addView(accountText,layoutParams); editAccountiLlView.addView(editAccountRl,editAccountRllayoutParams); mContentView.addView(editAccountiLlView, editAccountiLlViewlayoutParams); // 密码输入框 editPwd = addNOBgEditText(); LinearLayout.LayoutParams editPwdlayoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); editPwd.setLayoutParams(editPwdlayoutParams); editPwdlayoutParams.setMargins(dip2px(0),0,dip2px(30),0); editPwd.setGravity(Gravity.CENTER_VERTICAL); editPwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); //suakuds_pinputpwd_str editPwd.setHint("请输入密码"); editPwdText = addTextView(); LinearLayout.LayoutParams editPwdImagelayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);; editPwdText.setLayoutParams(editPwdImagelayoutParams); editPwdText.setText("密码:"); editPwdImagelayoutParams.setMargins(dip2px(20),0,0,0); //账号线性布局 editPwdLlView=new LinearLayout(getContext()); editPwdRl=new RelativeLayout(getContext()); LinearLayout.LayoutParams editPwdRllayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); editPwdRl.setBackground(DrawableUtils.createShape(1, 10, -1, "#000000", "#ffffff")); editPwdRl.setLayoutParams(editPwdRllayoutParams); editPwdRllayoutParams.setMargins(dip2px(10),0,0,0); editPwdRl.addView(editPwd,editPwdlayoutParams); LinearLayout.LayoutParams editPwdLlViewlayoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, dip2px(40)); editPwdLlView.setLayoutParams(editPwdLlViewlayoutParams); editPwdLlView.setOrientation(LinearLayout.HORIZONTAL); editPwdLlView.setGravity(Gravity.CENTER); editPwdLlView.setPadding(0, 0, _5dp, _5dp); editPwdLlView.addView(editPwdText,editPwdImagelayoutParams); editPwdLlView.addView(editPwdRl,editPwdRllayoutParams); mContentView.addView(editPwdLlView, editPwdLlViewlayoutParams); LinearLayout btnLayout = new LinearLayout(getContext()); btnLayout.setOrientation(LinearLayout.HORIZONTAL); btnLayout.setGravity(Gravity.CENTER); LinearLayout.LayoutParams btnLayoutlayoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, dip2px(32)); btnLayoutlayoutParams.setMargins(dip2px(40),dip2px(20),dip2px(20),0); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(0, _32dp); lp.weight = 1; lp.setMargins(_5dp, _5dp, _5dp, _5dp); Button registerBtn = addCancelBtn("注册"); btnLayout.addView(registerBtn, lp); //添加登陆 lp = new LinearLayout.LayoutParams(0, _32dp); lp.weight = 1; //suakuds_login Button loginBtn = addConfirmBtn("登录"); btnLayout.addView(loginBtn, lp); mContentView.addView(btnLayout,btnLayoutlayoutParams); mParentView.addView(mContentView,mContentViewlayoutparams); setContentView(mParentView, new LinearLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT)); } @Override public void show() { super.show(); DisplayMetrics dmDisplayMetrics = new DisplayMetrics(); //为获取屏幕宽、高 getWindow().getWindowManager().getDefaultDisplay().getMetrics(dmDisplayMetrics); android.view.WindowManager.LayoutParams p = this.getWindow().getAttributes(); //获取对话框当前的参数值 p.gravity = Gravity.CENTER; this.getWindow().setLayout(DisplayUtils.dip2Px(getContext(), 300), DisplayUtils.dip2Px(getContext(), 250)); } public int dip2px(float dpValue) { final float scale = getContext().getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } protected TextView addTextView() { TextView tv = new TextView(getContext()); tv.setTextColor(0xff222222); tv.setTextSize(12); tv.setGravity(Gravity.CENTER_VERTICAL); return tv; } protected EditText addNOBgEditText() { EditText et = new EditText(getContext()); et.setSingleLine(); et.setMinHeight(_32dp); et.setGravity(Gravity.CENTER_VERTICAL); et.setPadding(dp(5), 5, dp(2), 0); et.setTextSize(dp(5)); et.setTextColor(Color.BLACK); et.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD); et.setBackground(null); return et; } protected int dp(int _dp) { return DisplayUtils.dip2Px(getContext(), _dp); } //添加取消按钮 protected Button addCancelBtn(String text) { Button cancelBtn = new Button(getContext()); //cancelBtn.setTextSize(10); cancelBtn.setTextColor(Color.WHITE); cancelBtn.setAllCaps(false); cancelBtn.setBackground(DrawableUtils.createStateDrawable(_5dp, C_COMFIRM, C_COMFIRM_P)); cancelBtn.setText(text); cancelBtn.setPadding(_5dp, _5dp, _5dp, _5dp); return cancelBtn; } protected Button addConfirmBtn(String text) { Button confirmBtn = new Button(getContext()); confirmBtn.setTextColor(Color.WHITE); confirmBtn.setAllCaps(false); confirmBtn.setBackground(DrawableUtils.createStateDrawable(_5dp, C_COMFIRM, C_COMFIRM_P)); confirmBtn.setText(text); confirmBtn.setPadding(_5dp, _5dp, _5dp, _5dp); return confirmBtn; } }

HarmonyOSNext 端

scss

代码解读

复制代码

/** * 自定义中间弹窗 */ //线条样式 @Extend(Line) function lineStyle(){ .width('100%') .height(1) .backgroundColor($r('app.color.line_color')) } //黑色字体样式 @Extend(Text) function blackTextStyle(){ .fontColor($r('app.color.black_text_color')) .fontSize(18) .fontWeight(FontWeight.Medium) } @Extend(TextInput) function inputStyle(){ .placeholderColor($r('app.color.placeholder_color')) .height(45) .fontSize(18) .backgroundColor($r('app.color.background')) .width('100%') .padding({left:0}) .margin({top:12}) } export class LoginCenterPopup extends BaseCenterPopup<CenterBean> { private data = new CenterBean() constructor() { super(wrapBuilder(customPopupBuilder)) this.setParams(this.data) this.data.dismiss = () => { this.dismiss() } } } @Builder function customPopupBuilder(data: CenterBean) { Column() { Row(){ Text('账号').blackTextStyle() TextInput({placeholder:'请输入账号'}) .width('100%') .height(35) .type(InputType.Normal) .margin(5) .onChange((value:string)=>{ DataStoreController.getInstance().setUsername(value); }).margin({left:20}) .onSecurityStateChange(((isShowPassword: boolean) => { // 更新密码显示状态 console.info('isShowPassword', isShowPassword) })).backgroundColor("#00000000") .layoutWeight(1) .borderRadius(8) }.justifyContent(FlexAlign.SpaceBetween) .width('100%') .margin({top:8}) Line().lineStyle().margin({left:80,right:10}) Row(){ Text('密码').blackTextStyle() TextInput({placeholder:'请输入密码'}) .width('100%') .height(35) .type(InputType.Normal) .margin(5) .onChange((value:string)=>{ DataStoreController.getInstance().setpasswroid(value); }).margin({left:20}) .onSecurityStateChange(((isShowPassword: boolean) => { // 更新密码显示状态 console.info('isShowPassword', isShowPassword) })).backgroundColor("#00000000") .layoutWeight(1) .borderRadius(8) }.justifyContent(FlexAlign.SpaceBetween) .width('100%') .margin({top:8}) Line().lineStyle().margin({left:80,right:10}) //Line().lineStyle().margin({left:80,right:10}) Row({space:10}){ Button('登录',{type:ButtonType.Capsule}) .width('90%') .height(40) .fontSize(16) .fontWeight(FontWeight.Medium) .backgroundColor($r('app.color.login_button_color')) .margin({top:47,bottom:12}) .onClick(()=>{ }).layoutWeight(1) Button('注册',{type:ButtonType.Capsule}) .width('90%') .height(40) .fontSize(16) .fontWeight(FontWeight.Medium) .backgroundColor($r('app.color.login_button_color')) .margin({top:47,bottom:12}) .onClick(()=>{ }).layoutWeight(1) }.justifyContent(FlexAlign.SpaceBetween) .width('100%') .margin({top:8}) } }

Renderings

contrast

We compare the complexity of coding and the difficulty of reading, and our HarmonyOSnext is more simplified and easy to use, and at this time, someone jumped out and said that we have a swift ui in iOS, and that can also do declarative UI, yes, but in the beginning, there was only object-c, so any platform and language needs to be constantly developed to get to where we are today, and the same is true for Android, which uses kotlin with jetpack compose can also implement a similar declarative UI, but at the beginning, there was only a Java pure code layout or java+xml layout, which is why HarmonyOSnext has a late-mover advantage over the native Android and native ios, making up for the shortcomings of its predecessors and giving full play to its own advantages.

Comparison of design concepts

• iOS

The pure code layout of ios has CGRectMake to set the x-y coordinates and width and height for us, the upper left corner of the screen is the origin, the horizontal is the right axis, and the vertical downward is the y-axis. It was the design which was relatively OK in that era.

• Android

Android's pure code layout does not have the method of setting coordinates like ios, mainly through viewgroup to nest and wrap our view or other viewgroups, and finally add to our layout by calling addview, the code is relatively cumbersome and not easy to read. It's a copy of the XML layout. This is still a relatively high requirement for the programmer itself.

• HarmonyOSNext

The pure code of HarmonyOSNext is innate, and the official designation is to use ArkUI to write layouts with the previewer, and the effect of WYSIWYG can be achieved, and the code reading is relatively clear and straightforward. Just like building blocks, we load child components through parent layouts such as linear and relative layouts, and it's easy to achieve the UI we want.

Final Summary:

Whether it's Android ios or other students who have turned over to learn HarmonyOSNext development, I very much recommend learning the basic skills, don't have xml similar to Android xml similar to xib in ios There is no similar front-end of various frameworks I don't want to learn, it's not necessary at all, the official components are already relatively rich, and the third-party library is also constantly improving, I wish every student can learn well and find a good job, and I hope that the domestic system is getting better and better. That's all for today's article, if you think the article is not bad, you can give me a one-click triple. If you are interested, follow my B station tutorial to learn more about the knowledge of Hongmeng development, you can pay attention to the nut pie public account. Thank you

Course address

www.bilibili.com/cheese/play…

Project Description:

• 1 Learn common layout components

• 2 Network request tool class encapsulation

• 3 Arkui Lifecycle Initiation Process

• 4 Encapsulation of the log tool class

• 5 Encapsulation of custom combination components

• 6 Use of Route Navigation Jumps

• 7 Caching of local data and the encapsulation of caching tools

• 8 Implementation of the Welcome Page

• 9 Login Cases and Automatic Login Effect Implementation

• 10 Request Network Data Paging Pull-Up Load Implementation of pull-down refresh

• 11 list data lazy loading implementation

• 12 Use of the WebView Component

If you use more easy-to-use HarmonyOS NEXT third-party libraries

作者：坚果派_xq9527
链接：https://juejin.cn/post/7463871170015559695
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Original date: 2025-01-26

I. Introduction

The basic idea of implementing a tablet function is as follows:

Create an interactive component where when the user touches and moves their finger on the screen, a path is dynamically generated based on the position of the touch and drawn on the screen with a black stroke. When the user presses the screen, the coordinates of the press point are recorded as the starting point of the path. When the user moves his finger, the coordinates of the moving points are constantly recorded, and the path is formed by connecting the line segments.

The functional renderings are as follows:

Second, the idea of the program

The system provides a very convenient line drawing component Path. This component combines canvas and line drawing functions into one. A concise line drawing component is provided.

For more information, see Path-Graph-Draw-ArkTS Components-ArkUI (Ark UI Framework)-Application Frameworks - Huawei HarmonyOS Developer https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V14/drawing-guidelines-V14

The idea of using the Path component is very simple, as shown in the following code:

javascript

Code interpretation

Copy the code

Path() .commands(this.pathCommands) // 设置SVG路径描述字符串 .strokeWidth(5) // 设置路径的描边宽度为 5 .fill("none") // 设置路径的填充颜色为无 .stroke(Color.Black) // 设置路径的描边颜色为黑色 .height('100%') .width('100%')

1. Set the width and height of the component to the size of the canvas area to be displayed.

height and width are 100 percent.

2. Set the style, color, and width of the line.

stroke is Color.Black and strokeWidth is 5

3. Set the color of the filled area where the closed is drawn.

fill is none

If you change the fill color, you will get the following effect:

Since this effect is not required for the tablet, you need to set fill to none, not fill color.

4. Set the SVG path description string.

The most core property of the component. Its value is a string and looks something like this:

javascript

Code interpretation

Copy the code

M225.99999999999997 409.99999999999994 L225.99999999999997 409.99999999999994

First, let's understand what the SVG path descriptor does.

SVG path descriptors are a set of commands used to define vector graphics paths, and play a key role in drawing graphics using the Path component, creating a variety of complex custom shapes. The main functions are as follows:

(1) Build a basic graph:

The M (moveto) command is used to determine the starting point, and the L (lineto), H (horizontal lineto), V (vertical lineto) and other commands are used to draw straight line segments, and basic shapes such as triangles and rectangles can be constructed. For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts at (0,20), draws two straight segments, and ends with the Z(closepath) command to close the path.

(2) Draw a curve graph:

With the help of C (curveto), S (smooth curveto), Q (quadratic Belzier curve), T (smooth quadratic Belzier curveto) and other commands, different types of Bezier curves can be drawn to achieve complex curve drawing. Like C100 100 250 100 250 200 you can draw a cubic Bezier curve from the current point to the (250, 200) point, which can be used to create curve shapes such as petals, wavy lines, etc.

(3) Draw elliptical arcs:

The A (elliptical arc) command is used to draw elliptical arcs from the current point to a specified point, and by setting the radius, rotation angle, and other flags of the ellipse, you can draw partial arcs of various elliptical shapes, such as the sectors of a pie chart.

In the handwriting tablet scenario, the SVG path descriptor uses only the M (moveto) and L (lineto) commands to achieve its primary function. The reason for this is that the core requirement of the tablet is to record and present the trajectory drawn by the user in real time. The M command is used to determine the starting point of the drawing track, and every time the user touches the screen to start writing, it is equivalent to starting a new path, and the M command records this starting coordinate, as if determining the landing point of the first stroke on paper. The L command draws a line from the current point to the specified coordinates, and in the tablet, with the movement of the user's fingers, the coordinate points in the process of movement are continuously obtained, and the points are connected in turn through the L command to form a continuous line and accurately present the handwritten handwriting.

In the end, we only need to add the onTouch event outside the Path component to record the user's finger touch event, get its x,y coordinates, and then implement the svg path descriptor of the tablet:

javascript

Code interpretation

Copy the code

// 处理触摸事件的方法 onTouchEvent(event: TouchEvent) { // 根据触摸事件的类型进行不同的处理 switch (event.type) { // 当触摸类型为按下时 case TouchType.Down: // 在 pathCommands 中添加一个移动命令（M），并记录按下点的坐标 this.pathCommands += 'M' + event.touches[0].x + ' ' + event.touches[0].y; break; // 当触摸类型为移动时 case TouchType.Move: // 在 pathCommands 中添加一个线段命令（L），并记录移动点的坐标 this.pathCommands += 'L' + event.touches[0].x + ' ' + event.touches[0].y; break; // 其他触摸类型，不做处理 default: break; } }

5. When it is time to empty the tablet.

All you need to do is set the commands property of the Path component to an empty string.

3. Source code example:

javascript

Code interpretation

Copy the code

@Entry @Component struct PathTestPage { @State pathCommands: string = ""; private setPathCommands(str: string, event: TouchEvent){ let x = event.touches[0].x; let y = event.touches[0].y; this.pathCommands += str + vp2px(x) + ' ' + vp2px(y); console.log("georgeDebug", " this.pathCommands: " + this.pathCommands); } onTouchEvent(event: TouchEvent){ // event xy 单位：vp switch (event.type){ case TouchType.Down: this.setPathCommands('M', event); break; case TouchType.Move: this.setPathCommands('L', event); break; default: break; } } build() { Stack({ alignContent: Alignment.TopStart }){ Path() .commands(this.pathCommands) // 设置SVG路径描述字符串 .strokeWidth(5) // 设置路径的描边宽度为 5 .fill("none") // 设置路径的填充颜色为无 .stroke(Color.Black) // 设置路径的描边颜色为黑色 .height('100%') .width('100%') .onTouch((event: TouchEvent)=>{ this.onTouchEvent(event); }) Button("清空绘制") .onClick(()=>{ this.pathCommands = ""; }) } .height('100%') .width('100%') } }

Note:

1. Since path cannot be used as the root node of the build, it is wrapped with container component row.

2. The xy unit of coordinates obtained by onTouch is vp, and the unit of svg descriptor is vp, so the value should be converted to units. Otherwise, you'll be able to draw something, but the coordinates and the position of the pen will be reduced.

3. You need to set the width and height of the path component, otherwise it will not be displayed.

​

作者：GeorgeGcs
链接：https://juejin.cn/post/7491984282539524135
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1. Development Flow Overview

A three-stage pipeline to insulate Oniro development, ensuring scalability:

Stage Platform Purpose

Early Development Stage 1 Foundation

• GitHub (U.S.): Rapid prototyping, open-source collaboration from global developers as foundation of original codes

Maintenance & Expansion Stage 2+ Apex

• Codeberg (Germany) sanctions-resilient updates, EU compliance with open source OpenHarmony-Oniro original code development

Commercialization Stage 3 Apex

• Bitbucket (Australia) Proprietary IP original code, enterprise branding on Huawei HarmonyOS development ecosystem and Open Source Oniro-OpenHarmony Oniro App Store ecosystem in parallel, end game.

2. Stage 1: GitHub (U.S.) – Early Development

Focus: Ideation, open-source collaboration, and MVP builds.
Tools & Practices:

• DevEco Studio: IDE for Oniro-native app development.

• GitHub Actions: CI/CD pipelines for testing and dependency management.

• ArkTS: Huawei’s TypeScript-like language for cross-platform compatibility.

• OpenHarmony SDK: Leverage open-source tools and APIs.

Why GitHub?

• Largest developer community for rapid feedback.

• Seamless integration with DevEco Studio and ArkUI.

Sanctions Mitigation:

• Avoid Huawei-specific tooling until Codeberg transition.

• Use GitHub only for non-proprietary code.

3. Stage 2: Codeberg (Germany) – Maintenance & Expansion

Focus: Sanctions-proofing, EU compliance, and feature expansion.
Tools & Practices:

• Gitea Migration: Codeberg’s Gitea-based platform ensures GDPR compliance and EU data sovereignty.

• Drone CI: Replace GitHub Actions with this open-source, self-hosted CI/CD tool.

• Eclipse Theia: Open-source IDE for EU-aligned development.

• OpenChain Compliance: Audit code for restrictive-origin dependencies.

Why Codeberg?

• Non-profit, EU-based governance avoids restrictive party jurisdiction.

• Aligns with OpenHarmony-Oniro’s Eclipse Foundation roots.

Key Tasks:

• Strip restrictive party-controlled vunlerable tools (e.g., GitHub Actions, AWS).

• Implement Eclipse Xpanse with plugins supported global cloud parties like Huawei Cloud and other 3rd parties for storage and compute.

4. Stage 3: Bitbucket (Australia) – Commercialization

Focus: Hybrid/Dual model of pre-final stage Open Source front end code with mixed full end stack and final stage full stack with backend Proprietary code on both having enterprise branding, and AppGallery + Oniro App Store deployment.
Tools & Practices:

• Bitbucket Pipelines: Atlassian’s CI/CD for closed-source workflows.

• Jira Integration: Align development with Huawei’s AppGallery requirements.

• White-Labeling: Rebrand apps for enterprise clients (e.g., "BankX for HarmonyOS").

• Use IPFS/Filecoin for immutable, decentralized code storage to prevent takedowns.

• Patent Non-Aggression:

  • Join the Open Invention Network (OIN) to create mutual defense against patent litigation.

• Strong Copyleft and mixed model partial and weak Copyleft on Oniro App Store and Proprietary License for AppGallery:

  • Strong copyleft - License core components on front end under GPLv3 or AGPL to deter monopolistic firms from forking/weaponizing Oniro ecosystem code. Coexisting with partial copyleft option.

  • Forking Protections:

    • Strong copyleft - License critical components of back end under Prosperity Public License to prevent monopolistic firms from privatizing Oniro ecosystem code.

    • Partial copyleft allows enterprise developer author on parts to share freely and keep proprietary under GNU Free Documentation License (GFDL) and Design Science License (DSL) used for documentation on Oniro-HarmonyOS ecosystems.

    • Weak copyleft flexibility and compatibility for derivative work on software libraries and components via the GNU Lesser General Public License (LGPL) and the Mozilla Public License (MPL) used for software libraries and components on Oniro-HarmonyOS ecosystems.

    • Closed Repo:

      • Proprietary License for HarmonyOS AppGallery ecosystem exclusive license code on Software License Agreement - Huawei (EN).

• Blockchain-Verified Builds:

  • Sign releases with blockchain hashes (e.g., Hedera Hashgraph) to prove code integrity and resist tampering.

• DevEco Studio: Duplicate project under unified folder - Signing applications for both HarmonyOS private repo final development and OpenHarmony open source core only earlier development project repo shared family of platforms adhering to common shared APIs alongside HarmonyOS compatible APIs targets implemented of enterprise branded applications with application/game parity functionalities.

• Huawei AppGallery Connect: HarmonyOS (NEXT 5.0+/4.x dual frame earlier) SDK integration for publishing and analytics for signed APP with runtimeOS of HarmonyOS to run for global developers (outside US domestic market).

• f-oh-data: Use Docker for server F-OH Server (to be developed) or website front end (F-OH Web) for publishing and analytics from unsigned/signed OpenHarmony HAP with runtimeOS switch of OpenHarmony to run for global developers (including US domestic market).

Why Bitbucket?

• Atlassian’s Australian base.

• Enterprise-grade security for proprietary code.

Compliance Checks:

• Ensure original code/IP in final builds.

• Use Huawei’s OSS Audit Tool (OAT) for license scanning.

5. Tools & Compliance Framework

Compliance Checklist:

• ✅ All code migrated to EU-based Codeberg from GitHub scrubbed of U.S. dependencies.

• ✅ Proprietary modules hosted only on Bitbucket/Eclipse Xpanse Cloud.

• ✅ Final APK (Case by case for HMS EMUI-HarmonyOS 4.x)/HAP HarmonyOS NEXT/5.0+ signed with Huawei’s AppGallery certificates.

6. Case Study: EuroSmart IoT Suite

A European IoT startup used PureHarmony to launch a smart home app on HarmonyOS NEXT:

1. GitHub: Built MVP with open-source sensor drivers.

2. Codeberg: Added GDPR-compliant data analytics and EU localization.

3. Bitbucket: Developed proprietary AI algorithms and partnered with Huawei for AppGallery promotion.
   Result: 500K+ downloads globally, even in China, with zero vulnerability to restrictions.

7. Strategic Benefits

• Geopolitical Resilience: PureHarmony decoupling from restrictive tech stacks while retaining global collaboration long-term.

• Compliance: Aligning with EU (GDPR), Australian (Privacy Act), and Chinese (CSL) regulations.

• Market Access: Tap into Huawei’s 1 billion+ AppGallery users without GMS dependencies.

8. Challenges & Solutions

• Repo Migration: Use git clone --mirror and Gitea’s migration tools.

• CI/CD Fragmentation: Standardize on open-source Eclipse Xpanse recommendations with optional Huawei Cloud’s DevOps or Openstack powered cloud, FlexibleEngine, Regio Cloud, Plus Server for all stages.

• Contributor Training: Educate teams on clean-room practices for Codeberg/Bitbucket.

Core Strategy for Mainstream Apps

App Type

Oniro App Store (Oniro/OpenHarmony)

AppGallery (HarmonyOS Next SDK Kit)

Banking (Barclays)

Open-source UI, basic transaction APIs (Codeberg).Proprietary fraud detection, biometric auth (BitBucket + HMS). Both work across the open-source Oniro and commercial HarmonyOS NEXT both based on OpenHarmony ecosystem with a unified app development codebase.

Social (Instagram)

Open-core photo filters, feed rendering (Codeberg). AI-driven recommendations, Stories analytics (BitBucket + HMS). Both work across the open-source Oniro and commercial HarmonyOS NEXT both based on OpenHarmony ecosystem with a unified app development codebase.

Streaming (Netflix)

Open-source video player (e.g., ExoPlayer) + Open Mobile Hub DRM, AudioVivid, HDRVivid standards (Codeberg). Proprietary CDN, 4K/HDR optimizations, Huawei DRM (BitBucket + HarmonyOS native kits). Both work across the open-source Oniro and commercial HarmonyOS NEXT/5+ both based on OpenHarmony ecosystem with a unified app development codebase.

Gaming (Angry Birds)

Open-source game logic (underlining open-source UI frameworks like ZFramework) on Codeberg. Proprietary physics engine, IAP, Huawei AR/VR SDK (BitBucket + HMS). Both work across the open-source Oniro and commercial HarmonyOS NEXT both based on OpenHarmony ecosystem with a unified game development codebase.

2. Technical Implementation

a. Cross-Platform Compatibility

• OpenHarmony Runtime:

  • Use ArkUI for native OpenHarmony UIs and Ark Runtime for Android app compatibility (AAB→HAP conversion).

  • Example: TikTok’s Android app runs on Oniro via Ark Runtime, stripped of Google dependencies.

• HarmonyOS SDK:

  • Optimize for Huawei’s hardware (e.g., GPU Turbo, Kirin chips) in AppGallery builds.

b. Feature Parity via Modular Code

• Shared Open-Source Core:

  • Host UI frameworks, network layers, and basic APIs on Codeberg (Apache 2.0).

  • Example: Spotify’s playlist management and audio playback logic.

• Proprietary Extensions:

  • Keep AI/ML models, payment gateways, and analytics on BitBucket.

  • Example: Netflix’s recommendation engine or TikTok’s For You Page algorithm.

c. Build Automation

• CI/CD Pipelines:

  • Oniro Build: Compile open-core modules with OpenHarmony’s DevEco Studio.

  • AppGallery Build: Merge open-core with proprietary modules + HMS integrations.

# Example GitLab CI for dual builds

build_oniro:

script:

- devEco build --target openharmony --no-hms-libraries

build_appgallery:

script:

- devEco build --target harmonyos --hms-libraries

3. Monetization & Compliance

Aspect

Oniro App Store

AppGalleryAds

Open-source ad SDKs (e.g., AdMob alternatives).

Huawei Ads Kit + proprietary ad targeting.

In-App Purchases

Community-driven payment plugins (e.g., Stripe).Huawei IAP (seamless integration with HMS).

DRM

Open-source Open Mobile Hub DRM alternative.

Huawei DRM (hardware-backed security) for HarmonyOS (NEXT/5.0+) devices.

Regulatory Compliance

GDPR-compliant via Codeberg (EU hosting). Aligns with China’s Cybersecurity Law (CSL) and Australian Privacy Act via BitBucket (Australian hosting).

4. Case Study: Assassin’s Creed Jade

• Oniro Version:

  • Open-source game logic (UI) on Codeberg.

  • Uses OpenHarmony’s 3D rendering engine (compatible with Vulkan) optimised for original game engine.

• AppGallery Version:

  • Adds Huawei’s Pangu LLM MindSpore, HiAI integrating Celia for enhanced NPC interactions.

  • Integrates Huawei’s Game Service for achievements/leaderboards on HarmonyOS NEXT SDK.

5. Challenges & Solutions

Google Play Services Dependency on Android and Apple Darwin, Microsoft Windows dependency development

Replace with OpenHarmony compatible open source frameworks/tools/layers + Open Mobile Hub and Huawei’s HarmonyOS NEXT SDK Kits in parallel.

Performance Gaps

Use HarmonyOS SDK’s hardware optimizations (e.g., GPU Turbo) for AppGallery to take advantage of vertical integration level Kirin.

Fragmented Codebase

Modular architecture + shared CI/CD pipelines for open/closed components.

Developer Adoption

Provide templates for commercial Unity/Unreal Engine plugins targeting OpenHarmony base across OpenHarmony, including Oniro and Huawei HarmonyOS NEXT/5+ systems.

6. Tools & Resources

• OpenHarmony ArkUI: Developer Documentation

• Huawei HMS Core: Integration Guide

• Codeberg: Host Open-Source Modules

• BitBucket: Enterprise-Grade Repos

By decoupling, deploying, app file packaging open-source frontends (Oniro) from proprietary backends (AppGallery), companies like Netflix, TikTok, and Ubisoft can:

1. Reach Global Audiences: Serve open-source builds on Oniro taking advantage of open source underlining UI frameworks within apps/games as well as Open Mobile Hub framework building HAP package and native HarmonyOS Kit versions on AppGallery from runtimeOS switches building APP package.

2. Protect Core IP: Keep AI, DRM, and monetization logic closed-source on HarmonyOS and webview/3rd party monetization logic on open source Oniro/OpenHarmony.

3. Avoiding Complications: Use Codeberg/EU tooling for Oniro and Huawei’s ecosystem with Australian BitBucket

This hybrid model transforms constraints into a strategic advantage, enabling mainstream apps to thrive in both open and closed ecosystems.

Conclusion

The PureHarmony workflow empowers developers to innovate for independent OpenHarmony, Oniro and HarmonyOS NEXT compatible platforms while navigating today’s fragmented tech landscape. By strategically leveraging GitHub, Codeberg, and Bitbucket, teams can deliver official licensed commercial apps for Huawei’s ecosystem without compromising on compliance or agility.

The hybrid model allows companies to deploy mainstream apps on both Oniro App Store (OpenHarmony-based) and Huawei AppGallery (HarmonyOS SDK) without sacrificing functionality.

Call to Action:

• Join the global Oniro Developer Community.

• Join the global HarmonyOS Developer Community.

• Explore Codeberg’s OpenHarmony-Oniro PureHarmony repos.

• Start white-labeling with GitHub prototyping, Codeberg and Bitbucket combo development.

• HarmonyOS Next Private Repository Construction in Practice as final development kickoff

Build globally, comply locally, and thrive with the PureHarmony developer guide utility.

For more info, check out:

• Our Project Robius Blog

• The Robius Book

• Presentations about Robius:

  • Project Robius's first status update & demo (RustNL 2024)

    • Videos: YouTube Link

    • Slides: PowerPoint (19MB), PDF version (12MB)

  • Robrix: a Matrix chat client and more (GOSIM Europe 2024)

    • Videos: YouTube link

    • Slides: PowerPoint (22MB), PDF version (16MB)

  • Introducing our vision for Project Robius (GOSIM 2023)

    • Videos: YouTube link, Bilibili link

    • Slides: PowerPoint (18MB), PDF version (15MB)

The Robius organization also acts as an informal¹ working group: a welcoming, public space to collect and discuss resources related to improving and furthering the app dev experience in Rust.

Got a question? Want to get involved? Interested in contributing?
Come join our friendly community on the Matrix chat Robius space.

Our vision

We believe that the Rust programming language is the right choice for the next generation of application developers, but that the language ecosystem needs a bit more love and attention to make it a first-class citizen in the world of application development, particularly on mobile platforms.

We envision a future in which:

1. Rust developers can create safe, beautiful, and robust applications that execute efficiently and performantly on a wide variety of platforms, especially mobile.

2. Frontend developers using other languages are encouraged to come over to the dark side wonderful world of Rust and give it a try, with a seamless transition experience that helps overcome the steep learning curve commonly associated with Rust.

3. The Rust ecosystem is broadened and strengthened, demonstrating to existing Rust experts in other domains that Rust is a great fit for highly-productive application development, not just low-level systems and embedded programming.

What's in a name?

The name Robius comes from the Latin word robius, meaning red in color, as in oxen, wheat, rust, etc. This makes for a nice color-based connection to Rust, our programming language of choice.

Robius rhymes with Mobius, and our logo/icons take inspiration from the wordplay combination of "Rust" and "Mobius strip".

Yes, technically, the original German name is Möbius, but we use an Americanized pronunciation with a long "o" sound: "Roe-bee-us" / ˈɹoʊˈbiəs.

Current status

Robius is a brand new vision -- we're just getting off the ground.

Currently, the best way to get started is to directly use one of the recommended UI toolkits to build out your application's UI and define its UX behavior. For now, everything else beyond UI will require you to add the missing pieces yourself, e.g., network connectivity, async multitasking, and access to other device peripherals or system services.

Everything is developed right here in the open, so check back for updates often! We plan to introduce a pre-alpha version of the full Robius system stack (everything beneath the application) by early-to-mid 2024, which will enable easier access to and integration of other platform/OS features alongside the UI toolkits.

Platform support 📲 🖥️ 🌐 💻 🖱️ ⌨️

➡️ Click here for a table ⬅️ showing which projects support which features on which platforms.

Key Community Projects

The Robius ecosystem consists of several independent projects that can be composed into a complete system stack to realize fast, painless application development across multiple platforms in pure Rust. Components are loosely coupled, allowing a developer (in the future) to customize which components are used to comprise the underlying system, such as choosing

• Makepad is a cross-platform UI toolkit currently under active development that offers a hybrid retained-mode and immediate-mode UI model.

  • Rapid development cycle: very fast compile times due to a custom minimal dependency set, plus a custom DSL for live design that enables hot reloading of UI elements.

  • Makepad Studio: an IDE prototype built using Makepad itself with unique features like cross-process shared textures for live reload of an in-window UI app, docking tabs for file/window views, hyper-smooth code folding, and more.

  • Makepad framework: a (growing) collection of highly-performant widgets and minimal, zero/low-overhead platform abstractions.

• Dioxus is a cross-platform, production-ready UI toolkit that is inspired by React, with a custom metalanguage called RSX that is used to declare UI elements/layout in an HTML-like style.

  • Supports many platforms with a set of interchangeable target renderers, including desktop, webapps, static sites, text UIs, liveview, and mobile.

  • Fast and memory-efficient, with perfect lighthouse scores and performance orders of magnitude better than Node or Python.

  • Excellent built-in abstractions for state management.

  • Easy, familiar styling using vanilla CSS or the CSS framework of your choice, e.g., Tailwind.

• Osiris is a set of Rust interfaces for developing immersive applications atop a diverse set of operating systems services and platform-specific functionality.

  • Osiris aims to provide Rust apps with an easy canonical way to access platform features like storage, networking, multimedia (video, audio, camera), geolocation, device orientation (accelerometer, gyro), timers & alarms, notifications, clipboard, drag-n-drop, and more.

  • osi: the primary Rust package that exposes direct access to OS interfaces. Higher-level Rust abstractions are coming soon, after raw interfaces for more platforms are complete.

  • Osiris offers build tooling that can:

    1. Set up new project directories with auto-generated scaffolding for platform-specific integration components that can be customized post-creation.

    2. Generate application artifacts that adhere to the policies of each platform, i.e., packages that can be published to common app stores (Google Play, Apple App Store, Microsoft Store, etc).

Repositories of Interest

Robius aims to provide a fully-functional reference design of the entire system stack beneath the application, for which an architectural overview and detailed documentation will be available.

We also intend to provide two classes of actual applications:

1. Flagships: complete, fully-featured apps with a clean UI design, polished UX, and functional business logic. These apps will be publishable to platform app stores.

2. Simple demos: a series of basic example apps that exhibit a few key features, with mock components underneath and elsewhere.

Flagship apps

• Robrix: the Robius Matrix chat client.

  • Currently under active development, and looking for help!

  • The needs of this app will be the primary driver for Robius development.

• Moxin: a local explorer for open-source LLMs.

  • Currently under active development, and looking for help!

  • Allows running LLMs locally and conversing with an AI Chatbot for each model, using the WasmEdge runtime as an LLM backend runtime.

Simple demo apps

• makepad_social_media_feed: a mobile UI demo of a social media feed.

  • Also see Makepad's more recent example: Makepad news feed.

• makepad_taobao: a UI demo for an online shopping app, similar to eBay or Taobao.

• todo_makepad: a basic to-do list app.

• makepad_wechat: a demo of a chat-like app UI, like WeChat, WhatsApp, Signal, etc.

• makepad_tiktok: a UI demo for a TikTok-style short video browsing app.

• makepad_widgets_sample: an app showcasing various widgets offered by Makepad.

• makepad_image_manipulation: a demo of Makepad's ability to do funky transformations on images with high performance.

• 7 GUIs: select implementations of the 7 GUIs benchmark, atop both Makepad and Dioxus.

For more examples, check out the extensive set of Dioxus example apps and Makepad example apps. Osiris-specific examples are coming soon.

[Summer 2025] Publish Robrix v1.0 with full Matrix functionality, for "power" users with OpenHarmony support

• Offer a responsive UI design with a dockable, multi-tab view of many rooms side-by-side, which also adapts to varying screen sizes (mobile, desktop, etc).

  • ✅ This is already complete! (as described in our previous post)

• Achieve feature parity with existing major clients, including administrative features like a full settings pane, session management, room creation/admin, message search, threads, spaces, etc.

  • See Milestone 2 on our GitHub page for more details.

  • Generally, these features are not drivers of Robius development, as they don't require complex platform features, so they were of a lower priority initially.

  OpenHarmony community:

  Stay tuned for further developments of Robius multi-platform app development in Rust for OpenHarmony-based platforms.

Original GitHub link: Project Robius and official website robius.rs

Progress

• ❔ : Unknown;

• ⭕ : Not supported;

• ❌ : With compiling error;

• 🛠️ : Under developing;

• ⁉️ : With running error;

• ✔️ : Running well.

Unsupported Features in WebAssembly

• Load Lua script with file;(Will trigger a prompt window)

• C/C++ callback JS function in async thread.

Requirements

• C99, C++23;

• Clang 15+;

• CMake 3.10+;

• Xcode 14.0+, for iOS & macOS;

• Android Studio(or IntelliJ IDEA) with NDK r25+;

• DevEco Studio with Native SDK, for HarmonyOS;

• Emscripten, for WebAssembly.

C++ New Features Compatibility

Dependencies

• ada-url: URL parser;(Requires std::ranges in C++20)

• curl: Networking;

• cJSON: JSON codec;

• libuv: Asynchronous I/O;

• lua: Lua runtime;

• MMKV: Key-value storage;

• openssl: Crypto;

• quickjs: JS runtime;

• sqlite: DB storage.

GitHub link: R1NC/NGenXX: A cross-platform framework based on modern C++, supporting biz dev via Lua & JS.

This project can help us to build a native module library for OpenHarmony/HarmonyNext with zig-lang.

Note: This project is still in the early stage of development and is not ready for use. You can use it as a toy.

Example

We provide a simple example to help you get started in examples/add.

Just run the following command to build the example:

zig build

And you can get libadd.so in zig-out/dist.

Original GitHub link: harmony-contrib/zig-addon: A zig tool use zig to build harmony native module

This project is in progress, and the API is not stable.

openharmony-ability is a crate to manage OpenHarmony application's activity with rust, be similar to android-activity.

Architecture

The architecture of OpenHarmony is similar to Node.js, where we need to manage the application's lifecycle via callbacks. Hence, there are a few key points to keep in mind.

1. Don't block the main thread as it can lead to application freezing and crashing.

2. openharmony-ability's run_loop doesn't retain the resource and ownership, so if you create a new resource, you should leak it to prevent NULL pointer.

We provide some packages or crates to help you develop OpenHarmony application with Rust.

ArkTS

We need a entry-point to start the application, and we use ArkTS to manage the application's lifecycle.

• @ohos-rs/ability
  All of ability need to extend RustAbility and all lifecycle need to call super.xx to make sure the ability can work normally.

Rust

• openharmony-ability
  Basic crate to manage the application's lifecycle.

• openharmony-ability-derive
  Macro to generate the ability's implementation.

Usage

1. use ohrs to init project and add openharmony-ability dependencies.

ohrs init hello

cargo add openharmony-ability
cargo add openharmony-ability-derive

1. Add the follow code to lib.rs.

use ohos_hilog_binding::hilog_info;
use openharmony_ability::App;
use openharmony_ability_derive::ability;

#[ability]
fn openharmony_app(app: App) {
    app.run_loop(|types| {
        hilog_info!(format!("ohos-rs macro: {:?}", types.as_str()).as_str());
    });
}

Note: ohos_hilog_binding is a optional dependency and you can add or remove it.

1. Add @ohos-rs/ability to your OpenHarmony/HarmonyNext project.

ohpm install @ohos-rs/ability

1. change the EntryAbility.ets file to the follow code:

import { RustAbility } from "@ohos-rs/ability";
import Want from "@ohos.app.ability.Want";
import { AbilityConstant } from "@kit.AbilityKit";

export default class EntryAbility extends RustAbility {
  public moduleName: string = "example";

  async onCreate(
    want: Want,
    launchParam: AbilityConstant.LaunchParam
  ): Promise<void> {
    // Note: you should call super.onCreate to make sure the ability can work normally.
    super.onCreate(want, launchParam);
  }
}

1. Change the moduleName to your rust project name. For example, we need to change it with hello in this project.

2. Build your rust project and copy the dynamic library to (Open-)Harmony(Next) project.

3. Now, you can enjoy it.

Example

See example with example

Original GitHub link: harmony-contrib/openharmony-ability: Building application for OpenHarmony with Rust

The ASP.NET Core Blazor Hybrid framework has been adapted to HarmonyOS, welcome everyone to try it out, and (Dust Renault via BiliBili) have created a OpenHarmony.NET organization, welcome everyone to follow.

Blazor Hybrid - The adaptation has been completed, everyone is welcome to experience it!

Blazor is a .NET front end framework for building web apps using only .NET technologies. In 2021, Blazor extended to the desktop with Blazor Hybrid, allowing developers to use their existing skills on desktop platforms.

Blazor Hybrid apps are traditional desktop apps that host the actual Blazor web app inside a web view control. They use .NET MAUI for the desktop side, but you can use another framework if it doesn’t meet your requirements.

The lack of Linux support and the use of different browser engines on Windows and macOS are limitations of MAUI. Microsoft Edge and Safari vary in how they implement web standards, execute JavaScript, and render pages. In advanced apps, this difference can be a source of bugs and require additional testing.

If MAUI is not an option, consider opting for Avalonia UI — a cross-platform UI library with several Chromium-based web views in its ecosystem.

Original article: Blazor hybrid apps in Avalonia UI | Blog | DotNetBrowser

Code repositories: https://github.com/OpenHarmony-NET/OpenHarmony.Blazor.Hybrid

Organization: https://github.com/OpenHarmony-NET

Original source (Dust Renault via BiliBili - China)

Avalonia UI - Official Website

Previous Article: .NET/Avalonia adaptation to HarmonyOS progress

This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system and summarize them based on practical development practices. It mainly serves as a medium for technical sharing and communication. There may inevitably be some errors or omissions. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.

In the application development of HarmonyOS Next, making applications perfectly adapt to different screen sizes is the key to enhancing the user experience. The breakpoint adaptation technology is like a magic key, helping developers easily open the door to cross-device adaptation. Today, let's take an in-depth look at the relevant knowledge of breakpoint adaptation.

The Concept and Definition of Breakpoints

Breakpoints, simply put, are the "scales" that divide the width of the application window into different intervals. Through these intervals, developers can set different layouts and styles for the application according to different screen size ranges, so as to achieve the best display effect of the application on various devices. In HarmonyOS Next, the common breakpoint divisions are as follows:
| Breakpoint Name | Value Range (vp) |
| --- | --- |
| XS | [0, 320) |
| sm | [320, 600) |
| md | [600, 840) |
| lg | [840, +∞) |

This division is not set in stone, and developers can adjust it according to the actual project requirements. For example, if the application is mainly aimed at tablets and large-screen devices, it may not be necessary to adapt to the XS breakpoint; for some special application scenarios, additional breakpoints such as xl and xxl can be added after the lg breakpoint. However, it should be noted that although adding new breakpoints can make the layout more refined, it will also increase the workload of development and design.

Using Breakpoint Adaptation in Grid and Navigation Components

Grid Component

The Grid component is a powerful assistant for implementing responsive layouts. When used in conjunction with breakpoints, it allows page elements to present different arrangements under different screen sizes. Here is a simple example:

@Entry
@Component
struct GridBreakpointSample {
    @State currentBreakpoint: string = 'unknown'
    build() {
        GridRow({ breakpoints: { value: ['600vp', '840vp'], reference: BreakpointsReference.WindowSize } }) {
            GridCol({ span: { xs: 12, sm: 6, md: 4, lg: 3 } }) {
                Column() {
                    Image($r('app.media.image')).width('100%').aspectRatio(1).backgroundColor('#F1F3F5')
                    Text('Image Description').fontSize(14).textAlign(TextAlign.Center)
                }
            }
        }
          .onBreakpointChange((currentBreakpoint: string) => {
                this.currentBreakpoint = currentBreakpoint
            })
    }
}

In the above code, the GridRow component sets the breakpoints through the breakpoints property. Under different breakpoints, the number of columns occupied by the GridCol component is different: it occupies 12 columns under the xs breakpoint, which is suitable for the single-column layout of small-screen devices; it occupies 6 columns under the sm breakpoint; it occupies 4 columns under the md breakpoint; it occupies 3 columns under the lg breakpoint, which is more suitable for the multi-column display of large-screen devices. In this way, the layout of the image and text can be automatically adjusted according to the screen size, ensuring that users can get a good visual experience on different devices.

Navigation Component

While implementing page navigation, the Navigation component can also adapt to different screen sizes with the help of breakpoints. For example, a stacked navigation may be used on small screens, while a columnar navigation may be switched to on large screens.

@Entry
@Component
struct NavigationBreakpointSample {
    @State currentBreakpoint: string ='sm'
    @State pageInfos: NavPathStack = new NavPathStack()
    build() {
        Navigation(this.pageInfos) {
            if (this.currentBreakpoint ==='sm') {
                // Use stacked navigation on small screens
                Column() {
                    List() {
                        ListItem() {
                            Text('Page 1').fontSize(20).onClick(() => {
                                this.pageInfos.pushPath({ name: 'Page1' })
                            })
                        }
                        ListItem() {
                            Text('Page 2').fontSize(20).onClick(() => {
                                this.pageInfos.pushPath({ name: 'Page2' })
                            })
                        }
                    }
                }
            } else {
                // Use columnar navigation on large screens
                Row() {
                    Column() {
                        List() {
                            ListItem() {
                                Text('Page 1').fontSize(20).onClick(() => {
                                    this.pageInfos.pushPath({ name: 'Page1' })
                                })
                            }
                            ListItem() {
                                Text('Page 2').fontSize(20).onClick(() => {
                                    this.pageInfos.pushPath({ name: 'Page2' })
                                })
                            }
                        }
                    }
                    Column() {
                        // Content area
                        NavDestination() {
                            if (this.pageInfos.current.path === 'Page1') {
                                Text('This is the content of Page 1').fontSize(20).padding(20)
                            } else if (this.pageInfos.current.path === 'Page2') {
                                Text('This is the content of Page 2').fontSize(20).padding(20)
                            }
                        }
                    }
                }
            }
        }
          .mode(NavigationMode.Auto)
          .onBreakpointChange((breakpoint: string) => {
                this.currentBreakpoint = breakpoint
            })
    }
}

In this example, the change of breakpoints is monitored through the onBreakpointChange event, and the layout mode inside the Navigation component is determined according to the current breakpoint value currentBreakpoint. In the case of a small screen (sm breakpoint), a stacked layout is used, and in the case of a large screen, it is switched to a columnar layout, providing users with a more convenient navigation experience.

Dynamically Monitoring Window Changes to Adjust the UI

onBreakpointChange is an important method for implementing dynamic UI adaptation. It can promptly notify developers when the breakpoint changes, so as to make corresponding adjustments to the UI. In addition to the applications in the Grid and Navigation components mentioned earlier, it can also play a role in more complex page layouts.

@Entry
@Component
struct DynamicUIAdjustment {
    @State currentBreakpoint: string ='sm'
    @State isSideBarVisible: boolean = false
    build() {
        Column() {
            if (this.currentBreakpoint ==='sm') {
                // Layout for small screens
                Button('Toggle Sidebar').onClick(() => {
                    this.isSideBarVisible =!this.isSideBarVisible
                })
                if (this.isSideBarVisible) {
                    // Display sidebar content
                    Text('Sidebar Content').fontSize(20).backgroundColor('#F1F3F5')
                }
            } else {
                // Layout for large screens, always display the sidebar
                Row() {
                    Column() {
                        Text('Sidebar Content').fontSize(20).backgroundColor('#F1F3F5')
                    }
                    .width('30%')
                    // Main content area
                    Column() {
                        Text('Main Content').fontSize(20).padding(20)
                    }
                }
            }
        }
          .onBreakpointChange((breakpoint: string) => {
                this.currentBreakpoint = breakpoint
                if (breakpoint!=='sm') {
                    this.isSideBarVisible = true
                }
            })
    }
}

In this example, the onBreakpointChange event not only updates the currentBreakpoint state but also adjusts the display logic of the sidebar according to the breakpoint change. Under the small screen (sm breakpoint), the display and hiding of the sidebar are controlled by a button; while under the large screen, the sidebar is always displayed. In this way, the application interface can be dynamically adjusted according to the change of the window size, providing users with a more seamless user experience.

The breakpoint adaptation technology of HarmonyOS Next provides developers with powerful tools. By reasonably using breakpoints, achieving adaptation in components such as Grid and Navigation, and dynamically adjusting the UI with the help of onBreakpointChange, applications can show their best state on devices with different screen sizes. It is hoped that everyone can master these skills proficiently in actual development and create higher-quality applications.

Original blog post: Breakpoint Adaptation in HarmonyOS Next —— Making Applications Adapt to Different Screen Sizes - DEV Community

This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system and summarize them based on practical development practices. It mainly serves as a medium for technical sharing and communication. There may inevitably be some errors or omissions. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.

In the ecosystem of HarmonyOS Next, free window adaptation is an important part of enhancing the flexibility of applications and the user experience. It allows users to freely adjust the size of the application window, bringing great convenience to multi-device usage scenarios. Next, let's take an in-depth look at the relevant knowledge of free window adaptation.

Introduction to the Free Window Mode

The free window mode, simply put, means that the size of the application window can be freely adjusted by the user, no longer limited to a fixed size. This mode is suitable for a variety of scenarios. For example, when a user is processing documents and viewing materials on a tablet device at the same time, they can adjust both the document application and the browser application to an appropriate window size to achieve efficient multi-tasking. Or on a large-screen device, users can flexibly adjust the size of the video playback window according to their needs while taking into account other operations. In the free window mode, the application can adjust the layout in real time according to the change of the window size, providing users with a more personalized usage experience.

How to Limit the Size Range of the Free Window

In HarmonyOS Next, developers can limit the size range of the free window by setting a series of parameters in the application configuration file. These parameters include minWindowWidth, minWindowHeight, maxWindowWidth, maxWindowHeight, minWindowRatio, and maxWindowRatio, etc.

minWindowWidth and minWindowHeight are used to set the minimum window width and height supported by the application, with the unit being vp (virtual pixels). For example, if minWindowWidth is set to 320, then when the user adjusts the window width to be less than 320vp, the window will not be able to shrink further. Similarly, maxWindowWidth and maxWindowHeight limit the maximum width and height of the window.

minWindowRatio and maxWindowRatio specify the minimum and maximum width-to-height ratios of the window. For example, setting minWindowRatio to 0.5 means that the width of the window is at least 0.5 times its height, which can ensure that during the window adjustment process, the content will not be displayed abnormally due to an unbalanced width-to-height ratio.

The following is an example of setting these parameters in the application configuration file:

{
    "module": {
        //...
        "abilities": [
            {
                //...
                "minWindowWidth": 320,
                "minWindowHeight": 240,
                "maxWindowWidth": 1440,
                "maxWindowHeight": 900,
                "minWindowRatio": 0.5,
                "maxWindowRatio": 2
            }
        ]
    }
}

By reasonably setting these parameters, developers can meet the different users' needs for window size adjustment while ensuring the normal display of the application interface, and at the same time avoid problems such as layout confusion caused by excessive changes in the window size.

Optimizing the Free Window Experience by Combining Adaptive and Responsive Layouts

In order to provide a smoother and more beautiful user experience in the free window mode, we can combine adaptive and responsive layouts. The adaptive layout can ensure that when the window size changes within a certain range, the display of page elements remains normal; while the responsive layout can adjust the page structure to adapt to the new size when the window size changes significantly.

The following is an example code showing how to combine these two layouts in the free window mode:

@Entry
@Component
struct FreeWindowLayout {
    @State currentBreakpoint: string ='sm'
    build() {
        GridRow({ breakpoints: { value: ['600vp', '840vp'], reference: BreakpointsReference.WindowSize } }) {
            GridCol({ span: { xs: 12, sm: 6, md: 4, lg: 3 } }) {
                Column() {
                    // Example of adaptive layout: Image scaling
                    Image($r('app.media.image')).width('100%').aspectRatio(1).backgroundColor('#F1F3F5')
                    // Example of responsive layout: Adjusting the text size under different breakpoints
                    if (this.currentBreakpoint ==='sm') {
                        Text('Image Description').fontSize(14).textAlign(TextAlign.Center)
                    } else {
                        Text('Image Description').fontSize(16).textAlign(TextAlign.Center)
                    }
                }
            }
        }
          .onBreakpointChange((breakpoint: string) => {
                this.currentBreakpoint = breakpoint
            })
    }
}

In this example, the GridRow and GridCol components form the basic layout framework, and the responsive layout is achieved by using breakpoints. Under different breakpoints, the number of columns occupied by the GridCol component is different, and the layout of the image and text will be adjusted accordingly. At the same time, by setting width('100%') and aspectRatio(1) for the image, it has the ability to adapt to the window size and always maintain an appropriate display ratio.

For another example, on the product detail page of an e-commerce application, it can be optimized like this:

@Entry
@Component
struct ProductDetailPage {
    @State currentBreakpoint: string ='sm'
    build() {
        Column() {
            if (this.currentBreakpoint ==='sm') {
                // Layout for a small window, with the image on top and the text below
                Image($r('app.media.productImg')).width('100%').aspectRatio(1.5)
                Text('Product Details: This is a really great product...').fontSize(14).padding(10)
            } else {
                // Layout for a large window, with the image and text side by side
                Row() {
                    Image($r('app.media.productImg')).width('40%').aspectRatio(1.5)
                    Column() {
                        Text('Product Details: This is a really great product...').fontSize(16).padding(10)
                    }
                      .width('60%')
                }
            }
        }
          .onBreakpointChange((breakpoint: string) => {
                this.currentBreakpoint = breakpoint
            })
    }
}

In this way, in the free window mode, no matter how the window size changes, the application can provide users with a good visual and interactive experience through the adaptive and responsive layouts, making the content display more reasonable and comfortable.

The free window adaptation function of HarmonyOS Next brings more possibilities to application development. By reasonably limiting the window size range and skillfully combining the adaptive and responsive layouts, developers can create applications that perform well in the free window mode and meet the diverse usage needs of users. It is hoped that everyone can make full use of these technologies in actual development to bring a better application experience to users.

Original Blog Post: Free Window Adaptation in HarmonyOS Next - DEV Community

@Sajjad Mayahi demonstration above here

1. If you are opening DevEco Studio for the first time, click Create Project. If a project is already open, choose File > New > Create Project from the menu bar.

2. On the Choose Your Ability Template page, select Application (or Atomic Service, depending on your project), select Empty Ability as the template, and click Next.

   To develop a native project, select the Native C++ template. For details about how to use other templates, see Introduction to Project Templates.

1. On the Create Project page, Compatible SDK indicates the earliest compatible API version. Choose 5.0.0(12) as an example and retain the default values for other parameters.

1. Click Finish. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.

ArkTS Project Directory Structure (Stage Model)

• AppScope > app.json5: global configuration of your application. For details, see app.json5 Configuration File.

• entry: HarmonyOS project module, which can be built into a Harmony Ability Package (HAP).

  • src > main > ets: a collection of ArkTS source code.

  • src > main > ets > entryability: entry to your application/service.

  • src > main > ets > entrybackupability: the ability to back up and restore data.

  • src > main > ets > pages: a collection of pages contained in your application/service.

  • src > main > resources: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see Resource Categories and Access.

  • src > main > module.json5: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see module.json5 Configuration File.

  • build-profile.json5: current module information and build configuration options, including buildOption and targets.

  • hvigorfile.ts: module-level build script.

  • obfuscation-rules.txt: obfuscation rule file. When obfuscation is enabled, the code will be compiled, obfuscated, and compressed during builds in release mode. For details, see Enabling Code Obfuscation.

  • oh-package.json5: describes the bundle name, version, entry file (type declaration file), and dependencies.

• oh_modules: third-party library dependency information.

• build-profile.json5: project-level configuration information, including signingConfigs and products. Under products, you can set runtimeOS to HarmonyOS (by default).

• hvigorfile.ts: project-level build script.

• oh-package.json5: global configuration, including overrides, overrideDependencyMap, and parameterFile.

Building the First Page

1. Use the Text component.

   After the project synchronization is complete, in the Project window, choose entry > src > main > ets > pages to open the Index.ets file and compile the page.

   In this document, texts and buttons are used to implement page redirection and return. You can use the Row and Column components to set up the page layout. In scenarios where more complex elements should be aligned, you can use the RelativeContainer component to set up the layout.

   The sample code in the Index.ets file is shown below:

   // Index.ets

   @Entry

   @Component

   struct Index {

   @State message: string = 'Hello World'

   build() {

   Row() {

   Column() {

   Text(this.message)

   .fontSize(50)

   .fontWeight(FontWeight.Bold)

   }

   .width('100%')

   }

   .height('100%')

   }

   }

Add a Button component.

On the default page, add a Button component to respond to user clicks and implement redirection to another page. The sample code in the Index.ets file is shown below:

// Index.ets

@Entry

@Component

struct Index {

@State message: string = 'Hello World'

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

// Add a button to respond to user clicks.

Button() {

Text('Next')

.fontSize(30)

.fontWeight(FontWeight.Bold)

}

.type(ButtonType.Capsule)

.margin({

top: 20

})

.backgroundColor('#0D9FFB')

.width('40%')

.height('5%')

}

.width('100%')

}

.height('100%')

}

}

On the toolbar in the upper right corner of the editing window, click Previewer. Below is how the first page looks in the Previewer.

Building the Second Page

1. Create the second page.

   • Create the second page file: In the Project window, choose entry > src > main > ets, right-click the pages folder, choose New > ArkTS File from the shortcut menu, name the page Second, and click Finish. Below shows the created page in the pages folder.

1. • NOTE

     You can also right-click the pages folder, choose New > Page > Empty Page, name the page Second, and click Finish. In this way, there is no need to manually configure the route for the second page.

   • Configure the route for the second page. In the Project window, choose entry > src > main > resources > base > profile. In the main_pages.json file, set pages/Second under src. The sample code is as follows:

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

1. Add Text and Button components.

   Add Text and Button components and set their styles, as you do for the first page. The sample code in the Second.ets file is shown below:

// Second.ets

@Entry

@Component

struct Second {

@State message: string = 'Hi there'

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

Button() {

Text('Back')

.fontSize(30)

.fontWeight(FontWeight.Bold)

}

.type(ButtonType.Capsule)

.margin({

top: 20

})

.backgroundColor('#0D9FFB')

.width('40%')

.height('5%')

}

.width('100%')

}

.height('100%')

}

}

Implementing Page Redirection

You can implement page redirection through the page router, which finds the target page based on the page URL. Import the router module and then perform the steps below:

Navigation is recommended if you want to achieve better transition effects.

1. Implement redirection from the first page to the second page.

   In the Index.ets file of the first page, bind the onClick event to the Next button so that clicking the button redirects the user to the second page. The sample code in the Index.ets file is shown below:

// Index.ets

// Import the router module.

import { router } from '@kit.ArkUI';

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

@Entry

@Component

struct Index {

@State message: string = 'Hello World'

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

// Add a button to respond to user clicks.

Button() {

Text('Next')

.fontSize(30)

.fontWeight(FontWeight.Bold)

}

.type(ButtonType.Capsule)

.margin({

top: 20

})

.backgroundColor('#0D9FFB')

.width('40%')

.height('5%')

// Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.

.onClick(() => {

console.info(`Succeeded in clicking the 'Next' button.`)

// Go to the second page.

router.pushUrl({ url: 'pages/Second' }).then(() => {

console.info('Succeeded in jumping to the second page.')

}).catch((err: BusinessError) => {

console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)

})

})

}

.width('100%')

}

.height('100%')

}

}

2. Implement redirection from the second page to the first page.

In the Second.ets file of the second page, bind the onClick event to the Back button so that clicking the button redirects the user back to the first page. The sample code in the Second.ets file is shown below:

// Second.ets

// Import the router module.

import { router } from '@kit.ArkUI';

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

@Entry

@Component

struct Second {

@State message: string = 'Hi there'

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

Button() {

Text('Back')

.fontSize(30)

.fontWeight(FontWeight.Bold)

}

.type(ButtonType.Capsule)

.margin({

top: 20

})

.backgroundColor('#0D9FFB')

.width('40%')

.height('5%')

// Bind the onClick event to the Back button so that clicking the button redirects the user back to the first page.

.onClick(() => {

console.info(`Succeeded in clicking the 'Back' button.`)

try {

// Return to the first page.

router.back()

console.info('Succeeded in returning to the first page.')

} catch (err) {

let code = (err as BusinessError).code;

let message = (err as BusinessError).message;

console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)

}

})

}

.width('100%')

}

.height('100%')

}

}

Open the Index.ets file and click

in the Previewer to refresh the file. The figure below shows the effect.

Running the Application on a Real Device

1. Connect a real device running HarmonyOS to your computer. For details, see Running Your App/Service on a Local Real Device.

2. Choose File > Project Structure > Project > Signing Configs, select Support HarmonyOS and Automatically generate signature, click Sign In, and log in with your HUAWEI ID. Wait until the automatic signature is complete, and click OK. The figure shown below is displayed.

1. On the toolbar in the upper right corner of the editing window, click

1. to run the project. The figure below shows the effect.

Congratulations! You have finished developing your first ArkTS application based on the stage model.

Original material: Building the First ArkTS Application in Stage Model-Quick Start-Getting Started - HUAWEI Developers

With the release of HarmonyOS NEXT, developers are ushering in a new ecosystem of operating systems. HarmonyOS NEXT not only inherits the distributed capabilities of HarmonyOS, but also comprehensively upgrades its performance, security, and development experience. In particular, the launch of API 12 and above provides developers with more possibilities for innovative applications. In this article, we will take a closer look at how to design and implement innovative applications on the HarmonyOS NEXT platform to help developers better understand the features and application scenarios of the new version.

1. Core features of HarmonyOS NEXT

1.1 Enhancement of distributed capabilities

HarmonyOS NEXT has significantly improved its distributed capabilities, especially in terms of device collaboration, data sharing, and task flow. API 12 makes it easier for developers to achieve a seamless experience across devices. For example, users can seamlessly switch tasks between devices such as mobile phones, tablets, and smart watches, making data synchronization more efficient.

1.2 Performance optimization and resource management

HarmonyOS NEXT has done a lot of work on performance optimization, especially in resource management and scheduling. API 12 introduces a more intelligent resource scheduling mechanism, which can dynamically adjust resource allocation according to the status of the device and the needs of users, ensuring the smooth and stable operation of applications.

1.3 Security Improvements

Security has always been a key area of focus for HarmonyOS. In HarmonyOS NEXT, API 12 introduces stricter security mechanisms, including data encryption, rights management, and privacy protection. Developers can take advantage of these new features to build more secure and reliable applications.

2. Innovative application design ideas

2.1 Cross-device collaborative experience

On the HarmonyOS NEXT platform, cross-device collaboration is an important innovation direction. With API 12, developers can design apps that seamlessly switch between multiple devices. For example, users can start a task on their phone and continue on their tablet, and all data will be automatically synced. This design not only improves the user experience, but also enhances the stickiness of the app.

2.2 Intelligent Scene Perception

HarmonyOS NEXT provides powerful scene-aware capabilities, allowing developers to design apps that automatically adjust their functionality to the user's environment using the scene-aware interface in API 12. For example, when a user enters a meeting room, the app can automatically switch to silent mode and provide meeting-related features. This intelligent design can significantly improve the user experience.

2.3 Personalized Recommendations

Through the data analytics interface in API 12, developers can design applications that can make personalized recommendations based on user behavior and preferences. For example, a news app can recommend relevant articles based on a user's reading habits, and a shopping app can recommend products based on a user's purchase history. This personalized design increases user satisfaction and increases the activity of the app.

3. Practical case: smart home control application

3.1 Application Background

With the popularity of smart home devices, the demand for smart home control applications is increasing day by day. On the HarmonyOS NEXT platform, developers can leverage the distributed capabilities and scenario-aware APIs in API 12 to design smarter home control applications.

3.2 Functional Design

The app's key features include device control, scene mode, and personalized recommendations. With API 12, apps can collaborate across devices, allowing users to control smart devices in their homes from their phones, tablets, or smartwatches. In addition, the app can automatically adjust device settings based on the user's environment, such as automatically dimming the lights and playing soothing music when the user enters the bedroom.

3.3 Implementation Details

During implementation, developers can take advantage of the distributed data management interface in API 12 to ensure real-time synchronization of device status and user settings. At the same time, through the scene-aware interface, the application can automatically identify the user's environment and trigger the corresponding device control logic. In addition, developers can also use the data analysis interface to make personalized recommendations based on users' usage habits, such as recommending commonly used device settings or scene modes.

Fourth, summary and outlook

HarmonyOS NEXT provides a powerful platform for developers, especially in API 12 and above, with new features and interfaces that open up more possibilities for the design and implementation of innovative applications. Through design ideas such as cross-device collaboration, intelligent scene awareness, and personalized recommendations, developers can build more intelligent, convenient, and personalized applications, bringing new experiences to users.

In the future, as the HarmonyOS ecosystem continues to grow, we look forward to seeing more innovative applications emerge to promote the deep integration of smart devices and users' lives. Developers should continue to pay attention to the latest developments of HarmonyOS, make full use of the features and interfaces of the new version, and continue to explore and innovate to create more value for users.

References

1. HarmonyOS Developer Documentation, API 12+.

2. HarmonyOS NEXT Release Notes.

3. Distributed Capabilities in HarmonyOS NEXT.

4. Security Enhancements in HarmonyOS NEXT.

The above content is an analysis of HarmonyOS NEXT use cases, which aims to help developers better understand the features and application scenarios of the new version and design innovative applications. Hopefully, this article will provide you with a valuable reference for your development efforts.

Original source：https://juejin.cn/post/7473660325029625919

This codelab introduces how to develop a UIAbility in the stage model, implementing page redirection and data transfer within the UIAbility.

Example:

Concepts

• Page router: allows an application to access pages through URLs, especially like navigating to a specified page in an application, replacing the current page with another one in an application, and returning to the previous page or a specified page.

2 Environment Setup

You need to set up the HarmonyOS development environment.

Software Requirements

• DevEco Studio version: DevEco Studio NEXT Beta1 or later

• HarmonyOS SDK version: HarmonyOS NEXT Beta1 or later

Hardware Requirements

• Device type: Huawei phone

• HarmonyOS: HarmonyOS NEXT Developer Beta1 or later

Environment Setup

1. Install DevEco Studio. For details, see Downloading Software and Installing Software.

2. Configure the DevEco Studio development environment, which requires access to the Internet for proper functioning. For details, please refer to Configuring the Development Environment.

3. Complete app debugging by referring to the following:

   • Debugging Your App on a Real Device

   

3 Code Structure

This codelab introduces only the core code. For the complete code, download it from the attachment or Gitee source code.

No Preview

├──entry/src/main/ets // ArkTS code area

│ ├──common

│ │ ├──constants

│ │ │ └──CommonConstants.ets // Common constants

│ │ └──utils

│ │ └──Logger.ets // Logger

│ ├──entryability

│ │ └──EntryAbility.ets // Application entry

│ └──pages

│ ├──IndexPage.ets // Entry page

│ └──SecondPage.ets // Page to be redirected to

└──entry/src/main/resources // Directory of resource files

4 Page Creation

Start DevEco Studio and create a project. In the pages directory of the project, right-click Index.ets and choose Refactor > Rename from the shortcut menu to rename the file IndexPage.ets. Change the first parameter of the windowStage.loadContent method in the EntryAbility.ets file in the entryability directory of the project to pages/IndexPage. Then, the IndexPage is automatically loaded when the app is started.

Go to the entry > src > main > ets > pages directory of the project, right-click and choose New > Page, and create a page named SecondPage. DevEco Studio automatically adds pages/SecondPage to the entry > src > main > resources > base > profile > main_pages.json file in the project directory.

Note: All created pages must be configured in the main_pages.json file. Pages created in DevEco Studio are automatically configured. If you manually copy the page file to the entry > src > main > ets > pages directory, you need to manually configure the corresponding page in the main_pages.json file.

5 Page Redirection

To implement redirection from IndexPage to SecondPage and transfer data, do the following:

• Import the router module to the two pages.

• On IndexPage, add a click event to the Button component. Use the router.pushUrl() method to add the SecondPage path to the URL. params is a custom parameter.

• SecondPage uses the router.getParams() method to obtain the custom parameter passed from IndexPage.

IndexPage has a piece of text and a button. Tap the button to go to the next page and transfer data. The IndexPage.ets code is as follows:

The SecondPage has two pieces of text, one of which displays the data transferred from IndexPage. The code of SecondPage.ets is as follows:

On SecondPage, add the onClick() event for Button and call the router.back() method to return to the previous page.

7 Congratulations

Well done. You have successfully completed this codelab and learned how to:

1. Use the page router to implement page redirection.

Original source: Huawei Developers - UIAbility Page Redirection

Source code: BA489/UIAbility_Codelabs: Full code of UIAbility Page Redirection - Huawei Developer HarmonyOS NEXT Codelabs