「前端+鸿蒙」鸿蒙应用开发-搭建开发环境&创建项目

快速体验鸿蒙应用开发,首先需要搭建开发环境和创建项目。

搭建开发环境

  1. 下载DevEco Studio:

  2. 安装DevEco Studio:

    • 运行下载的安装程序,按照安装向导指引完成安装。
  3. 配置IDE:

    • 启动DevEco Studio后,按照初始化向导配置环境,包括设置Node.js和Ohpm的安装路径,以及HarmonyOS SDK的安装目录。
  4. 安装HarmonyOS SDK:

    • 在DevEco Studio中选择需要的HarmonyOS SDK版本进行安装。

创建项目

  1. 启动DevEco Studio:

    • 打开DevEco Studio,同意用户协议。
  2. 创建新项目:

    • 在欢迎界面上,点击"Create Project"按钮。
  3. 选择项目模板:

    • 选择一个项目模板,例如"Empty Ability"作为基础应用模板。
  4. 配置项目:

    • 输入项目名称(例如:MyHelloApp),设置包名(通常是反向域名,例如:com.example.myhelloapp),选择保存位置。
  5. 完成项目创建:

    • 检查配置信息无误后,点击"Finish"完成项目创建。

示例代码

以下是创建一个显示"Hello World"的简单鸿蒙应用的示例代码:

MainAbility.java - 应用的入口类:

java 复制代码
package com.example.myhelloapp;

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Entity;
import ohos.aafwk.content.Operation;
import ohos.aafwk.content.DataAbilityHelper;
import ohos.aafwk.content.Want;

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

MainAbilitySlice.java - 应用的主界面:

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.components.dependency.LayoutDescriptor;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        
        // 使用LayoutDescriptor简化布局设置
        LayoutDescriptor layoutDescriptor = new LayoutDescriptor(LayoutDescriptor.DIRECT);
        layoutDescriptor.setMatchParent(true, true);
        
        // 创建文本组件并设置布局
        Text helloText = new Text(getContext());
        helloText.setLayoutDescriptor(layoutDescriptor);
        helloText.setText("Hello World");
        
        // 将文本组件添加到AbilitySlice
        super.setUIContent(helloText);
    }
}

config.json - 应用配置文件:

json 复制代码
{
    "deviceType": "phone",
    "appname": "MyHelloApp",
    "version": {
        "code": 1000,
        "name": "1.0.0"
    },
    "apiVersion": {
        "code": 3
    },
    "distribution": {
        "moduleType": "entry",
        "installType": "auto"
    },
    "sdk": {
        "apiLevel": 3
    }
}

完成以上步骤后,您就可以在DevEco Studio中运行您的项目,查看模拟器或真机上的应用效果。示例代码和配置文件可能需要根据使用的HarmonyOS SDK版本和DevEco Studio版本进行适当调整。

相关推荐
biaov6 分钟前
Jenkins + Docker 搭建前端 CI:前端一键打包部署
前端·docker·jenkins
rich_Chan.8 分钟前
阿里云百炼联网搜索教程:web_search 工具开启方法、web_extractor 网页抓取与 json 检索轨迹
前端·阿里云·json
2501_944521598 分钟前
开源鸿蒙平台 KMP 三方库「BottomSheetNavigator3KMP」适配全流程
华为·开源·harmonyos
瓦瓦gogo18 分钟前
实习中接触前端开发后,我开始了解 React
前端·react.js·前端框架
梦曦i18 分钟前
uni-app x 新组件库v0.1.0发布,多端统一开发
前端·ui·uni-app x
2501_9445215920 分钟前
开源鸿蒙平台 CMP 三方库「scroll-effects」适配全流程
华为·开源·harmonyos
Dovis(誓平步青云)21 分钟前
切换语言后按钮被截断,本地化审计怎样发现长度风险
开发语言·前端·javascript·人工智能·机器学习·华为·harmonyos
kiros_wang22 分钟前
折叠屏状态监听:横竖屏、折叠态差异化布局开发
华为·harmonyos
CappuccinoRose28 分钟前
拖拽交互体系
前端·javascript·css·html·交互·1024程序员节
开开心心就好30 分钟前
免安装PDF盖章工具,透明度和位置可调
运维·服务器·前端·javascript·pdf·ocr·1024程序员节