当前位置: 首页 > news >正文

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'})
})

相关文章:

  • Asp.net MVC Api项目搭建
  • 德语B级SampleAcademy
  • 浏览器内置NoSQL数据库IndexedDB
  • 快速搭建本地的chatgpt
  • 什么是Mock?为什么要使用Mock呢?
  • GEM5 Garnet DVFS / NoC DVFS教程:ruby.clk_domain ruby.voltage_domain
  • squid代理服务器
  • 深入解析序列模型:全面阐释 RNN、LSTM 与 Seq2Seq 的秘密
  • js 对象数组删除某一个特定的对象
  • 数据结构八种内部排序算法c++实现
  • 【Java 进阶篇】Ajax 实现——JQuery 实现方式 `get` 与 `post`
  • MySQL中json类型,你使用过吗
  • R语言:利用biomod2进行生态位建模
  • 【数据结构初阶】双链表
  • React整理总结(四)
  • IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
  • python3.6+scrapy+mysql 爬虫实战
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • avalon2.2的VM生成过程
  • CSS 提示工具(Tooltip)
  • FineReport中如何实现自动滚屏效果
  • java8 Stream Pipelines 浅析
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • php面试题 汇集2
  • Python十分钟制作属于你自己的个性logo
  • use Google search engine
  • XML已死 ?
  • 从地狱到天堂,Node 回调向 async/await 转变
  • 从输入URL到页面加载发生了什么
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 前端临床手札——文件上传
  • 如何利用MongoDB打造TOP榜小程序
  • 使用 Node.js 的 nodemailer 模块发送邮件(支持 QQ、163 等、支持附件)
  • 再次简单明了总结flex布局,一看就懂...
  • 《TCP IP 详解卷1:协议》阅读笔记 - 第六章
  • C# - 为值类型重定义相等性
  • 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes ...
  • "无招胜有招"nbsp;史上最全的互…
  • ###C语言程序设计-----C语言学习(6)#
  • #NOIP 2014# day.2 T2 寻找道路
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • $.ajax()参数及用法
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (echarts)echarts使用时重新加载数据之前的数据存留在图上的问题
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (附源码)计算机毕业设计高校学生选课系统
  • (六)vue-router+UI组件库
  • (三)Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • (原+转)Ubuntu16.04软件中心闪退及wifi消失
  • (正则)提取页面里的img标签
  • (转)c++ std::pair 与 std::make
  • .NET Remoting Basic(10)-创建不同宿主的客户端与服务器端
  • /dev下添加设备节点的方法步骤(通过device_create)