8、创建第一个鸿蒙页面并实现页面跳转

一、创建页面

1、新建页面

在项目的"pages"目录上右键,选择"新建"------"page"

2、录入页面的名称

在"Page name"中输入页面的名称,并点击"Finish"完成创建

3、以下为创建的新页面

2、注册页面

新建的页面会自动在"resources"---"base"---"profile"---"main_pages.json"文件的src中注册,注册的内容为页面的路径。如果是使用"新建"---"ArkTS file"所创建的页面,则必须手动在此配置文件中注册。只有注册的页面才能被使用。

其中的"pages/Index"为主页(即项目运行时默认进入的页面),

二、页面内容介绍

@Entry :定义UI的入口。在单个UI页面中,最多可以使用@Entry装饰一个自定义组件(页面)

@Compenent :仅能装饰struct关键字声明的数据结构。被@Compenent装饰的struct可以具备组件化的能力,可用于定义一个单独的页面,也可以作为其它页面的组成部分(比如弹窗)

struct :自定义组件,它不能被继承。

@State :用于定义组件内状态,相当于组件全局变量,也可理解为组件对象的属性,使用@State修饰的变量在组件对象中可以使用this关键字访问

build()函数:build()函数用于定义自定义组件的声明式UI描述,自定义组件必须定义build()函数。

三、页面跳转

此处示例为在Index中添加一个按钮,点击按钮将跳转到MyPages页面。

1、在Index中导入路由对象

复制代码
import router from '@ohos.router'

2、在主体中添加按钮,为按钮绑定点击事件,在事件中跳转到MyPage页面。

复制代码
ton("跳转到MyPage").onClick(()=>{
  router.pushUrl({url:'pages/MyPage'})
})
相关推荐
liqingdi43727 分钟前
[SWPUCTF 2023 秋季新生赛]Easy SMC
服务器·前端·javascript
自养Agent1 小时前
MCP Server Boundary Audit Report
linux·服务器·人工智能·windows·大模型·llm
派小心.2 小时前
网站统计采样数据的误差核对
大数据·服务器·前端·数据库·人工智能·小程序·数据分析
A心有千千结2 小时前
通过 SSH 反向代理让服务器借用本机网络访问 GitHub 的最佳实践
linux·服务器·网络·git·ssh·github
fengkai45453 小时前
十三、Zabbix 监控
运维·服务器·zabbix·监控·网络设备
donk13143 小时前
React Native for OpenHarmony 实战:三方库 react-native-step-indicator 的鸿蒙化适配指南
分布式·react native·react.js·wpf·harmonyos
数字新视界3 小时前
机房动环监控助力智能管理
大数据·服务器·数据库·动环监控系统·动力与环境监控系统
算力小木3 小时前
#标题:5090 vs 4090D 到底差多少?我拿八卡实测了一周
服务器
数据中心的那点事儿3 小时前
艾特网能:GPU算力服务器冷却系统配套设计介绍
运维·服务器·gpu算力
广州灵眸科技有限公司3 小时前
单芯片同时跑 Linux 与 RT-Thread:RV1126B的AMP异构方案完整拆解
linux·运维·服务器