通过har包中的接口方法跳转到har包中的自定义页面

HarmonyOS

trobust

2024-05-22 22:30:12

2020浏览

回答 1

按赞同

按时间

一意孤行的

三方库可能会在自己的har包中有一些自定义页面，需要通过自己提供的接口方法来调用展示，所以需要在接口方法中使用一些方法使页面跳转到自定义页面中。

使用的主要功能

命名路由
router.pushNamedRoute()

核心代码

har包中的自定义页面MainPage.ets

自定义页面需要使用命名路由进行命名 
@Entry({routeName:"MainPage"}) 
@Component 
export struct MainPage { 
  @State message: string = 'Hello World'; 
  
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(() => { 
            router.pushNamedRoute({ 
              name: 'SecondPage' 
            }) 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

har包中的自定义页面SecondPage.ets

@Entry({routeName:"SecondPage"}) 
@Component 
export struct SecondPage { 
  @State message: string = 'SecondPage'; 
  
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(() => { 
            router.back() 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

har包中的接口方法Test.ets

这里仅展示路由跳转 
import router from '@ohos.router'; 
  
export class Test { 
  routerToAnother() { 
    router.pushNamedRoute({ 
      name: 'MainPage' 
    }) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

将har包中的页面和方法导出Index.ets

自定义页面需要导出后，其他模块才可以使用到 
export { MainPage } from './src/main/ets/components/mainpage/MainPage' 
export { Test } from './src/main/ets/components/mainpage/Test' 
export { SecondPage } from './src/main/ets/components/mainpage/SecondPage'1.
2.
3.
4.

项目使用接口方法

使用前需要在项目中导入har包，这里不做说明 
import { Test } from 'library' 
import router from '@ohos.router'; 
  
@Entry 
@Component 
struct Index { 
  @State message: string = '使用接口方法'; 
  test: Test = new Test(); 
  
  build() { 
    Row() { 
      Column() { 
        Button(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(() => { 
            this.test.routerToAnother() 
          }) 
        Button("使用命名路由") 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(() => { 
            router.pushNamedRoute({ 
              name: 'MainPage' 
            }) 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

效果演示

2024-05-23 16:17:14

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

通过har包中的接口方法跳转到har包中的自定义页面

订阅鸿蒙技术特刊，精选内容抢先看