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

相关推荐
HarmonyOS_SDK5 小时前
Account Kit(华为账号服务)再进化,开发者接入效率飙升!
harmonyos
whysqwhw12 小时前
鸿蒙 任意类型转字符串
harmonyos
程序员潘Sir13 小时前
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
harmonyos·鸿蒙
高心星1 天前
鸿蒙5.0应用开发——V2装饰器@Provider和@Consumer的使用
harmonyos
ChinaDragon1 天前
HarmonyOS:ArkTS卡片页面刷新
harmonyos
HMSCore1 天前
通知语音播报功能,解锁全新体验
harmonyos
HarmonyOS_SDK1 天前
通知语音播报功能,解锁全新体验
harmonyos
高心星1 天前
鸿蒙5.0应用开发——V2装饰器@ObservedV2和@Trace的使用
harmonyos