diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..06da7f42b910c69304348ec578e387c19a38856d --- /dev/null +++ b/README.en.md @@ -0,0 +1,73 @@ +# App Navigation Design + +### Overview +This sample uses an independent router module and dynamic loading method to resolve the issue of routing dependency coupling between multiple HARs/HSPs under a **Navigation** component. + +### Preview +![Route navigation effect preview](screenshots/device/demonstration.en.gif) + +### Project Directory + +``` +├──entry // Entry module +│ ├──build-profile.json5 // Build configuration file, in which arkOptions must be set to the names of the dependency packages required for dynamic import +│ ├──oh-package.json5 // Dependency configuration, including the dependencies of all service modules and the RouterModule +│ ├──src/main/ets +│ │ ├──entryability +│ │ │ └──EntryAbility.ets +│ │ └──pages +│ │ └──Index.ets // Home page +│ └──src/main/resources // Resource directory +├──harA // Service module A +│ ├──Index.ets // Entry file, which exposes the module methods +│ ├──oh-package.json5 // Dependency configuration, including the dependency of the RouterModule +│ ├──src/main/ets/components/mainpage +│ │ ├──A1.ets +│ │ └──A2.ets +│ └──src/main/resources +├──harB // Service module B +│ ├──Index.ets // Entry file, which exposes the module methods +│ ├──oh-package.json5 // Dependency configuration, including the dependency of the RouterModule +│ ├──src/main/ets/components/mainpage +│ │ ├──B1.ets +│ │ ├──B2.ets +│ │ └──B3.ets +│ └──src/main/resources +├──harC // Service module C +│ ├──Index.ets // Entry file, which exposes the module methods +│ ├──oh-package.json5 // Dependency configuration, including the dependency of the RouterModule +│ ├──src/main/ets/components/mainpage +│ │ ├──C1.ets +│ │ └──C2.ets +│ └──src/main/resources +└──RouterModule // Router module + ├──Index.ets // Entry file, which exposes the module methods and constants + ├──oh-package.json5 + ├──src/main/ets/constants // Routing information constants + │ └──RouterConstants.ets + ├──src/main/ets/model // Routing information model + │ └──RouterModel.ets + ├──src/main/ets/utils // Routing methods provided for external systems + │ └──RouterModule.ets + └──src/main/resources +``` + +### How to Implement +1. Extract the routing feature as an independent module named RouterModule in the format of a .har package. +2. The RouterModule manages routes internally and exposes a RouterModule object for other modules to use. +3. Use the main entry module as the dependency registration center of service modules. Use the **Navigation** component in the entry module and configure its dependencies on the service modules. +4. The service modules depend only on the RouterModule. Routes in the service modules are managed by the RouterModule in a unified manner, implementing decoupling between service modules. + +![Module dependencies](screenshots/device/module_dependency.jpg) + +### Required Permissions +N/A +### Constraints + +1. The sample app is supported only on Huawei phones running the standard system. + +2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later. + +3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later. + +4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later. diff --git a/RouterModule/src/main/resources/base/element/string.json b/RouterModule/src/main/resources/base/element/string.json index 8fdf523ab9d471b37a385f520afc18c105759f35..b87cee0b4ceffece9ce89f6922268b7d43966525 100644 --- a/RouterModule/src/main/resources/base/element/string.json +++ b/RouterModule/src/main/resources/base/element/string.json @@ -6,15 +6,7 @@ }, { "name": "to_index", - "value": "ToIndex" - }, - { - "name": "to_hara", - "value": "ToHarA" - }, - { - "name": "to_harb", - "value": "ToHarB" + "value": "Return to back page" } ] } diff --git a/RouterModule/src/main/resources/en_US/element/string.json b/RouterModule/src/main/resources/en_US/element/string.json index 8fdf523ab9d471b37a385f520afc18c105759f35..b87cee0b4ceffece9ce89f6922268b7d43966525 100644 --- a/RouterModule/src/main/resources/en_US/element/string.json +++ b/RouterModule/src/main/resources/en_US/element/string.json @@ -6,15 +6,7 @@ }, { "name": "to_index", - "value": "ToIndex" - }, - { - "name": "to_hara", - "value": "ToHarA" - }, - { - "name": "to_harb", - "value": "ToHarB" + "value": "Return to back page" } ] } diff --git a/RouterModule/src/main/resources/zh_CN/element/string.json b/RouterModule/src/main/resources/zh_CN/element/string.json index 89e035872018f8a3f3a4dcfef338258820035d99..431b8062eff8dd0902a37707f353ebc6b4cff539 100644 --- a/RouterModule/src/main/resources/zh_CN/element/string.json +++ b/RouterModule/src/main/resources/zh_CN/element/string.json @@ -7,14 +7,6 @@ { "name": "to_index", "value": "返回首页" - }, - { - "name": "to_hara", - "value": "跳转到HarA" - }, - { - "name": "to_harb", - "value": "跳转到HarB" } ] } diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 19d03df428736201b5fce0c2228bd72f7cf64c04..1e3a70ae5534d3211edc124bd20d7caaa6b17b5e 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -35,7 +35,7 @@ struct EntryHap { build() { Navigation(this.entryHapRouter) { - Button($r("app.string.to_hara_pageA1"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_hara_pageA1'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) @@ -44,14 +44,14 @@ struct EntryHap { origin: 'Entry' })); }) - Button($r("app.string.to_hara_pageA2"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_hara_pageA2'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) .onClick(() => { buildRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.HARA_A2); }) - Button($r("app.string.to_harb_pageB1"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_harb_pageB1'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) diff --git a/harA/src/main/ets/components/mainpage/A1.ets b/harA/src/main/ets/components/mainpage/A1.ets index 78675d54a180b62f365847b6f49cffa4e1770b6d..8526ffceed2bcc42e7a1578a28c40d7545c81792 100644 --- a/harA/src/main/ets/components/mainpage/A1.ets +++ b/harA/src/main/ets/components/mainpage/A1.ets @@ -18,23 +18,26 @@ import { BuilderNameConstants, buildRouterModel, RouterModule, RouterNameConstan export function harBuilder(value: object) { NavDestination() { Column() { - Text(`传入的参数：${JSON.stringify(value)}`) + Text() { + Span($r('app.string.param')) + Span(JSON.stringify(value)) + } .margin(20) - Button($r("app.string.to_index"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_index'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) .onClick(() => { RouterModule.clear(RouterNameConstants.ENTRY_HAP); }) - Button($r("app.string.to_hara_pageA2"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_hara_pageA2'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) .onClick(() => { buildRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.HARA_A2); }) - Button($r("app.string.to_harb_pageB1"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_harb_pageB1'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) diff --git a/harA/src/main/ets/components/mainpage/A2.ets b/harA/src/main/ets/components/mainpage/A2.ets index 7b5349a2434adbb21548d20457f7e20fe1ce9c56..12f77954f95c1a214837ccfea06359d27a961fdb 100644 --- a/harA/src/main/ets/components/mainpage/A2.ets +++ b/harA/src/main/ets/components/mainpage/A2.ets @@ -18,14 +18,14 @@ import { BuilderNameConstants, buildRouterModel, RouterModule, RouterNameConstan export function harBuilder(value: object) { NavDestination() { Column() { - Button($r("app.string.to_harb_pageB2"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_harb_pageB2'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) .onClick(() => { buildRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.HARB_B2); }) - Button($r("app.string.to_hara_pageA1"), { stateEffect: true, type: ButtonType.Capsule }) + Button($r('app.string.to_hara_pageA1'), { stateEffect: true, type: ButtonType.Capsule }) .width('80%') .height(40) .margin(20) diff --git a/harA/src/main/resources/base/element/string.json b/harA/src/main/resources/base/element/string.json index f92b2dc625a24e9d9edc534718c131e1d0faf1eb..8f9010e2ce974f4dd7e0ca67599e5cab2196e50c 100644 --- a/harA/src/main/resources/base/element/string.json +++ b/harA/src/main/resources/base/element/string.json @@ -6,19 +6,23 @@ }, { "name": "to_harb_pageB1", - "value": "ToHarBPageB1" + "value": "Go to HarB's B1 page" }, { "name": "to_harb_pageB2", - "value": "ToHarBPageB2" + "value": "Go to HarB's B2 page" }, { "name": "to_hara_pageA1", - "value": "ToHarAPageA1" + "value": "Go to HarA's A1 page" }, { "name": "to_hara_pageA2", - "value": "ToHarAPageA2" + "value": "Go to HarA's A2 page" + }, + { + "name": "param", + "value": "Passed-in parameters:" } ] } diff --git a/harA/src/main/resources/en_US/element/string.json b/harA/src/main/resources/en_US/element/string.json index f92b2dc625a24e9d9edc534718c131e1d0faf1eb..8f9010e2ce974f4dd7e0ca67599e5cab2196e50c 100644 --- a/harA/src/main/resources/en_US/element/string.json +++ b/harA/src/main/resources/en_US/element/string.json @@ -6,19 +6,23 @@ }, { "name": "to_harb_pageB1", - "value": "ToHarBPageB1" + "value": "Go to HarB's B1 page" }, { "name": "to_harb_pageB2", - "value": "ToHarBPageB2" + "value": "Go to HarB's B2 page" }, { "name": "to_hara_pageA1", - "value": "ToHarAPageA1" + "value": "Go to HarA's A1 page" }, { "name": "to_hara_pageA2", - "value": "ToHarAPageA2" + "value": "Go to HarA's A2 page" + }, + { + "name": "param", + "value": "Passed-in parameters:" } ] } diff --git a/harA/src/main/resources/zh_CN/element/string.json b/harA/src/main/resources/zh_CN/element/string.json index a473714af932f51318cd17240beb3adcf6378b2a..f594d5f4c4c24367759f3bec41a1c055d28a35ac 100644 --- a/harA/src/main/resources/zh_CN/element/string.json +++ b/harA/src/main/resources/zh_CN/element/string.json @@ -19,6 +19,10 @@ { "name": "to_hara_pageA2", "value": "跳转到HarA的A2页面" + }, + { + "name": "param", + "value": "传入的参数：" } ] } diff --git a/harB/src/main/resources/base/element/string.json b/harB/src/main/resources/base/element/string.json index 374ec8aabf28cf5481f3444adf9264b17aa9ea33..4d7ab8180b59d79d5f9e22dff362fa68e8c38ef6 100644 --- a/harB/src/main/resources/base/element/string.json +++ b/harB/src/main/resources/base/element/string.json @@ -6,23 +6,23 @@ }, { "name": "to_harb_pageB2", - "value": "ToHarBPageB2" + "value": "Go to HarB's B2 page" }, { "name": "to_harb_pageB3", - "value": "ToHarBPageB3" + "value": "Go to HarB's B3 page" }, { "name": "to_harc_pageC1", - "value": "ToHarCPageC1" + "value": "Go to HarC's C1 page" }, { "name": "direct_to_harb_pageB1", - "value": "DirectToHarBPageB1" + "value": "Go to HarB's B1 page directly" }, { "name": "pop_to_pre_page", - "value": "PopToPrePage" + "value": "Return to previous page" } ] } diff --git a/harB/src/main/resources/en_US/element/string.json b/harB/src/main/resources/en_US/element/string.json index 374ec8aabf28cf5481f3444adf9264b17aa9ea33..4d7ab8180b59d79d5f9e22dff362fa68e8c38ef6 100644 --- a/harB/src/main/resources/en_US/element/string.json +++ b/harB/src/main/resources/en_US/element/string.json @@ -6,23 +6,23 @@ }, { "name": "to_harb_pageB2", - "value": "ToHarBPageB2" + "value": "Go to HarB's B2 page" }, { "name": "to_harb_pageB3", - "value": "ToHarBPageB3" + "value": "Go to HarB's B3 page" }, { "name": "to_harc_pageC1", - "value": "ToHarCPageC1" + "value": "Go to HarC's C1 page" }, { "name": "direct_to_harb_pageB1", - "value": "DirectToHarBPageB1" + "value": "Go to HarB's B1 page directly" }, { "name": "pop_to_pre_page", - "value": "PopToPrePage" + "value": "Return to previous page" } ] } diff --git a/harC/src/main/resources/base/element/string.json b/harC/src/main/resources/base/element/string.json index 8b4022b6c944445d11f089469e277eba9382b539..92046650ef57b178bcdce39aeba03a8deb84f62f 100644 --- a/harC/src/main/resources/base/element/string.json +++ b/harC/src/main/resources/base/element/string.json @@ -6,11 +6,11 @@ }, { "name": "to_harb_pageB2", - "value": "ToHarBPageB2" + "value": "Go to HarC's C1 page" }, { "name": "to_harc_pageC2", - "value": "ToHarCPageC2" + "value": "Go to HarC's C2 page" } ] } diff --git a/harC/src/main/resources/en_US/element/string.json b/harC/src/main/resources/en_US/element/string.json index 8b4022b6c944445d11f089469e277eba9382b539..92046650ef57b178bcdce39aeba03a8deb84f62f 100644 --- a/harC/src/main/resources/en_US/element/string.json +++ b/harC/src/main/resources/en_US/element/string.json @@ -6,11 +6,11 @@ }, { "name": "to_harb_pageB2", - "value": "ToHarBPageB2" + "value": "Go to HarC's C1 page" }, { "name": "to_harc_pageC2", - "value": "ToHarCPageC2" + "value": "Go to HarC's C2 page" } ] } diff --git a/screenshots/device/demonstration.en.gif b/screenshots/device/demonstration.en.gif new file mode 100644 index 0000000000000000000000000000000000000000..d4fc8b24c244c06bc6be4f692a76c76b8f925c6c Binary files /dev/null and b/screenshots/device/demonstration.en.gif differ