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

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

搭建开发环境

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

相关推荐
喵叔哟几秒前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特41 分钟前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解42 分钟前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django