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

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

搭建开发环境

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

相关推荐
北海-cherish16 分钟前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909061 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist2 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang3 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_3 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含3 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端3 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友3 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端