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

举报
红目香薰 发表于 2024/03/31 18:02:11 2024/03/31
【摘要】 ​ 摘要作者:红目香薰团队:坚果派 团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 目录摘要应用程序入口—UIAbility什么是UIAbility应用页面的交互方式1、在桌面进入2、应用呼叫拉起另外一个应用3、最近应用列表UIAbility内的页面创建示例1、本页面内容处理示例2、页面跳转与参数传递(需要使用路由)路由模块路由的返回上一层一面功...

 摘要

作者:红目香薰
团队:坚果派
团队介绍:坚果派由坚果创建,团队拥有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


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。