「前端+鸿蒙」鸿蒙应用开发预览&模拟器运行

在鸿蒙应用开发中，预览和模拟器运行是开发流程中的重要环节，它们允许开发者在不使用实体设备的情况下测试应用的界面和功能。以下是如何使用华为DevEco Studio进行预览和在模拟器上运行鸿蒙应用的详细步骤，以及相应的示例代码。

快速体验-预览&模拟器运行

1. 打开DevEco Studio：

   • 启动DevEco Studio并打开您的鸿蒙应用项目。

2. 编写UI代码：

   • 使用ArkUI或其他UI框架编写应用界面的代码。

3. 配置模拟器：

   • 如果尚未配置模拟器，可以在DevEco Studio的“Tools”菜单中选择“Device Manager”来创建和管理模拟器。

4. 运行应用：

   • 点击IDE工具栏上的运行按钮（绿色三角形图标），选择模拟器作为运行目标。

5. 预览应用：

   • 应用将在模拟器中启动，您可以在IDE的预览窗口中查看应用的UI布局和交互效果。

6. 调试和测试：

   • 利用DevEco Studio提供的调试工具对应用进行调试和功能测试。

示例代码

以下是创建一个简单“Hello World”应用的示例代码，该应用在模拟器上显示一个文本标签。

MainAbilitySlice.java – 主界面切片：

package com.example.myhelloapp;

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.Text;
import ohos.agp.components.Component;
import ohos.agp.components.AttrSet;
import ohos.agp.components.ComponentContainer;
import ohos.agp.layout.ComponentLayout;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        
        // 创建文本组件
        Text helloText = new Text(getContext());
        helloText.setText("Hello World");
        
        // 设置文本组件的布局参数
        ComponentLayout layout = new ComponentLayout(getContext());
        layout.setAlignment(ComponentLayout.Alignment.CENTER);
        layout.setDirection(ComponentLayout.Direction.VERTICAL);
        layout.setOffsetX(0);
        layout.setOffsetY(0);
        
        // 将文本组件添加到布局中
        helloText.setLayout(layout);
        
        // 将布局设置为AbilitySlice的UI内容
        super.setUIContent(helloText);
    }
}

MainAbility.java – 应用入口：

package com.example.myhelloapp;

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.aafwk.ability.AbilitySlice;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 设置主AbilitySlice
        super.setMainRoute(MainAbilitySlice.class);
    }
}

config.json – 应用配置文件（通常位于项目的根目录）：

{
    "appname": "MyHelloApp",
    "version": {
        "code": 1000,
        "name": "1.0.0"
    },
    "sdk": {
        "apiLevel": 3
    },
    "deviceType": [
        "phone"
    ]
}

运行和预览

1. 保存代码：编写完代码后，保存所有更改。

2. 选择模拟器：在DevEco Studio顶部的工具栏中，选择您想要运行的模拟器设备。

3. 运行应用：点击工具栏上的运行按钮或使用快捷键（通常是F2或Ctrl+R）启动应用。

4. 查看预览：应用将启动在模拟器中，您可以在IDE的预览窗口中查看应用的UI。

5. 调试：如果遇到问题，使用DevEco Studio的调试工具进行问题排查和代码调试。

通过以上步骤，您可以快速体验在模拟器上预览和运行鸿蒙应用。这为开发过程中的界面设计和功能测试提供了便利。