鸿蒙应用开发项目新建过程与hap包生成方法

简介: 今天主要和大家聊一聊,如何利用DevEco Studio创建工程项目,应用层的开发需要知道其中的配置方法。

第一:创建项目

1、打开DevEco Studio选择【Lite】Empty Ability项目

fda8b467152e32740b6a5ebf8d0c74bc.png2.点击next,输入项目名称(Project name),项目类型(Project type)选择Application,输入包名(Bundle name),项目存放路径(Save location),开发语言(Language)默认是JS,api支持版本(Compatible API version)这里选择SDK:API Version 6,设备类型(Device type)勾选Smart Vision。


cd10f9b876df44fe33c9c23a44f32eeb.png

注意:包名格式一般为com.公司名称.项目名称

3.点击finish,等待工具自动创建完整的项目工程,这样一个基础的应用就创建完成了。

第二:代码实现与分析

项目结构示意图

d6ab869d13cb73b7a5f43d75dd204ae7.png

entry->src->main 目录为我们项目的主目录

main->js 为项目代码目录

main->resources 为项目资源目录

注:这里有一点需要注意以下,DevEco Studio在创建项目的时候其实默认还是会选择当前最新的API版本进行创建,如果是使用最新的API版本,你的硬件也需要使用最新的OpenHarmony版本才可以运行程序,如果无法使用最新版本的OpenHarmony,这里请手动更改api版本,方法如下。

找到工程里的两个build.gradle文件,找到其中的compileSdkVersion,将后面对应的数字都改成6即可。


1.找到index.hml文件,该文件是程序主页面文件,双击它打开编辑视图,开发工具最右侧有一个Previewer按钮,点击可打开预览。

9e4fc5984ade87f3feb44978ca0da0f0.png

这就是我们的最简单的一个hello world项目工程了。


2、接下来编写一个退出应用的代码,添加如下界面代码

<div class="container">
    <text class="title">
        Hello {{ title }}
    </text>
    <text class="content" onclick="exit">
        Exit
    </text>
</div>

找到index.css文件,该文件是程序主页面对应的css样式文件,直接双击打开添加如下代码

.container {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title {
    width: 200px;
    font-size: 30px;
    text-align: center;
}
.content{
    margin-top: 20px;
    width: 200px;
    font-size: 30px;
    text-align: center;
}

找到index.js文件,该文件是程序主页面对应的JavaScript文件,主要写一些对应的事件代码和逻辑函数。双击打开添加如下代码。

注:注意逗号

import app from '@system.app';
export default {
    data: {
        title: 'World'
    },
    exit(e){
        app.terminate()
    }
}

完成编辑后的预览效果

4fcdc1331d388ef8a6945d7a672bba9a.png

这样我们的一个hello world程序就编写完成了。

第三:将代码编译成hap包

1.点击编辑器最左下角的OhosBuild Varilants,打开编译模式选择视图,编译模式分debug和release,这里我们选择release模式。

3c3059ef5723a876c4203ec53e414136.png

2.点击编辑器上方菜单栏的Build->Build Hap(s)/App(s)->Build Hap(s),系统就会开始自动编译代码成hap包,等到下方Build Output无编译错误,就表示代码编译完成了。

 eb496959a0fedd2593ca30287e8a3d55.png

3.完成之后找到项目存放目录进入build->outputs->hap->release->smartVision目录下,这里面就是我们编译好的hap包文件。

 2f7d6e6b6be0fc26ce0e75853c66595c.png

目录
相关文章
|
1月前
鸿蒙应用开发从入门到实战(十六):线性布局案例
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文通过简单案例演示如何使用Column和Row组件实现线性布局。
|
1月前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
210 12
|
1月前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供滑块Slider与进度条Progress组件,用于鸿蒙原生APP开发。Slider支持拖动调节音量、亮度等,可设步长、方向及提示气泡;Progress支持线性、环形等多种样式,可自定义颜色、宽度与刻度,实时显示任务进度。
180 2
|
1月前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解滑块Slider和进度条Progress组件的使用。
118 1
|
1月前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
219 2
|
1月前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
226 3
|
1月前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战(十):ArkUI图片组件Image
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Image图片组件的使用。
182 1
|
1月前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
ArkTS拓展了TypeScript,可以结合ArkUI进行渲染控制,是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
117 5
|
1月前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
124 7
|
1月前
|
API
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!​本文从界面制作从组件声明开始,通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。

热门文章

最新文章