DEV Community: Claire_shuo

DevEco Studio in Practice: The Intelligent Engine Developed by HarmonyOS

Claire_shuo — Fri, 27 Jun 2025 01:59:37 +0000

As a HarmonyOS developer, DevEco Studio is the core productivity tool for daily development. Through multiple project practices, these key experiences for improving development efficiency have been summarized:

Three core advantage experiences

Core code example (Real-time preview + Hot reload) :

// Use the @Preview annotation to achieve real-time preview of multiple devices
@Preview({
DeviceType: [devicetype.phone, devicetype.watch, devicetype.tv], // Three-terminal synchronization
width: '100%',
height: '100%'
})
@Component
struct WeatherCard {
@State temp: number = 26
@State city: string = "Beijing"

build() {
Column() {
// Temperature display (Real-time modified values can be previewed immediately)
Text(${this.temp}℃).fontSize(24).fontColor(this.temp > 30 ? Color.Red : Color.Blue)

// City selector
Select([
{value: "Beijing"},
{value: "Shanghai"},
{value: "Guangzhou"}
])
.selected(0)
.onSelect((index) => {
this.city = [" Beijing "," Shanghai "," Guangzhou "][index]
this.fetchWeather() // retains the status of hot reload
})
.margin(10)

// Dynamic weather icon
Image(this.getWeatherIcon())
.width(50)
.height(50)
}
.padding(20)
.borderRadius(12)
.backgroundColor(Color.White)
}

When modifying this method, hot reload takes effect immediately

private getWeatherIcon(): Resource {
return this.temp > 30 ? $r("app.media.sun") :
this.temp < 10 ? $r("app.media.snow") : $r("app.media.cloud")
}

// Simulation data acquisition
private fetchWeather() {
When modifying API parameters, hot reload does not reset the state
mockRequest(/weather? city=${this.city}).then(data => {
this.temp = data.temp
})
}
}
Efficient development skills:

Terminal input viewing rendering takes a long time

hdc shell hilog -s 0xD001411 -a Performance
Measured data: After using DevEco Studio, the UI development efficiency has increased by more than 50%, and the debugging time has decreased by 70%. Its intelligent prompt and real-time preview capabilities have completely transformed the HarmonyOS development experience, allowing developers to focus on creating value rather than configuring the environment.

DevEco Studio is not only a development tool, but also the intelligent hub of the HarmonyOS ecosystem. Proficient in its visual debugging and performance optimization capabilities, achieving twice the result with half the effort in the development of full-scenario applications, and efficiently building future-oriented HarmonyOS applications.

HarmonyOS Router Parameter Passing in Practice: The Art of Cross-Page Data Transmission

Claire_shuo — Fri, 27 Jun 2025 01:57:44 +0000

In the development of HarmonyOS applications, route parameter passing is a core technology for communication between pages. A well-designed parameter passing mechanism for routes is crucial for complex applications. During the learning process of HarmonyOS, there are multiple routing methods available. Here are some experiences shared regarding route parameter passing:

I. Router

Core Skills:

Core code example (user detail page jump):

// User List Page (Passing Parameters) import router from '@ohos.router';

@Entry
@Component
struct UserListPage {
const privateUser = { id: 1001, name: '张三', vip: true

build() {
List() {
ListItem() {
Text(this.user.name)
.onClick(() => {
// Jump and pass complex objects router.pushUrl({
url: 'pages/UserDetailPage',
params: {
userData: JSON.stringify(this.user), // Serialize the object source: 'homePage'
}
})
})
}
}
}
}

// User Details Page (Receiving Parameters) @Component
export struct UserDetailPage {
@State userId: number = 0;
@State userName: string = '';
@State isVip: boolean = false;

onPageShow() {
const params = router.getParams(); // Get route parameters try {
if (params) {
const user = JSON.parse(params['userData'] as string); // Deserialization this.userId = user.id;
this.userName = user.name;
this.isVip = user.vip;
console.log(Source page: ${params.source}); }
} catch (error) {
console.error('Parameter parsing error', error); }
}

build() {
Column() {
Text(ID: ${this.userId}).fontSize(18)
Text(Name: ${this.userName}).fontColor(this.isVip ? 'red' : 'black') Color.Red : Color.Black)
// ... }
}
}
Guide to Avoiding Pitfalls:

router.back({
url: 'pages/UserListPage',
params: { updated: true }
})
II. HMRouter

HMRouter is a scene solution for page navigation on HarmonyOS, mainly addressing the issue of mutual navigation between native pages within an application. This article mainly takes various scenarios in actual development as examples to introduce the usage of the HMRouter routing framework. The HMRouter routing framework provides the following functional features:

HMRouter provides page navigation and back functionality based on custom annotations. The usage steps are as follows:

Page redirection

Configure page routes
@HMRouter({ pageUrl: 'profile/Address' })
@Entry
@Component
export struct Address {
...
}
Page Jumping
onClick(()=>{
...
HMRouterMgr.push({pageUrl:'profile/Address',animator:true})
})
Page parameter passing
Passing parameters

