如何做品牌网站设计,医院网站跳出率高,网站建设案例 杭州远大,手机网站建设与制作页面路由跳转
若开发者想在entry模块中#xff0c;添加一个按钮跳转至library模块中的menu页面#xff08;路径为#xff1a;library/src/main/ets/pages/menu.ets#xff09;#xff0c;那么可以在使用方的代码#xff08;entry模块下的Index.ets#xff0c;路径为添加一个按钮跳转至library模块中的menu页面路径为library/src/main/ets/pages/menu.ets那么可以在使用方的代码entry模块下的Index.ets路径为entry/src/main/ets/pages/Index.ets里这样使用
import { Log, add, MyTitleBar, ResManager, nativeMulti } from library;
import { BusinessError } from ohos.base;
import Logger from ../logger/Logger;
import router from ohos.router;const TAG Index;Entry
Component
struct Index {State message: string ;build() {Column() {List() {ListItem() {Text($r(app.string.click_to_menu)).fontSize(18).textAlign(TextAlign.Start).width(100%).fontWeight(500).height(100%)}.id(clickToMenu).borderRadius(24).width(685px).height(84px).backgroundColor($r(sys.color.ohos_id_color_foreground_contrary)).margin({ top: 10, bottom: 10 }).padding({ left: 12, right: 12, top: 4, bottom: 4 }).onClick(() {router.pushUrl({url: bundle:com.samples.hspsample/library/ets/pages/Menu}).then(() {console.log(push page success);Logger.info(TAG, push page success);}).catch((err: BusinessError) {Logger.error(TAG, pushUrl failed, code is ${err.code}, message is ${err.message});})})}.alignListItem(ListItemAlign.Center)}.width(100%).backgroundColor($r(app.color.page_background)).height(100%)}
}其中router.pushUrl方法的入参中url的内容为
bundle:com.samples.hspsample/library/ets/pages/Menuurl内容的模板为
bundle:包名bundleName/模块名moduleName/路径/页面所在的文件名(不加.ets后缀)页面路由返回
如果当前处于HSP中的页面需要返回之前的页面时可以使用router.back方法但是返回的页面必须是当前页面跳转路径上的页面。
import router from ohos.router;Entry
Component
struct Index3 { // 路径为library/src/main/ets/pages/Back.etsState message: string HSP back page;build() {Row() {Column() {Text(this.message).fontFamily(HarmonyHeiTi).fontWeight(FontWeight.Bold).fontSize(32).fontWeight(700).fontColor($r(app.color.text_color)).margin({ top: 32px }).width(624px)Button($r(app.string.back_to_HAP)).id(backToHAP).fontFamily(HarmonyHeiTi).height(48).width(624px).margin({ top: 550 }).type(ButtonType.Capsule).borderRadius($r(sys.float.ohos_id_corner_radius_button)).backgroundColor($r(app.color.button_background)).fontColor($r(sys.color.ohos_id_color_foreground_contrary)).fontSize($r(sys.float.ohos_id_text_size_button1))// 绑定点击事件.onClick(() {router.back({ // 返回HAP的页面url: pages/Index // 路径为entry/src/main/ets/pages/Index.ets})})Button($r(app.string.back_to_HSP)).id(backToHSP).fontFamily(HarmonyHeiTi).height(48).width(624px).margin({ top: 4% , bottom: 6% }).type(ButtonType.Capsule).borderRadius($r(sys.float.ohos_id_corner_radius_button)).backgroundColor($r(app.color.button_background)).fontColor($r(sys.color.ohos_id_color_foreground_contrary)).fontSize($r(sys.float.ohos_id_text_size_button1))// 绑定点击事件.onClick(() {router.back({ // 返回HSP的页面url: bundle:com.samples.hspsample/library/ets/pages/Menu //路径为library/src/main/ets/pages/Menu.ets})})}.width(100%)}.backgroundColor($r(app.color.page_background)).height(100%)}
}页面返回router.back方法的入参中url说明
如果从HSP页面返回HAP页面url的内容为
pages/Indexurl内容的模板为
页面所在的文件名(不加.ets后缀)如果从HSP1的页面跳到HSP2的页面后需要返回到HSP1的页面url的内容为
bundle:com.samples.hspsample/library/ets/pages/Menuurl内容的模板为
bundle:包名bundleName/模块名moduleName/路径/页面所在的文件名(不加.ets后缀)注意测试中使用DevEco Studio 本地模拟器测试 windowStage.loadContent直接加载跨包路由发现白屏半天加载不出来改用真机测试测试没有问题还有一些其他问题在本地模拟器上是会加载异常这个时候最好使用真机测试一下本地模拟器有时候就是有点拉胯
