基于ArkTS快速构建你的第一个鸿蒙应用（Stage模型）

本文默认你已经安装好了鸿蒙应用开发的所有环境

创建ArkTS工程

这里你需要注意的是，如果你是刚刚安装DevEco Studio，请点击按钮Create Project创建一个新功能。如果你已经打开了一个工程，你需要在菜单栏中以此选择File > New > Create Project来创建一个新的工程。

本文我以应用开发为例，故此选择Application应用开发，选择模板“Empty Ability”，点击Next进行下一步配置。

点击next按钮进入工程的配置界面，Compatible SDK选择`5.0.0(12)``，其他参数保持默认设置即可。

点击Finish按钮，DevEco Studio会自动为我们生成示例代码和相关资源，等待工程创建完成。

通过下图来了解一下工程目录的作用

构建第一个页面

针对本文中使用文本/按钮来实现页面跳转/返回的应用场景，页面均使用Row和Column组件来组建布局。对于更多复杂元素对齐的场景，可选择使用RelativeContainer组件进行布局。

该页面中我们Button组件添加一个按钮，用来响应用户点击，实现跳转到另一个页面。

“Index.ets”文件的示例如下：

import { router } from '@kit.ArkUI';

import { BusinessError } from '@kit.BasicServicesKit';

@Entry

@Component

struct Index {

@State message: string = '您好，HarmonyOS！';

build() {

RelativeContainer() {

Row(){

Column(){

Text(this.message)

.id('HelloWorld')

.fontSize(25)

.fontWeight(FontWeight.Bold)

.alignRules({

center: { anchor: '__container__', align: VerticalAlign.Center },

middle: { anchor: '__container__', align: HorizontalAlign.Center }

})

Button(){

Text("跳到下一页")

.fontSize(30)

.fontWeight(FontWeight.Bold)

}.type(ButtonType.Capsule)

.margin({

top: 20

}).backgroundColor('#0D9FFB')

.width('60%')

.height("5%").alignRules({

center: { anchor: '__container__', align: VerticalAlign.Center },

middle: { anchor: '__container__', align: HorizontalAlign.Center }

}).onClick(()=>{

console.log('成功点击到[跳到下一页]按钮');

router.pushUrl({url: 'pages/Second'}).then(()=>{

console.log("成功跳转到第二页")

}).catch((err: BusinessError)=>{

console.error('跳转失败，错误码：${err.code}，message is ${err.message}')

})

})

}.width('100%')

}.width('100%')

}

.height('100%')

.width('100%')

}

}

效果图如下：

构建第二个页面

import { router } from '@kit.ArkUI';

import { BusinessError } from '@kit.BasicServicesKit';

@Entry

@Component

struct Second {

@State message: string = '我是第二个页面';

build() {

RelativeContainer() {

Row() {

Column() {

Text(this.message)

.id('SecondHelloWorld')

.fontSize(25)

.fontWeight(FontWeight.Bold)

.alignRules({

center: { anchor: '__container__', align: VerticalAlign.Center },

middle: { anchor: '__container__', align: HorizontalAlign.Center }

})

Button(){

Text('返回')

.fontSize(30)

.fontWeight(FontWeight.Bold)

}.type(ButtonType.Capsule)

.margin({

top: 20

}).backgroundColor('#0D9FFB')

.width('40%')

.height('5%')

.onClick(()=>{

console.log('成功点击到[返回]按钮');

router.pushUrl({url: 'pages/Index'}).then(()=>{

console.log("成功跳转到第二页")

}).catch((err: BusinessError)=>{

console.error('跳转失败，错误码：${err.code}，message is ${err.message}')

})

})

}.width('100%')

}.width('100%')

}

.height('100%')

.width('100%')

}

}

效果图如下：

实现页面之间的跳转

上面我们已经创建了2个页面，通过按钮实现跳转。如何实现跳转功能呢？

我们可以给按钮绑定onclick事件，通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。相关的代码参见上面页面的源码。

效果见如下视频：