.onClick(() => {
HMRouterMgr.push({pageUrl:'goods/Detail',param:item})

// -----
})
Receive parameters

@HMRouter({pageUrl:'goods/Detail'})
@ComponentV2
export struct GoodsDetail {
@local item:HMPageParam=HMRouterMgr.getCurrentParam(HMParamType.all) as HMPageParam
@provider() goods:GoodsItemType=this.item.data as GoodsItemType
...
}
Suggested application scenarios:

Simple application: Directly use HMRouter's annotations + interceptors to quickly achieve decoupled navigation.

Large-scale projects: By adopting TheRouter, the modular collaboration issues are resolved through dynamic routing tables and service injection (ServiceProvider) 84.

By making reasonable use of HMRouter, over 30% of the routing glue code can be reduced, making it particularly suitable for cross-team collaboration in HarmonyOS application projects.

HarmonyOS Pull-down Menu Project Practice: Flexible Application of the Select Component

Claire_shuo — Fri, 27 Jun 2025 01:54:06 +0000

In the development of HarmonyOS applications, the Select dropdown menu is a frequently used interactive control. It can efficiently display multiple options within a limited space, providing a dropdown selection menu that enables users to choose among multiple options.

Core implementation techniques:

Core code example:

// xxx.ets
@Entry
@Component
struct SelectExample {
@State text: string = "TTTTT";
@State index: number = 2;
@State space: number = 8;
@State arrowPosition: ArrowPosition = ArrowPosition.END;

build() {
Column() {
Select([{ value: 'aaa', icon: $r("app.media.selection") },
{ value: 'bbb', icon: $r("app.media.selection") },
{ value: 'ccc', icon: $r("app.media.selection") },
{ value: 'ddd', icon: $r("app.media.selection") }])
.selected(this.index)
.value(this.text)
.font({ size: 16, weight: 500 })
.fontColor('#182431')
.selectedOptionFont({ size: 16, weight: 400 })
.optionFont({ size: 16, weight: 400 })
.space(this.space)
.arrowPosition(this.arrowPosition)
.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
.optionWidth(200)
.optionHeight(300)
.onSelect((index: number, text? : string | undefined) => {
console.info('Select:' + index);
this.index = index;
if (text) {
this.text = text;
}
})
.avoidance(AvoidanceMode.COVER_TARGET);
}.width('100%')
}
}
Guide to Avoiding Pitfalls:

It is worth noting that when using the select dropdown menu, the select passes an array of objects. When the number of required items in the dropdown menu increases, you can directly import the array of objects and render the page data through the map method.

Core code example: (Product Filter)

// Define option types interface Option {
name: string,
icon: Resource
}

