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
- 点赞
- 收藏
- 关注作者
评论(0)