【鸿蒙开发实战】HarmonyOS开发中路由获取参数类型、lottie 动画组件

前言

今天下午2:30，HDC2024将正式召开，将为大家揭晓鸿蒙生态、HarmonyOS NEXT的最新进展，以及开发者朋友们最期待的、非常强大的开发工具和技术。

随着鸿蒙系统越来越火爆，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

今天也是写纯血鸿蒙的一天，记录下今日份编写的一些小技巧～

1、路由跳转获取参数

鸿蒙官方路由跳转，获取的参数是这样的：

 router.pushUrl({
  url: 'pages/Detail', // 目标url
  params: paramsInfo // 添加params属性，传递自定义参数
  })

class InfoTmp {
  age: number = 0
 }

class RouTmp {
  id: object = () => {
 }
  info: InfoTmp = new InfoTmp()
}

const params: RouTmp = router.getParams() as RouTmp

感觉使用起来很不得劲，又要声明类型，获取的时候还要还要转成对象。对于绝大部分业务来说，跳转携带的参数往往就一个 id、或者其他字段，这个时候每次这样感觉好麻烦。
所以在自己封装的 AppRouter中 封装了个获取函数:

class AppRouter {

  
    /**
     * 获取路由参数
     * @param key: 访问路径如: user.info.name
     * @returns
     */
    getParams<T>(key?: string): T {
      const params = router.getParams();
      if (key == null) {
        return params as T
      } else {
        return key.split(".").reduce((value, current) => value[current] as object, params as object) as T
      }
    }
  
  
  /** ... 一些其他和路由相关的封装函数，比如拦截之类的  **/
}

使用：
跳转时，正常传递数据。
ts复制代码router.pushUrl({
  // 目标url
  url: 'pages/PageCategoryList',
  params: {
    id: item.id,
    test: {
      test: {
        name: "你好"
      }
    }
  }
}, router.RouterMode.Single);

获取参数时:

const id: number = appRouter.getParams("id")
const test: string = appRouter.getParams("test.test")
const testName: string = appRouter.getParams("test.test.name")
console.log("@路由参数:", id, JSON.stringify(test), testName)

//打印：@路由参数: 48 {"name":"你好"} 你好

2、Lottie 组件封装

鸿蒙中使用 lottie需要使用第三方库.
gitee.com/openharmony…
该依赖中使用步骤是：

1.声明 CanvasContext, 创建 Canvas
2.使用 lottie 加载 lottie 文件，绑定 Canvas

看起来步骤很简单，实际上很多时候我们项目中使用 Lottie，只是类似加载个动图来用用，很多复杂的操作用不着～，这样来看，这一套步骤下来就怪复杂了。
那我们直接将其封装成一个小组件，像使用 Image 一样使用就好了。代码如下（该功能实现比较简单，毕竟项目用不到太复杂的功能）

import lottie, { AnimationItem } from '@ohos/lottie'

@Component
export struct LottieImage {
  @Require @Prop private path: string
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true) // 设置开启抗锯齿
  private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings) // 创建2D渲染上下文
  private animationItem?: AnimationItem

  aboutToAppear(): void {
    this.animationItem = lottie.loadAnimation({
      container: this.renderingContext, // 渲染上下文
      renderer: 'canvas', // 渲染方式
      loop: true, // 是否循环播放,默认true
      autoplay: true, // 是否自动播放，默认true
      contentMode: 'Contain', // 填充的模式
      frameRate: 30, //设置animator的刷帧率为30
      path: this.path, // json对象数据
    })
  }

  aboutToDisappear(): void {
    this.animationItem?.destroy()
  }

  build() {
    Canvas(this.renderingContext).width("100%").height("100%").onReady(() => {
      //抗锯齿的设置
      this.renderingContext.imageSmoothingEnabled = true;
      this.renderingContext.imageSmoothingQuality = 'medium'
    })
  }
}

封装后，使用如下:

LottieImage({ path: "common/lottie/ani_star_radiate.json" })
  .width(120)
  .height(120)

写在最后

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。

获取完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了

最新鸿蒙全栈开发学习线路

鸿蒙HarmonyOS开发教学视频

大厂面试真题

鸿蒙OpenHarmony源码剖析

这份资料能帮住各位小伙伴理清自己的学习思路，更加快捷有效的掌握鸿蒙开发的各种知识。有需要的小伙伴自行领取，，先到先得~无套路领取！！

获取这份完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）