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

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

搭建开发环境

  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版本进行适当调整。

相关推荐
码事漫谈3 小时前
大模型输出的“隐性结构塌缩”问题及对策
前端·后端
这儿有一堆花3 小时前
前端三件套真的落后了吗?揭开现代 Web 开发的底层逻辑
前端·javascript·css·html5
积水成渊,蛟龙生焉4 小时前
鸿蒙装饰器V2详解
华为·harmonyos·arkts·鸿蒙·ark
.Cnn4 小时前
JavaScript 前端基础笔记(网页交互核心)
前端·javascript·笔记·交互
zuowei28894 小时前
华为网络设备配置文件备份与恢复(上传、下载、导出,导入)
开发语言·华为·php
醉酒的李白、4 小时前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
anOnion4 小时前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
NotFound4865 小时前
实战分享Python爬虫,如何实现高效解析 Web of Science 文献数据并导出 CSV
前端·爬虫·python
沙雕不是雕又菜又爱玩5 小时前
ArkUI学习(2)
鸿蒙
徐小夕5 小时前
PDF无限制预览!Jit-Viewer V1.5.0开源文档预览神器正式发布
前端·vue.js·github