本文介绍入门ArkUI的概述和实操使用ArkUI实现页面的跳转
HarmonyOS提供了一套UI开发框架,即方舟开发框架(ArkUI框架)。方舟开发框架可为开发者提供应用UI开发所必需的能力,比如多种组件、布局计算、动画能力、UI交互、绘制等。
方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于ArkTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。以下是两种开发范式的简单对比。
开发范式名称 | 语言生态 | UI更新方式 | 适用场景 | 适用人群 |
---|---|---|---|---|
声明式开发范式 | ArkTS语言 | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。
官方更加的推荐声明式的开发范式来构建我们的 UI
主要基于以下几点考虑:
应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼,它提供了应用程序必备的组件和运行机制。有了应用模型,开发者可以基于一套统一的模型进行应用开发,使应用开发更简单、高效
HarmonyOS先后提供了两种应用模型:
感兴趣的可以看看具体概述
上篇文章当中我们就简单的玩了下 HelloWord 也是 Stage 模型(默认)
这些包什么的上篇文章已经简介过
resources
|---base
| |---element
| | |---string.json
| |---media
| | |---icon.png
| |---profile
| | |---test_profile.json
|---en_US // 默认存在的目录,设备语言环境是美式英文时,优先匹配此目录下资源
| |---element
| | |---string.json
| |---media
| | |---icon.png
| |---profile
| | |---test_profile.json
|---zh_CN // 默认存在的目录,设备语言环境是简体中文时,优先匹配此目录下资源
| |---element
| | |---string.json
| |---media
| | |---icon.png
| |---profile
| | |---test_profile.json
|---en_GB-vertical-car-mdpi // 自定义限定词目录示例,由开发者创建
| |---element
| | |---string.json
| |---media
| | |---icon.png
| |---profile
| | |---test_profile.json
|---rawfile // 其他类型文件,原始文件形式保存,不会被集成到resources.index文件中。文件名可自定义。
点击侧边栏的 Previewer 即可看到入口文件构建出来的页面样式
给我们的 HelloWorld 添加一个事件,这和 JavaScript 一模一样没啥区别
我们查看一下 Index.ets 的代码
给 Index.ets 添加一个按钮 来修改 message
变量当中的参数
@Entry
@Component
struct Index {
@State message: string = '腾讯云'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.message = "hello 杨不易呀"
})
// 添加一个按钮
Button() {
Text('点我')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
// 按钮点击事件
.onClick(() => {
this.message = "yby6.com"
})
.margin({
top: 20
})
.backgroundColor('#ff31b1ff')
.width('40%')
.height('5%')
}
// 居中
.width('100%')
}
.height("100%")
}
}
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器,测试按钮的点击效果
新建第二个页面文件。在“Project”窗口,打开“entry > src > main > ets ”,右键点击“pages”文件夹,选择“New > ArkTS File”,命名为“Face”,点击“Finish”
和 Vue 一样我们新增一个页面需要配置路由,要不然访问不了
配置第二个页面的路由。在“Project”窗口,打开“entry > src > main > resources > base > profile”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Face”
Face.ets 页面代码 和 Index.ets 一样自己整一个
import router from '@ohos.router'
@Entry
@Component
struct Face {
@State message: string = '人脸识别服务'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(30)
.onClick(() => {
this.message = "hello 我是杨不易呀"
})
Button() {
Text('点我跳转Index')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
// 跳转按钮绑定onClick事件,点击时跳转到第二页
.onClick(() => {
console.info(`开始跳转`)
})
.margin({
top: 20
})
.backgroundColor('#ff31b1ff')
.padding(15)
}
.width('100%')
}
.height('100%')
}
}
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
本模块提供通过不同的url访问不同的页面,包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等
⚠️ 页面路由需要在页面渲染完成之后才能调用,在onInit和onReady生命周期中页面还处于渲染阶段,禁止调用页面路由方法。
import router from'@ohos.router'
跳转语法
router.pushUrl({ url: '对应的URL' }).then(() => {
// 跳转成功的回调
}).catch((err) => {
// 失败
})
// 跳转按钮绑定onClick事件,点击时跳转到第二页
.onClick(() => {
console.info(`开始跳转`)
// 跳转到第二页
router.pushUrl({ url: 'pages/Face' }).then(() => {
console.info('跳转成功')
}).catch((err) => {
console.error(`错误码: ${err.code}, 消息: ${err.message}`)
})
})
// 跳转按钮绑定onClick事件,点击时跳转到第一页
.onClick(() => {
console.info(`开始跳转`)
// 跳转到第二页
router.pushUrl({ url: 'pages/Index' }).then(() => {
console.info('跳转成功')
}).catch((err) => {
console.error(`错误码: ${err.code}, 消息: ${err.message}`)
})
})
ok 到这里我们就已经完成啦 A入口TS语言开发 Stage 模型
我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。