HarmonyOS-ArkTS-UIAbility——【坚果派-红目香薰】

​

 摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

目录

摘要

应用程序入口—UIAbility

什么是UIAbility

应用页面的交互方式

1、在桌面进入

2、应用呼叫拉起另外一个应用

3、最近应用列表

UIAbility内的页面创建

示例1、本页面内容处理

示例2、页面跳转与参数传递(需要使用路由)

路由模块

路由的返回上一层一面功能示例

应用程序入口—UIAbility

什么是UIAbility

UIAbility也就是与用户进行交互的一种说法，UI也就是外观样式，Ability也就是能力的意思，外观功能，或者说是页面功能。

应用页面的交互方式

1、在桌面进入

可以在桌面直接点击应用进入。

​

编辑

2、应用呼叫拉起另外一个应用

通过应用中的link连接或者其他功能呼叫拉起另外一个应用，或说成跳转到另外一个应用。

​

编辑

或例如图片分享打开其它应用。

​编辑​编辑

这个就像支付页面一样，当点击支付的时候直接环境支付宝或者微信登支付软件，就可以直接传递参数过去进行付费操作。 

3、最近应用列表

点击最近应用按钮就能看到我们刚才所打开的各类应用，点击即可打开。

​

编辑

​

编辑

UIAbility内的页面创建

初始的项目中会在【entry/src/main/ets/entryability/】会生成一个EntryAbility.ts文件，在对应的pages下面会有一个index.ets文件。

​

编辑

 这就是基于UIAbility实现的应用入口页面。

​编辑

我们可以在index中根据用户的需求来完成具体样式设计。

示例1、本页面内容处理

本页面中添加了个按钮，当点击按钮后修改了一下默认的message内容。

​编辑

测试代码

@Entry@Component

struct Index {

@State message: string = 'Index Page 测试'

build() {

Row() {

Column() { //行信息

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

//添加一个按钮，并且给与按钮点击事件

Button('Next').onClick(() => {

this.message="我更改了测试文字"

}).fontSize(50)

}

.width('100%')

}

.height('50%')

}

}

示例2、页面跳转与参数传递(需要使用路由)

我们先在pages钟在创建一个page用于跳转使用。

​编辑

随便给个名称，当然类名的首字母需要大写。

​编辑

在index页面中添加代码

import router from '@ohos.router';

let msg: string = "Index 页面过来的数据。";

@Entry@Component

struct Index {

@State message: string = 'Index Page 测试'

build() {

Row() {

Column() { //行信息

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

Blank()

//添加一个按钮，并且给与按钮点击事件

Button('Next').onClick(() => {

this.message = "我更改了测试文字"

}).fontSize(50).width('100%').height('120')

Blank()

//添加一个页面跳转的按钮

Button('跳转到MyETS页面').onClick(() => {

router.pushUrl({

url: "pages/MyETS",

params:{

msg_info:msg

}

})

}).fontSize(50).width('100%').height('120')

}

.width('100%').height('320')

}

.height('100%').backgroundColor('pink')

}

}

样式效果：

​编辑

承接数据代码

import router from '@ohos.router';

@Entry@Component

struct MyETS {

@State message: string = 'Hello World MyETS'

@State msg_info: string = router.getParams()?.['msg_info']

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

Text(this.msg_info).fontColor(Color.Red).fontSize(50)

}

.width('100%')

}

.height('100%')

}

}

实现效果：

跳转过来后可以看到传递过来的数据。

​

编辑

路由模块

import router from '@ohos.router';

这句话代码这个类引用了路由，我们可以根据router来调用对应的路径已经传递的参数内容。

路由的返回上一层一面功能示例

我们来修改一个刚才的MyETS页面，页面代码如下：

import router from '@ohos.router';

@Entry@Component

struct MyETS {

@State message: string = 'Hello World MyETS'

@State msg_info: string = router.getParams()?.['msg_info']

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

Text(this.msg_info).fontColor(Color.Red).fontSize(50)

Button('返回到Index页面').onClick((event: ClickEvent) => {

router.back()

}).fontSize(25).width('100%').height(150)

}

.width('100%')

}

.height('100%')

}

}

页面效果与返回效果：

​编辑​编辑

这样我们就学会了两个页面的基础交互了，并且是带参数的。

VIP下载地址：(示例内容为页面跳转与传递参数以及返回上一层页面操作的代码。)https://download.csdn.net/download/feng8403000/88778423?spm=1001.2014.3001.5503

VIP下载地址：(示例内容为两个页面相互跳转并相互传递参数的示例。)

 https://download.csdn.net/download/feng8403000/88778427?spm=1001.2014.3001.5503

​