鸿蒙分享(二):引入zrouter路由跳转+封装

码仓库:https://gitee.com/linguanzhong/share_harmonyos 鸿蒙api:12

鸿蒙第三方库地址:OpenHarmony三方库中心仓

zrouter地址:OpenHarmony三方库中心仓

1.引入zrouter

1.打开终端界面:输入 ohpm install @hzw/zrouter
2.在项目根目录的hvigor目录的hvigor-config.json5文件中配置安装 Sync Now或重新build让插件安装生效
复制代码
"router-register-plugin":"1.1.1"
3.导入router-register-plugin插件模块

3.1在common模块的hvigorfile.ts文件导入router-register-plugin插件模块,如下

复制代码
import { harTasks } from '@ohos/hvigor-ohos-plugin';
import { routerRegisterPlugin, PluginConfig } from 'router-register-plugin'

const config: PluginConfig = {
  scanDirs: ["src/main/ets/components"],
  logEnabled: true, // 查看日志
  viewNodeInfo: false, // 查看节点信息
  isAutoDeleteHistoryFiles: true // 删除无用编译产物
}

export default {
  system: harTasks,
  plugins: [routerRegisterPlugin(config)]
}

3.2 在entry模块的hvigorfile.ts文件导入router-register-plugin插件模块,如下

复制代码
import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { routerRegisterPlugin, PluginConfig } from 'router-register-plugin'

const config: PluginConfig = {
  scanDirs: ['src/main/ets/pages'],
  logEnabled: true, // 查看日志
  viewNodeInfo: false, // 查看节点信息
  isAutoDeleteHistoryFiles: false // 删除无用的编译产物

}

export default {
  system: hapTasks,
  plugins: [routerRegisterPlugin(config)]
}
4.初始化ZRouter

找到EntryAbility,onCreate方法添加如下代码

复制代码
    // 如果项目中存在hsp模块则传入true
    ZRouter.initialize((config) => {
      config.isLoggingEnabled = BuildProfile.DEBUG
      config.isHSPModuleDependent = true
      config.loadDynamicModule = ['@hzw/hara', 'harb', 'hspc']
      config.onDynamicLoadComplete = () => {
        console.log("已完成所有模块的加载")
      }
    })
5.使用

编辑器新建页面:NewPages.ets

手动添加页面则在entry--src--main--resoures--base--profile--main_pages.json 添加路径

代码如下:

复制代码
import { Route } from '@hzw/zrouter';

@Route({ name: "NewPages" })
@Entry
@Component
export struct NewPages {
  build() {
    NavDestination() {
      Text("NewPagesHelloWorld")
        .fontSize(50)
    }
    .height('100%')
    .width('100%')
  }
}

跳转:

2.封装

新建BaseRouter.ets 代码如下

复制代码
import { ZRouter } from '@hzw/zrouter';
import { OnPopCallback } from '@hzw/zrouter/src/main/ets/model/Model';

/**
 * 路由跳转
 */
export class BaseRouter {
  static readonly NewPages = "NewPages"

  /**
   * 页面跳转
   * BaseRouter.push(BaseRouter.WebViewPage, Object({title: "用户协议"}))
   */
  static push(name: string, params?: object, animated?: boolean, mode: LaunchMode = LaunchMode.STANDARD) {
    ZRouter.getInstance()
      .setLunchMode(mode)
      .setParam(params)
      .setAnimate(animated)
      .push(name)
  }

  //替换页面
  static replacePathByName(name: string, params?: object, animated?: boolean, mode: LaunchMode = LaunchMode.STANDARD) {
    ZRouter.replacePathByName(name, params, animated)
    ZRouter.getInstance().setLunchMode(mode).setParam(params).replace(name)
  }

  // 页面跳转带返回值
  public static pushForResult(name: string, param?: object, callback?: OnPopCallback) {
    ZRouter.pushForResult(name, param, callback)
  }

  //后退
  static back() {
    ZRouter.pop()
  }

  static clear() {
    ZRouter.clear()
  }

  //后退带返回值
  static backWithResult(params?: object) {
    ZRouter.popWithResult(params)
  }

  /**
   * 获取参数
   * @param key
   * @returns
   * 使用:BaseRouter.getParamName<string>("title") ?? ""
   */
  static getParamName<T>(key: string): T | undefined {
    let aa = ZRouter.getParam() as object
    if (aa) {
      return aa[key]
    }
    return undefined
  }
}

导出BaseRouter.ets

index.ets export { BaseRouter } from './src/main/ets/utils/BaseRouter'

1.修改index.ets

复制代码
import { ZRouter } from '@hzw/zrouter';
import { BaseRouter } from 'common';

@Entry
@Component
struct Index {
  build() {
    Navigation(ZRouter.getNavStack()) {
      Column() {
        Text("To NewPages")
          .fontSize(50).onClick(() => {
          BaseRouter.push(BaseRouter.NewPages, Object({
            title: "哈哈哈",
          }))
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

2.修改NewPages.ets

复制代码
import { Route } from '@hzw/zrouter';
import { BaseRouter } from 'common';

@Route({ name: BaseRouter.NewPages })
@Entry
@Component
export struct NewPages {
  @State title: string = '';

  aboutToAppear(): void {
  //获取传参
    this.title = BaseRouter.getParamName<string>("title") ?? ""
    console.log("title:"+this.title)
  }

  build() {
    NavDestination() {
      Text("NewPagesHelloWorld")
        .fontSize(50)
    }.title(this.title)
    .height('100%')
    .width('100%')
  }
}

3:点击text跳转

相关推荐
高心星11 小时前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用
别说我什么都不会11 小时前
【仓颉三方库】工具类—— compress4cj
harmonyos
别说我什么都不会11 小时前
【仓颉三方库】工具类—— uuid4cj
harmonyos
__Benco18 小时前
OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明
人工智能·harmonyos
NapleC1 天前
HarmonyOS:一多能力介绍:一次开发,多端部署
华为·harmonyos
我爱学习_zwj1 天前
【鸿蒙HarmonyOS】深入理解router与Navigation
华为·harmonyos
NapleC1 天前
HarmonyOS:1.7
harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师1 天前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei