HarmonyOS学习--三方库

文章目录

一、三方库获取

  1. 在Gitee网站中获取
    搜索OpenHarmony-TPC仓库,在tpc_resource中对三方库进行了资源汇总。
  2. 通过OpenHarmony三方库中心仓获取
    根据类型或者直接搜索寻找需要的三方库。

二、常用的三方库

1. UI库:

  • @ohos/textlayoutbuilder:可以定制任一样式的文本构建工具,包括字体间距、大小、颜色、富文本高亮显示等。
  • @ohos/roundedimageview:可以生成圆角矩形、或者椭圆形等图片形状。

2. 网络库:

  • @ohos/axios:可以运行在node.js 和浏览器中,基于Axios 原库v1.3.4版本进行适配,并沿用其现有用法和特性。

3. 动画库:

  • @ohos/lottie:可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画,并在移动设备上进行本地渲染。
  • @ohos/svg:可以解析SVG图片并渲染到页面上。

三、使用开源三方库

以lottie示例使用三方库

@ohos/lottie是基于lottie-web开发,集成在三方库社区内的开源版本,是HarmonyOS系统中复杂动画的一种解决方案。

1. 安装与卸载

  • 安装

    ohpm install @ohos/lottie

  • 卸载

    ohpm uninstall @ohos/lottie

安装完成后在根目录下的oh-package.json5中,可以找到lottie

2. 使用

  1. 引入lottie模块

    import lottie from '@ohos/lottie'

  2. 构建渲染上下文

    // 初始化渲染上下文
    private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
    private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

  3. 准备JSON文件

  4. 关联画布

    // 加载Canvas画布
    Canvas(this.renderingContext)

  5. 加载动画

    this.animateItem = lottie.loadAnimation({
    container: this.renderingContext,
    renderer: 'canvas',
    loop: 10,
    autoplay: true,
    name: this.animateName,
    path: 'common/lottie/data.json'
    });

  6. 控制动画

    lottie.play();

四、问题解决

1. zsh: command not found: ohpm

MacOS实用ohpm命令时报错 zsh: command not found: ohpm 的解决方法:

  1. 查询Ohpm路径

    /Users/xxx/Library/Huawei/ohpm

  2. 修改.bash_profile

    vim .bash_profile

将ohpm环境变量配置到文件中:

复制代码
# HUAWEI
export OHPM_HOME=/Users/xxx/Library/Huawei/ohpm 
export PATH=${PATH}:${OHPM_HOME}/bin
# HUAWEI END

并输入命令 source .bash_profile 使配置生效:

复制代码
source .bash_profile
  1. 如果退出后无效,把 bash shell 中.bash_profile 全部环境变量(也可以只复制暂时需要的环境变量)加入zsh shell里就可以。

    vim .zshrc
    sourch ~/.zshrc

  2. 重启DevEco Studio后生效

相关推荐
鸿蒙小白龙1 小时前
OpenHarmony蓝牙技术全解析:从设备发现到数据传输的完整流程
harmonyos·鸿蒙·鸿蒙系统·open harmony
shenshizhong3 小时前
鸿蒙HDF框架源码分析
前端·源码·harmonyos
宇宙最强的无天佛祖6 小时前
鸿蒙开发中快速获取相册图片的缩略图
harmonyos
冰冷的bin8 小时前
【Harmony】鸿蒙相机拍照使用简单示例
数码相机·华为·harmonyos
爱笑的眼睛1112 小时前
HarmonyOS RemoteWindow远程窗口组件的分布式能力深度解析
华为·harmonyos
爱笑的眼睛1117 小时前
HarmonyOS Badge徽标组件:深入消息提示的实现与优化
华为·harmonyos
爱笑的眼睛1119 小时前
HarmonyOS List组件性能优化:从基础到高级实践
华为·harmonyos
ifeng091820 小时前
HarmonyOS实战项目:打造智能家居控制中心(设备发现与控制)
wpf·智能家居·harmonyos
ifeng09181 天前
HarmonyOS分布式数据管理——跨设备数据同步实战
harmonyos
ifeng09181 天前
HarmonyOS实战项目:开发一个分布式新闻阅读客户端
分布式·wpf·harmonyos