1. 前言
前面,我们已经学习了如何下载、安装 DevEco Studio,并 DevEco Studio 中创建了一个简单的示例项目,也成功运行。
但对于整体的了解还不够深入,比如 : 项目的目录结构,编辑器的使用,预览器的使用、如何使用模拟器和真机调试。在后续文章中,都会逐步了解。
那么接下来,我们先就项目工程继续深入探讨吧。
2. 创建 ArkTS 工程应用
1、当我们第一次安装 DevEco studio 的时候,进入DevEco Studio 时会有一个欢迎界面,在这里点击 Create Project
进行创建工程。
2、如果是在已有工程的窗口下,想要新建一个项目,可以通过菜单栏选择 File -> New -> Create Project
进行新工程的创建。
3、点击Create Project
之后,根据工程创建向导,左边视图
让你选择创建Application
或Atomic Service
。
说明 :
Application
: 表示创建一个普通应用程序。Atomic Service
: 表示创建元服务应用。注意 :
- 从 API 11版本开始支持Atomic Service元服务工程开发。
- Atomic Service元服务工程暂不支持Native开发。
右边视图
让你选择需要的Ability
工程模板,然后单击Next
。
工程模板支持的开发语言及模板说明如下表所示:
模板名称 | 说明 |
Empty Ability | 用于Phone、Tablet、2in1、Car设备的模板,展示基础的Hello World功能。 |
Native C++ | 用于Phone、Tablet、2in1、Car设备的模板,作为应用调用C++代码的示例工程,界面显示“Hello World”。 |
[CloudDev]Empty Ability | 端云一体化开发通用模板。更多信息请参见端云一体化开发。 |
[Lite]Empty Ability | 用于Lite Wearable设备的模板,展示了基础的Hello World功能。可基于此模板,修改设备类型及RuntimeOS,进行小型嵌入式设备开发。请参见创建Lite工程。 |
Flexible Layout Ability | 用于创建跨设备应用开发的三层工程结构模板。三层工程结构包含common(公共能力层)、features(基础特性层)、products(产品定制层)。 |
Embeddable Ability | 用于开发支持被其他应用嵌入式运行的元服务的工程模板。 |
一般选择第一个模板“Empty Ability
”。如需创建其它模板应用,请根据需求自行选择即可。
4、配置工程的相关参数,如工程名、包名、工程保存路径、sdk版本、模块名、支持的设备类型等。配置完成后,点击Finish
配置工程的基本信息说明如下 :
- Project name:工程的名称,可以自定义,由大小写字母、数字和下划线组成。
- Bundle name:标识应用的包名,用于标识应用的唯一性。
应用包名要求:
- 必须为以点号(.)分隔的字符串,且至少包含三段,每段中仅允许使用英文字母、数字、下划线(_),如“com.example.myapplication ”。
- 首段以英文字母开头,非首段以数字或英文字母开头,每一段以数字或者英文字母结尾,如“com.01example.myapplication”。
- 不允许多个点号(.)连续出现,如“com.example..myapplication ”。
- 长度为7~128个字符。
- Save location:工程文件本地存储路径,由大小写字母、数字和下划线等组成,不能包含中文字符。
- Compatible SDK:兼容的最低 API 版本。
- Module name: 模块的名称。
- Device type:该工程模板支持的设备类型。
5、关于 Compatible SDK 选择项,我这里是有几个版本可以选择的,目前我选择最新的“5.0.0(12)”即可,这个版本是HarmonyOS NEXT Developer Beta1版本的配套 SDK。享有鸿蒙纯血版提供的 API 能力。
最后,点击Finish
,工具会自动生成示例代码和相关资源,等待工程创建完成。
3. ArkTS工程目录结构(Stage模型)
3.1. stage 模型
鸿蒙系统上的应用程序框架定义了应用程序的模型
与结构
。
应用模型是鸿蒙系统为开发者提供的应用程序所需能力的抽象提炼
,它提供了应用程序必备的组件
和运行机制
。有了应用模型,开发者可以基于一套统一的模型进行应用开发,使应用开发更简单、高效。
随着鸿蒙系统的演进发展,先后提供了两种应用模型:
FA(Feature Ability)模型:
从API 7开始支持的模型,已经不再主推。Stage模型:
从API 9开始新增的模型,是目前主推且会长期演进的模型。在该模型中,由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”,因此称这种应用模型为Stage模型。
所以,目前鸿蒙系统上的应用模型称之为“Stage 模型
”。这里可以先简单了解,大致明白,后续随着更加深入的学习,会慢慢理解该知识点。
应用模型详细了解 :
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-models-V5
3.2. 目录结构
一个创建好的工程目录结构如下,下面对该结构做一个说明。
- AppScope > app.json5:应用的全局配置信息,详见app.json5配置文件。
- entry:HarmonyOS工程模块,编译构建生成一个HAP包。
-
- src > main > ets:用于存放ArkTS源码。
- src > main > ets > entryability:应用/服务的入口。
- src > main > ets > entrybackupability:应用提供扩展的备份恢复能力。
- src > main > ets > pages:应用/服务包含的页面。
- src > main > resources:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见资源分类与访问。
- src > main > module.json5:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见module.json5配置文件。
- build-profile.json5:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。
- hvigorfile.ts:模块级编译构建任务脚本。
- obfuscation-rules.txt:混淆规则文件。混淆开启后,在使用Release模式进行编译时,会对代码进行编译、混淆及压缩处理,保护代码资产。详见开启代码混淆。
- oh-package.json5:用来描述包名、版本、入口文件(类型声明文件)和依赖项等信息。
- oh_modules:用于存放三方库依赖信息。
- build-profile.json5:工程级配置信息,包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境,默认为HarmonyOS。
- hvigorfile.ts:工程级编译构建任务脚本。
- oh-package.json5:主要用来描述全局配置,如:依赖覆盖(overrides)、依赖关系重写(overrideDependencyMap)和参数化配置(parameterFile)等。
4. 构建页面
4.1. 使用文本组件
在“Project”窗口,点击“entry > src > main > ets > pages”,打开“Index.ets”文件,进行页面的编写。
针对页面布局,均使用Row和Column组件来组建布局。对于更多复杂元素对齐的场景,可选择使用RelativeContainer组件进行布局。(关于布局及样式后续学习)
“Index.ets”文件的示例如下:
// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
// 使用文本组件
Text(this.message)
.fontSize(50) //设置字体大小
.fontWeight(FontWeight.Bold) //设置字体加粗
}
.width('100%')
}
.height('100%')
}
}
运行 :
这里就暂时使用预览方式运行项目即可。在运行按钮旁边点击下拉框,选择Previewer,接着点击运行按钮。即可完成应用的运行。
选择 phone 设备进行预览。
运行的结果 :
4.2. 使用按钮组件
现在,在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。
“Index.ets”文件的示例如下:
// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
// 使用文本组件
Text(this.message)
.fontSize(50) //设置字体大小
.fontWeight(FontWeight.Bold) //设置字体加粗
// 添加按钮组件,以响应用户点击
Button(){
Text('跳转') //设置按钮名称
.fontSize(20) //设置按钮名称字体大小
.fontWeight(FontWeight.Bold) //设置按钮字体加粗
}
.type(ButtonType.Capsule) //设置按钮类型
.margin({top: 20 }) //设置按钮上外边距为20
.backgroundColor('#0D9FFB')//设置按钮背景颜色
.width('40%') //设置按钮宽度
.height('5%') //设置按钮高度
}
.width('100%')
}
.height('100%')
}
}
IDE 截图 :
运行 :
效果如下图所示:
4.3. 添加跳转页面
创建另一个页面,并且实现在第一个页面中点击跳转按钮
之后,实现跳转到另一个页面。
1、新建第二个页面文件。在“Project”窗口,打开“entry > src > main > ets”,右键点击
“pages”文件夹,选择“New > ArkTS File”,命名为“Second”,点击回车键。可以看到文件目录结构如下:
2、配置Second.ets页面路由。在“Project”窗口,打开“entry > src > main > resources > base > profile”,在main_pages.json
文件中的src
下配置第二个页面的路由“pages/Second”。示例如下:
说明 : 还有另外一种添加页面之后会自动配置路由的方法。
开发者也可以在右键点击“pages”文件夹时,选择“New > Page > Empty Page”,命名为“Third”,点击“Finish”完成页面的创建。
使用此种方式则无需再进行路由的手动配置。
输入文件名
点击 Finish 之后,自动在
main_pages.json
文件配置好对应的路由
3、在第Second页面添加Text组件、Button组件等,并设置其样式。“Second.ets”文件的示例如下:
// Second.ets
@Entry
@Component
struct Index {
@State message: string = '这是Second页面'
build() {
Row() {
Column() {
// 使用文本组件
Text(this.message)
.fontSize(50) //设置字体大小
.fontWeight(FontWeight.Bold) //设置字体加粗
// 添加按钮组件,以响应用户点击
Button(){
Text('回到Index页') //设置按钮名称
.fontSize(20) //设置按钮名称字体大小
.fontWeight(FontWeight.Bold) //设置按钮字体加粗
}
.type(ButtonType.Capsule) //设置按钮类型
.margin({top: 20 }) //设置按钮上外边距为20
.backgroundColor('#0D9FFB')//设置按钮背景颜色
.width('40%') //设置按钮宽度
.height('5%') //设置按钮高度
}
.width('100%')
}
.height('100%')
}
}
4.4. 实现页面之间的跳转
1、Index页面
面跳转到Second页面
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面,从而实现跳转。如果需要实现更好的转场动效,推荐使用Navigation。
实现步骤 :
- 导入router模块和异常模块
- 在Index页面中,跳转按钮需要绑定onClick事件,点击按钮时跳转到Second 页面。
“Index.ets”文件的示例如下 :
// Index.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
// 导入异常模块
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
// 使用文本组件
Text(this.message)
.fontSize(50) //设置字体大小
.fontWeight(FontWeight.Bold) //设置字体加粗
// 添加按钮组件,以响应用户点击
Button(){
Text('跳转') //设置按钮名称
.fontSize(20) //设置按钮名称字体大小
.fontWeight(FontWeight.Bold) //设置按钮字体加粗
}
.type(ButtonType.Capsule) //设置按钮类型
.margin({top: 20 }) //设置按钮上外边距为20
.backgroundColor('#0D9FFB')//设置按钮背景颜色
.width('40%') //设置按钮宽度
.height('5%') //设置按钮高度
// 跳转按钮绑定onClick事件,点击时跳转到第二页
.onClick(() => {
// 跳转到 Second 页面
router.pushUrl({ url: 'pages/Second' }).then(() => {
console.info('Succeeded in jumping to the second page.')
}).catch((err: BusinessError) => {
console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
})
})
}
.width('100%')
}
.height('100%')
}
}
运行之后,效果如下
2、Second页面
面跳转到Index页面
与前面步骤基本一致
实现步骤 :
- 导入router模块和异常模块
- 在Second页面中,跳转按钮需要绑定onClick事件,点击按钮时跳转到 Index页面。
“Second.ets”文件的示例如下 :
// Second.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
// 导入异常模块
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
@State message: string = '这是Second页面'
build() {
Row() {
Column() {
// 使用文本组件
Text(this.message)
.fontSize(50) //设置字体大小
.fontWeight(FontWeight.Bold) //设置字体加粗
// 添加按钮组件,以响应用户点击
Button(){
Text('回到Index页') //设置按钮名称
.fontSize(20) //设置按钮名称字体大小
.fontWeight(FontWeight.Bold) //设置按钮字体加粗
}
.type(ButtonType.Capsule) //设置按钮类型
.margin({top: 20 }) //设置按钮上外边距为20
.backgroundColor('#0D9FFB')//设置按钮背景颜色
.width('40%') //设置按钮宽度
.height('5%') //设置按钮高度
// 返回按钮绑定onClick事件,点击按钮时返回到Index页
.onClick(() => {
console.info(`Succeeded in clicking the 'Back' button.`)
try {
// 1、通过后退的方式,返回Index页。动画效果后退
router.back()
// 2、通过路由的方式,返回Index页。动画效果前进
// router.pushUrl({ url: 'pages/Index' });
} catch (err) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}
在示例代码中,可以发现,跳转到 Index 页的方式是有两种方式实现的。
1、通过后退的方式,返回Index页。动画效果后退。
router.back()
2、通过路由的方式,返回Index页。动画效果前进。
router.pushUrl({ url: 'pages/Index' });
运行之后,通过后退的方式,动画效果后退,效果如下
通过路由的方式,返回Index页。动画效果前进,效果如下
5. 总结
学完以上内容,恭喜您已经基于Stage模型构建完成第一个ArkTS应用,接下来,我们将探索更多的HarmonyOS功能。
好啦~ 这节课就先介绍到这里,谢谢各位观看!