1. router跳转(页面路由)

老方法,官方已停止维护

由系统模块router提供的多模块跳转,以及不同模块间的跳转

1.1普通跳转

该跳转接收参数uri:跳转对方地址,params:传递给B页面的参数

router.pushUrl({

        uri: ' ',

        params: {}

});

传递过去的参数可在组建生命周期里通过router.getParams()来进行接收

传递过去的作用域有限,给外部的状态变量赋值来接收

另因为传递过来的参数是不确定里面的内容,故通过as来进行断言

1.2 不可返回跳转

适用于那种广告模式

router.replaceUrl({

        uri: ' ' ,

        params: {}

})

跟上面传递过去的同理,只不过跳转过去的页面,返回不了上一个页面

1.3 返回上一个页面

router.back()

不用接收参数,给点击事件设置该函数会自动返回上一个页面

以上三个是router跳转常用的方法

2.want跳转(适用于不同模块间的参数传递)

该跳转主要适用于从当前模块跳转到另一个模块,适用于独立运行模块的跳转

通过getcontext()获取应用的上下文,再给其断言为UIAbilityContext类型,因为我们调用的方法在

此模块内部

2.1 通过getContext()获取该页面上下文

设定常量接收,之后还要调用其内方法

const context = getContext(this) as common.UIAbilityContext

2.2设定传递过去的信息以及目标一些配置参数

其余参数可查看官网,下主要是一些常用属性

const want: Want = {
  deviceId: "", //设备的编号,默认不写就是当前设备
  bundleName: "com.example.snailmall", // 当前包名,在app.json5中可找到
  abilityName: "PayAbility", // 跳转到对方模块名
  moduleName: "default" // 非必须 当前模块名
}

2.3实现跳转

通过上面获取的上下文,调用startAbility进行跳转

第一个参数是接收的配置信息

第二个参数为回调函数,其内有个形参能接收传递过去的结果

当传递过去报错时,里面的条件成立,回调函数执行

context.startAbility(want, (error) => {
  if (error) {
    console.log(`窗口跳转失败:${error}`)
  }
})

跳转到新模块后,会通过新模块的窗口加载跳转到对应的页面

3.Navigation(官方推荐)

Navigation组件是路由导航的根视图容器,一般作为Page页面的根容器使用

@Provide pageStack: NavPathStack = new NavPathStack()

@Consume pageStack: NavPathStack

3.1准备路由表配置信息(后缀为.json形式)

其中包含的参数是组建名和组建地址,data是额外传递过去的信息

buildFunction()入口函数,通过入口函数进入自定义组建

3.2告诉模块包含此路由表(在module.json中配置)

3.3父组建配置Navigation

 创建路由导航的根视图容器,适用于使用NavRouter组件进行页面路由

3.4 在入口函数中配子页结构

3.5调用方法

上述@Provide pageStack: NavPathStack = new NavPathStack()

通过爷孙装饰器得到的实列参数里的pushPathByName方法进行跳转

this.pageStack.pushPathByName('SearchResultView', value)

子页面通过getParamByName来接收参数

this.params.keyword = this.pageStack.getParamByName('SearchResultView')[0] as string

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