@Entry
@Component
struct ProductPage {
@State selectedIndex: number = 0
@State options: Option[] = [
{
name: 'Latest Products',
icon: $r('app.media.new')
},
{
name: 'Price: Low to High',
icon: $r('app.media.price_up')
},
{
name: 'Best Sellers',
icon: $r('app.media.hot')
} ]

build() {
Column() {
// Implementation of the Select component Select(this.options.map(opt => ({
value: opt.name,
icon: opt.icon // Icon and text combination })))
.selected(this.selectedIndex)
.onSelect((index: number) => {
this.selectedIndex = index
this.filterProducts() // Trigger the filtering logic })
.selectedOptionFont({ size: 18, weight: FontWeight.Bold })
.optionFont({ size: 16 })
.width('60%')

// Product list display... }
}

// Filtering logic filterProducts() {
switch(this.selectedIndex) {
case 0: // Logic for latest products
case 1: // Logic for price sorting
case 2: // Logic for sales volume sorting }
}
}
The Select component perfectly aligns with the declarative UI paradigm of HarmonyOS, achieving automatic UI updates through data binding. Coupled with icon integration and style customization capabilities, developers can quickly build both aesthetically pleasing and powerful filtering controls. In scenarios such as e-commerce and settings pages, the judicious use of Select can significantly enhance user operation efficiency, making it an essential skill for HarmonyOS application development.

HarmonyOS Application Development in Practice: HarmonyOS SDK AI Empowering Image Classification

Claire_shuo — Fri, 27 Jun 2025 01:50:39 +0000

In the development of HarmonyOS applications, the powerful edge-side AI capabilities of the HarmonyOS SDK have opened the door to intelligent applications for developers. Its core advantages lie in the efficient model reasoning, privacy and security (local data processing), and smooth integration. The following takes the most typical image classification task as an example to share practical experience and core code integration.
Core process and code implementation:
The entire process revolves around the capabilities under the @ohos.ai namespace. First, declare the necessary ohos.permission.READ_MEDIA permission in module.json5. The core code focuses on model loading, input preparation, inference execution and result parsing:

import { image } from '@kit.ImageKit';
import { modelManager, tensor, Model, ModelDescription, common } from '@kit.AiKit';

// 1. Initialize & load the model
let model: Model | null = null;
const modelDesc: ModelDescription = {
modelPath: 'pages/model/mobilenetv3_small_hiai.pt', // HAP built-in model path
deviceType: common.DeviceType.AUTO, // Automatically select the best device (CPU/GPU/NPU)
inferenceMode: common.InferenceMode.HIGH_SPEED,
};
modelManager.loadModel(modelDesc)
.then((loadedModel: Model) => {
model = loadedModel;
console.info('Model loaded successfully.');
})
.catch((err: Error) => {
console.error(Model load failed: ${err.message});
});

// 2. Prepare to input the Tensor (assuming the PixelMap object 'pixelMap' has been obtained)

const inputTensor: tensor.Tensor = tensor.createTensorFromPixelMap(pixelMap,
{ dataType: tensor.DataType.UINT8, shape: [1, 3, 224, 224] }); // NHWC -> NCHW conversion

// 3. Perform model reasoning
if (model) {
model.run([inputTensor])
.then((outputTensors: tensor.Tensor[]) => {
// 4. Parse the output (assuming the output is a Float32 probability array of [1, 1000])
const outputData = new Float32Array(outputTensors[0].data);
const topK = findTopKIndices(outputData, 3); // A custom function is used to obtain the Top K index
console.info(Top Predictions: ${topK.map(idx => CLASS_LABELS[idx]).join(', ')});
})
.catch((runErr: Error) => {
console.error(Inference failed: ${runErr.message});
});
}
Key experience:

Model deployment: Prioritize the direct packaging of lightweight models (such as.pt,.onnx) into HAP, eliminating the reliance on dynamic downloads.
Input preprocessing: createTensorFromPixelMap automatically handles image scaling and format conversion, significantly simplifying the process. Be sure to match the shape required by the model (such as [1, 3, 224, 224]).
Device selection: DeviceType.AUTO enables the system to intelligently schedule NPU/GPU resources, significantly enhancing inference speed.
Result parsing: The shape and dataType of the output Tensor must strictly correspond to the model definition. Float32Array parsing is suitable for the output of classification confidence.
Beyond basic image classification, there is still much room for in-depth optimization and scene expansion in HarmonyOS AI development.
Model optimization techniques
Quantization and compression: Use the Huawei MindSpore Lite toolchain to convert the FP32 model into INT8 format, reducing the volume by 75% and doubling the inference speed.
// Load the quantitative model
const quantModelDesc: ModelDescription = {
modelPath: 'pages/model/mobilenetv3_quant.ms',
deviceType: common.DeviceType.NPU, // specifies NPU acceleration
ComputeUnit: common.Com puteUnit FLOAT16 / / mixed computing precision
};
Multi-model cascading: Connecting object detection and classification models to achieve complex scene understanding.
// Perform object detection first
const detectOutput = await detectionModel.run([inputTensor]);
const cropTensor = processDetection(detectOutput); // Extract the ROI area

// Then perform fine-grained classification
const classifyOutput = await classificationModel.run([cropTensor]);
Scene expansion practice
Dynamic image enhancement: Combining AI and graphics capabilities to

import { effectKit } from '@kit.ArkGraphics2D';

// Low-light enhancement model reasoning
const enhancedTensor = await lowlightModel.run([inputTensor]);

// Go back to PixelMap and render
const enhancedPixelMap = tensor.createPixelMapFromTensor(enhancedTensor);
effectKit.createImageEffect(enhancedPixelMap)
.addEffect('FILTER_SHARPEN')
.render(canvas);
Performance monitoring scheme

// Obtain the inference performance data
const perfInfo = model.getModelInferencePerformance();
console.log(' Inference time consumption: ${perfInfo.inferenceTime}ms | Peak memory: ${perfInfo.memoryPeak}MB ');

// Temperature protection strategy
deviceManager.on('thermal', (level) => {
if (level > 2) model.setInferenceMode(common.InferenceMode.LOW_POWER);
});
New Trends in Ecology
1.ArkTS 3.0: A new AI visual debugger has been added to view feature maps in real time
2.DevEco 5.0: The model quantization and compression tool is built-in and supports direct conversion to ONNX

Pre-set model library: Huawei ModelHub has provided over 100 HarmonyOS optimized models (OCR/ voice /NLP).
Summary of Best Practices
Device-aware adaptation: NPU availability is detected through common.DeviceCapability, and model accuracy is dynamically switched
Memory lifecycle: Timely call model.release() and tensor.release() to prevent memory leaks
Privacy compliance: Sensitive data is physically erased using tensor.secureDestroy()
Model hot Update: Combine @ohos.fileio to achieve dynamic update of the safe zone model
With the advancement of HarmonyOS NEXT, the edge-cloud collaborative AI framework (edge-side preprocessing + cloud-side large model) will become a new trend. It is suggested that developers pay attention to the distributedAI interface @ohos.distributedAI and lay out the multi-device collaborative inference scenario in advance.