【HarmonyOS】关于官方推荐的组件级路由Navigation的心得体会

news/2024/8/28 2:47:05/ 标签: harmonyos, 华为, OpenHarmony, 路由, Navigation, router, 架构

前言

最近因为之前的630版本有点忙,导致断更了几天,现在再补上。换换脑子。
目前内测系统的华为应用市场,各种顶级APP陆续都放出来beta版本了,大体上都完成了主流程的开发。欣欣向荣的气息。

学习思路

关于学习HarmonyOS的问题,很多同学私聊我说,因为没有白名单访问不了最新的API,目前API已经到12。这其实影响不大,HarmonyOS和OpenHarmony的接口我比对了下,现在基本功能和作用没有区别,可能某些系统api导包名字有区别,但这不影响,可以无缝切换。

可以通过这个链接,访问OpenHarmony开源的API接口文档等信息。

点击左上角的分支,来控制你看的API文档版本。目前最新的是5.0 Beta1 这和HarmonyOS是一致的。目前看华为的策略就是开源鸿蒙和商业鸿蒙版本一致管理。
在这里插入图片描述

Navigation_15">标关于官方推荐的组件级路由Navigation的使用心得体会

最近经历了一次应用架构更新,对于路由的概念有了深刻的认识。从两年前开发OpenHarmony开始,基本都是使用router路由和window窗口来控制模块之间的切换。整个页面逻辑的控制非常耦合,并且笨重不变。

随着API的迭代更新,目前华为官方推荐使用Navigaiton来替换router

Navigaiton这个东西,方便就方便于它的定位,组件级别。而我们的老东西router是页面级别。

  1. 灵活性一目了然,我们可以将页面一部分组件,进行路由控制切换。
  2. 并且我们可以对路由的删除进行管理,而router是没有remove只能替换,并且替换路由函数,是强制没有页面转场动画的效果。
  3. 最大的优势在于系统提供了自动扩容的容器控件,并且支持分栏效果,在折叠屏手机上的适配会非常方便。

Navigation_26">Navigation如何使用?

首先Navigation是个容器,并不是直接对标router一样来使用的。我们可以理解成,这家伙是个变形金刚,它是由三部分组成,首先是主页面容器Navigation,其次是子页面容器NavDestination,之后才是对标router的操作对象NavPathStack

(1)创建主页界面



struct MainPage { message: string = 'Hello World';// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack = new NavPathStack()build() {Navigation(this.pageStack) {// 页面布局Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{// 跳转到子页面this.pageStack.pushDestination({name: "OnePage",}, false); //该false表示不需要转场动画,默认是有的})}.width('100%')}.height('100%')}// 分为三种模式,(默认)自动NavigationMode.Auto,单页面NavigationMode.Stack和分栏NavigationMode.Split.mode(NavigationMode.Stack)}
}

(2)创建子页界面


// 跳转页面入口函数

export function OnePageBuilder() {OnePage()
}

struct OnePage {private TAG: string = "OnePage"; message: string = 'Hello World';pathStack: NavPathStack = new NavPathStack();build() {NavDestination() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}.onShown(()=>{console.log(this.TAG, "OnePage onShown");}).onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack;})}
}

(3)配置路由
在这里插入图片描述

{"routerMap": [{"name": "OnePage","pageSourceFile": "src/main/ets/pages/Navigation/OnePage.ets","buildFunction": "OnePageBuilder","data": {"description" : "this is PageOne"}}]
}

特别注意的是,需要配置路由表的路径到module.json5里面,要不然跳转不了。
特别注意的是,需要配置路由表的路径到module.json5里面,要不然跳转不了。
特别注意的是,需要配置路由表的路径到module.json5里面,要不然跳转不了。主要的话说三遍!

  {"module" : {"routerMap": "$profile:route_map"}}

从API version 12开始,Navigation支持使用系统路由表的方式进行动态路由。各业务模块(HSP/HAR)中需要独立配置router_map.json文件,在触发路由跳转时,应用只需要通过NavPactStack提供的路由方法,传入需要路由的页面配置名称,此时系统会自动完成路由模块的动态加载、页面组件构建,并完成路由跳转,从而实现了开发层面的模块解耦。


http://www.ppmy.cn/news/1475580.html

相关文章

AI网络爬虫022:批量下载某个网页中的全部链接

文章目录 一、介绍二、输入内容三、输出内容一、介绍 网页如下,有多个链接: 找到其中的a标签: <a hotrep="doc.overview.modules.path.0.0.1" href="https://cloud.tencent.com/document/product/1093/35681" title="产品优势">产品优…

Python3极简教程(一小时学完)下

目录 PEP8 代码风格指南 知识点 介绍 愚蠢的一致性就像没脑子的妖怪 代码排版 缩进 制表符还是空格 每行最大长度 空行 源文件编码 导入包 字符串引号 表达式和语句中的空格 不能忍受的情况 其他建议 注释 块注释 行内注释 文档字符串 版本注记 命名约定 …

使用Apache Beam进行统一批处理与流处理

Apache Beam是一个开源的统一编程模型&#xff0c;用于定义和执行数据处理流水线&#xff0c;支持批处理和流处理。Beam旨在提供一个简单、可扩展且灵活的框架&#xff0c;适用于各种数据处理任务。本文将详细介绍如何使用Apache Beam进行批处理和流处理&#xff0c;并通过Java…

C++: 链表环形题题解

前言&#xff1a;题目都是leetcode的原题&#xff0c;拿来复习一下链表&#xff0c;并养成解题习惯。 开胃菜&#xff1a; 题目&#xff1a; 分析&#xff1a; 代码实现还要注意一下细节的处理&#xff0c; 1.链表为空&#xff0c;只有一个节点的链表 2.快指针在移动两个节…

