HarmonyOS 鸿蒙Next NavPathStack 跳转白页

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 鸿蒙OS

// nav.ets

import { CommonConstants } from '../constants/CommonConstants';

export  class Nav {

  static pathInfos:NavPathStack

  static  createNav = () => {

    this.pathInfos = new NavPathStack();

    AppStorage.setOrCreate(CommonConstants.NavPathStack ,this.pathInfos);

  }

  static push = <T extends object>(name: string,params?: T,navigationInterception?:NavigationInterception) => {

    if(navigationInterception){

      this.setInterception(navigationInterception)

    }

    this.pathInfos.pushPathByName(name, params)

    console.log(JSON.stringify(this.pathInfos.getAllPathName()), 'pathInfos.getAllPathName')

  }

  static replace = <T extends object>(name: string,params?: T,navigationInterception?:NavigationInterception) => {

    this.pathInfos.replacePathByName(name,params)

  }

  static back = (name: string) => {

    this.pathInfos.removeByName(name)

  }

  static setInterception = (navigationInterception: NavigationInterception) =>{

    this.pathInfos.setInterception(navigationInterception)

  }

}

//route_map.json

{

"name": "pages/staging/SetCommonFunctions",

"pageSourceFile": "src/main/ets/pages/staging/SetCommonFunctions.ets",

"buildFunction": "",

"data": {

"title" : "工作台-设置"

}

},

// 日志打印

[“pages/staging/SetCommonFunctions”] pathInfos.getAllPathName


更多关于HarmonyOS 鸿蒙Next NavPathStack 跳转白页的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

1、侧滑返回上一页可以设置onBackPressed重写返回逻辑,具体参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5#onbackpressed10 2、另一个是打开的是一个空白页面的问题,应该是Navigation(this.pageStack)传值时序问题,代码上修改了下,可以参考下

//Index.ets

import {Nav} from '../Utils/Nav'

@Entry

@Component

struct Index {

  pageStack : NavPathStack = new NavPathStack();

  // 全局设置一个NavPathStack

  aboutToAppear(): void {

    AppStorage.setOrCreate("GlobalNavPathStack", this.pageStack)

    Nav.createNav()

  }

  build() {

    Navigation(this.pageStack){

      Column(){

        Button('Entry-SecondPage')

          .margin(20)

          .onClick(()=>{

            // this.pageStack.pushPathByName("SecondPage", null, false);

            Nav.push('SecondPage')

          })

      }

    }

    .hideToolBar(false)

  }

}

//SecondPage.ets

import { webview } from '@kit.ArkWeb';

// 跳转页面入口函数

[@Builder](/user/Builder)

export function PageBuilder() {

  SecondPage()

}

@Entry

@Component

export struct SecondPage {

  pathStack: NavPathStack = new NavPathStack()

  controller: webview.WebviewController = new webview.WebviewController();

  build() {

    NavDestination() {

      Column(){

        Text('SecondPage')

          .onClick(()=>{

            this.pathStack.pushPathByName("ThreePage", null, false);

          })

        // https://hsrjh5.huashengjia100.com/page/new/dist/module/html5Modules.html?id=3146

        Web({ src: 'https://developer.huawei.com/consumer/cn/', controller: this.controller })

          .width('100%')

          .layoutWeight(1)

          .domStorageAccess(true)

          .backgroundColor(Color.Pink)

          .expandSafeArea([SafeAreaType.KEYBOARD])

      }

    }

    .title('SecondPage')

    .onReady((context: NavDestinationContext) => {

      this.pathStack = context.pathStack

    })

    .onBackPressed(() => {

      if (this.controller.accessStep(-1)) {

        this.controller.backward(); // 返回上一个web页

        // 执行用户自定义返回逻辑

        return true

      } else {

        // 执行系统默认返回逻辑,返回上一个page页

        return false

      }

    })

  }

}

function onBackPressed() {

  throw new Error('Function not implemented.');

}

buildFunction,对应是该文件中@Builder方法,该方法引入了页面组件的

更多关于HarmonyOS 鸿蒙Next NavPathStack 跳转白页的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙)系统中,遇到Next NavPathStack跳转白页的问题,通常与页面栈管理或页面生命周期处理不当有关。以下是一些可能的解决方案直接点:

  1. 检查页面栈配置:确保在NavPathStack中配置的页面路径正确无误,且所有页面都已在路由表中正确注册。

  2. 页面生命周期:确认跳转前后页面的onPageShow和onPageHide等生命周期方法是否正确处理。确保没有在这些方法中抛出异常或执行了导致页面无法正常显示的操作。

  3. 数据传递:如果页面跳转时传递了数据,检查数据是否完整且格式正确。数据问题有时会导致页面渲染失败。

  4. 组件状态:检查页面中的自定义组件或第三方组件是否存在已知问题,特别是在鸿蒙系统中的兼容性问题。

  5. 日志输出:增加日志输出,查看在跳转过程中是否有错误或警告信息被记录,这有助于定位问题。

  6. 清理缓存:尝试清理应用缓存和重启设备,有时缓存问题也会导致页面显示异常。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。这将提供更专业的技术支持和解决方案。

回到顶部