鸿蒙5.0开辟【NavPathStack的详细使用阐明以及示例】

打印 上一主题 下一主题

主题 939|帖子 939|积分 2817

鸿蒙保举:从API Version 10开始,保举使用NavPathStack实现页面路由,我们先看官方详细先容: Navigation路由相关的利用都是基于页面栈[NavPathStack]提供的方法进行,每个Navigation都需要创建并传入一个NavPathStack对象,用于管理页面。主要涉及页面跳转、页面返回、页面更换、页面删除、参数获取、路由拦截等功能。 怎么使用呢?官方写的很简单,就举了例子,我在尝试之后,发现跳转的页面不显示自己的UI,很纳闷,控制台的报错是没有找到对应的路由,错误信息:Builder function not registered.
仔细看了文档,才发现官方太省事了,没有整合好,我就按照正常的设置+跳转,梳理一下,你在调试的时候就可以正常使用NavPathStack来做路由的跳转。 正文开始: 1.设置子页也需要设置到系统设置文件route_map.json,现在系统没有给我们设置这个文件,在/respurces/base/profile,目录下新建文件如图所示

这个是设置navigation的子页面路由,怎样不设置就会报上述错误信息 2.设置module.json5信息,这个文件设置route_map.json路径的

3.页面跳转的方法示例 主页面:
  1. //index.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5.   // 创建一个页面栈对象并传入Navigation
  6.   pageStack: NavPathStack = new NavPathStack()
  7.   build() {
  8.     Navigation(this.pageStack) {
  9.     Button("跳转")
  10.       .onClick(() =>{
  11.             console.info("nav跳转事件");
  12.             //方法1 普通跳转,通过页面的name去跳转,并可以携带param。
  13.              this.pageStack.pushPathByName('NavWidgetTwo', 'pageStack上一页面传递过来的参数数',true)
  14.             //方法2 普通跳转,通过页面的name去跳转,并可以携带param。
  15.              this.pageStack.pushPath({ name: "NavWidgetTwo", param: "pageStack上一页面传递过来的参数数"})
  16.             //方法3,同方法1,我试过pop的时候没有打印,不知道官方的怎么有打印
  17.             this.pageStack.pushPathByName('NavWidgetTwo', "pageStack上一页面传递过来的参数数", (popInfo) => {
  18.               console.log('------>Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
  19.             });
  20.             //方法4 错误码的跳转,跳转结束会触发异步回调,返回错误码信息。
  21.             this.pageStack.pushDestinationByName('NavWidgetTwo', "PageOne Param")
  22.               .catch((error: BusinessError) => {
  23.                 console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
  24.               }).then(() => {
  25.               console.error('Push destination succeed.');
  26.             });
  27.         }
  28.     .title('Main')
  29.   }
  30. }
复制代码
子页面的示例代码 //NavWidgetTwo.ets
  1. @Builder
  2. export function NavWidgetTwoBuilder() {
  3.   NavWidgetTwo()
  4. }
  5. // @Entry
  6. @Component
  7. export struct NavWidgetTwo {
  8.   @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()
  9.   @Builder
  10.   PagesMap(name: string) {
  11.     if (name == 'DialogPage') {
  12.       DialogPage()
  13.     }
  14.   }
  15.   build() {
  16.     NavDestination() {
  17.       Column() {
  18.         Button('回到首页', { stateEffect: true, type: ButtonType.Capsule })
  19.           .width('80%')
  20.           .height(40)
  21.           .margin(20)
  22.           .onClick(() => {
  23.             this.pageStack.clear()
  24.           })
  25.         Button('Push DialogPage')
  26.           .margin(20)
  27.           .width('80%')
  28.           .onClick(() => {
  29.             this.pageStack.pushPathByName('PageOne', '');
  30.           })
  31.           //传递的参数取值方法
  32.         Button(`${this.pageStack.getParamByName("NavWidgetTwo")}`)
  33.           .margin(20)
  34.           .width('80%')
  35.           .onClick(() => {
  36.             //返回上一页面
  37.             this.pageStack.pop();
  38.             // 返回到上一个PageOne页面
  39.             this.pageStack.popToName("PageOne")
  40.             // 返回到索引为1的页面
  41.             this.pageStack.popToIndex(1)
  42.             // 返回到根首页(清除栈中所有页面)
  43.             this.pageStack.clear()
  44.           })
  45.       }.width('100%').height('100%')
  46.     }.title('nav子页面')
  47.     .onReady((context: NavDestinationContext) => {
  48.       this.pageStack = context.pathStack
  49.     })
  50.   }
  51. }
复制代码
留意:子页面只能用NavDestination,不能和主页面一样用Navigation,我试过用Navigation显示不了UI,具体还需要探索缘故原由。

最后呢,很多开辟朋友不知道需要学习那些鸿蒙技能?鸿蒙开辟岗位需要掌握那些核心技能点?为此鸿蒙的开辟学习必须要系统性的进行。
而网上有关鸿蒙的开辟资料非常的少,假如你想学好鸿蒙的应用开辟与系统底层开辟。你可以参考这份资料,少走很多弯路,节省没必要的贫苦。由两位前阿里高级研发工程师团结打造的《鸿蒙NEXT星河版OpenHarmony开辟文档》内里内容包罗了(ArkTS、ArkUI开辟组件、Stage模子、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技能知识点
如果你是一名Android、Java、前端等等开辟职员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开辟的学习门路图。
​​​​

高清完整版请点击→《鸿蒙NEXT星河版开辟学习文档》
针对鸿蒙发展门路打造的鸿蒙学习文档。话不多说,我们直接看详细资料鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开辟入门教学视频,资助大家在技能的道路上更进一步。
《鸿蒙 (OpenHarmony)开辟学习视频》
《鸿蒙生态应用开辟V2.0白皮书》
《鸿蒙 (OpenHarmony)开辟基础到实战手册》
《鸿蒙开辟基础》
《鸿蒙开辟进阶》
《鸿蒙开辟实战》

获取这份鸿蒙星河版学习资料,请点击→《鸿蒙NEXT星河版开辟学习文档》
总结

鸿蒙—作为国家主力推送的国产利用系统。部分的高校已经取消了安卓课程,从而开设鸿蒙课程;企业纷纷跟进启动了鸿蒙研发。
而且鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开辟,未来将会支持 50 万款的应用。那么这么多的应用需要开辟,也就意味着需要有更多的鸿蒙人才。鸿蒙开辟工程师也将会迎来爆发式的增长,学习鸿蒙势在必行!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张国伟

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表