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后生效

相关推荐
爱吃水蜜桃的奥特曼16 分钟前
玩Android Harmony next版,通过项目了解harmony项目快速搭建开发
android·harmonyos
鸿蒙小白龙1 小时前
openharmony之分布式购物车开发实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙1 小时前
openharmony之分布式相机开发:预览\拍照\编辑\同步\删除\分享教程
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
安卓开发者4 小时前
鸿蒙NEXT鼠标光标开发完全指南
华为·计算机外设·harmonyos
●VON9 小时前
重生之我在大学自学鸿蒙开发第九天-《分布式流转》
学习·华为·云原生·harmonyos·鸿蒙
Bert丶seven16 小时前
鸿蒙Harmony实战开发教学(No.7)-Image组件基础到进阶篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教学
Bert丶seven1 天前
鸿蒙Harmony实战开发教学(No.6)-Search组件基础到进阶篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教学
万少1 天前
HarmonyOS6 应用升级经验分享
harmonyos
蓝冰印1 天前
HarmonyOS Next 快速参考手册
linux·ubuntu·harmonyos