【人工智能】-- 搜索技术(状态空间法)

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;引言 &#x1f348;介绍 &#x1f349;状态空间法 &#x1f348;状态空间的构成 &#x1f34d;状态 &#x1f34d;算符…

【国产开源可视化引擎Meta2d.js】鹰眼地图

鹰眼地图 画布右下角弹出一个缩略导航地图&#xff0c;鼠标点击可以跳到指定位置。 在线体验&#xff1a; 乐吾乐2D可视化 示例&#xff1a; // 显示缩略地图 meta2d.showMap();// 关闭缩略地图 meta2d.hideMap();

云WAF在电子商务领域具体能提供哪些安全功能?

云WAF&#xff08;Cloud Web Application Firewall&#xff09;在电子商务领域提供了一系列关键的安全功能&#xff0c;以保护在线交易平台免受各种网络攻击和威胁。以下是云WAF能够提供的具体安全功能&#xff1a; 实时流量监控与分析&#xff1a;云WAF能够对电子商务网站的流…

Docker容器的生命周期

引言 Docker 容器作为一种轻量级虚拟化技术&#xff0c;在现代应用开发和部署中扮演着重要角色。理解容器的生命周期对于有效地管理和运维容器化应用至关重要。本文将深入探讨 Docker 容器的生命周期&#xff0c;从创建到销毁的各个阶段&#xff0c;帮助读者更好地掌握容器管理…

CV05_深度学习模块之间的缝合教学(1)

1.1 在哪里缝 测试文件&#xff1f;&#xff08;&#xff09; 训练文件&#xff1f;&#xff08;&#xff09; 模型文件&#xff1f;&#xff08;√&#xff09; 1.2 骨干网络与模块缝合 以Vision Transformer为例&#xff0c;模型文件里有很多类&#xff0c;我们只在最后…

windows的远程桌面连接docker

1. Docker容器中运行远程桌面服务 (RDP)&#xff1a;您的Docker容器需要安装和运行远程桌面服务。通常&#xff0c;远程桌面服务在Windows操作系统上可用。如果您使用的是Linux容器&#xff0c;则需要安装一个支持RDP协议的桌面环境和RDP服务器。 2. 开放RDP端口&#xff1a;通…

Apache Flink核心特性应用场景

Flink的定义 Apache Flink是一个分布式处理引擎&#xff0c;用于处理 无边界数据流&#xff0c; 有边界数据流上金秀贤有状态的计算。Flink能在所有常见的集群环境中运行&#xff0c;并能以内存速度和任意规模进行计算如下Flink官网的一张图 Flink 与Spark的区别 Flink 中处…

初学SpringMVC之使用注解开发

先配置 web.xml 文件 1.注册 DispatcherServlet 2. <init-param> 下 <param-value> 放自己创建的 xml&#xff08;标准写法是 xx-servlet.xml&#xff09; 3.映射路径写 / 即可&#xff0c;匹配所有请求 <?xml version"1.0" encoding"UTF-8…

记录docker部署好golang web项目后浏览器访问不到的问题

部署好项目&#xff0c;docker ps -a查看没有任何问题 端口映射成功&#xff0c;但是浏览器就是访问不到&#xff0c;排查后发现犯了个错&#xff0c;注意&#xff0c;项目配置文件中的端口&#xff1a; 其实也就是你项目中监听的端口&#xff1a; 必须和容器端口一致&#x…

SpinalHDL之实用工具(下篇)

本文作为SpinalHDL学习笔记第十四篇&#xff0c;记录使用SpinalHDL的一些实用性语法工具。 SpinalHDL学习笔记总纲链接如下&#xff1a; SpinalHDL 学习笔记_spinalhdl blackbox-CSDN博客 目录&#xff1a; 6.存根&#xff08;Stub&#xff09; 7.Assertions 8.Report 9.S…

Facebook的未来蓝图:从元宇宙到虚拟现实的跨越

随着科技的不断演进和社会的数字化转型&#xff0c;虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;作为下一代计算平台正逐渐走进人们的视野。作为全球领先的科技公司之一&#xff0c;Facebook正在积极探索并推动这一领域的发展&#xff0c;以实现其…

Vue3框架搭建2:axios+typescript封装

仓库地址&#xff1a;https://github.com/buguniao5213/LuArch 1、安装axios npm install axios2、创建文件 先创建一个文件夹&#xff1a; ├── src/ │ ├── api/ │ │ ├── index.ts/ #编写axios封装代码 │ │ └── example.ts/ #定义…

[PaddlePaddle飞桨] PaddleSpeech-自动语音识别-小模型部署

PaddleSpeech的GitHub项目地址 环境要求&#xff1a; gcc > 4.8.5 paddlepaddle < 2.5.1 python > 3.8 OS support: Linux(recommend), Windows, Mac OSXpip下载指令&#xff1a; python -m pip install paddlepaddle-gpu2.5.1 -i https://pypi.tuna.tsinghua.edu.c…

旷野之间2 - 如何训练医疗保健小型语言模型(AI-SLM)

​​​​ 在本文中,我们将研究如何针对疾病症状训练一个小型医疗保健语言模型。为此,我们将从HuggingFace获取数据集(用于训练我们的模型):https://huggingface.co/datasets/QuyenAnhDE/Diseases_Symptoms QuyenAnhDE/Diseases_Symptoms 数据集来自 Hugging Face。图片来源…

MongoDB教程(一):Linux系统安装mongoDB详细教程

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、Ubuntu…

element ui ts table重置排序

#日常# 今天带的实习生&#xff0c;在遇到开发过程中&#xff0c;遇到了element ui table 每次查询的时候都需要重置排序方式&#xff0c;而且多个排序是由前端排序。 <el-table :data"tableData" ref"restTable"> </<el-table> <script…