为有牺牲多壮志,敢教日月换新天。

HarmonyOS:三方库的基本使用(1)

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ 
➤GitHub地址:https://github.com/strengthen
➤原文地址:https://www.cnblogs.com/strengthen/p/18504527
➤如果链接不是为敢技术的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

一、获取三方库
1、三方库是开发者对系统能力的封装和扩展,可以实现代码复用,提升开发效率。在进行HarmonyOS应用开发时,可以通过两种渠道获取开源第三方库:
(1)、通过Gitee社区的仓库。网址:
(2)、通过OpenHarmony三方库中心仓。网址:

2、三方库分类和概览:Gitee中收集了一些已经开源的三方库资源,每一种三方库都有其详细的使用说明,欢迎应用开发者参考和使用,同时也欢迎开发者贡献自己的开源组件库。这里列举部分三方库资源:

二、ohpm使用指导

OHPM CLI 作为鸿蒙生态三方库的包管理工具,支持OpenHarmony共享包的发布、安装和依赖管理。

如何安装

  1. 下载ohpm工具包,面向HarmonyOS 3.1/4.0及以下全场景多设备,点击链接获取:https://developer.huawei.com/consumer/cn/deveco-studio/archive/
  2. 下载HarmonyOS NEXT版本的ohpm工具包,选择ohpm-repo 5.0.7:https://developer.huawei.com/consumer/cn/download/
  3. 解压文件,进入“ohpm/bin”目录,打开命令行工具,执行如下指令初始化ohpm。
    Windows环境下执行:
    init.bat
    Linux/macOS环境下执行:
    ./init
  4. 将ohpm配置到环境变量中。安装完成之后,执行如下命令:
    • Windows环境变量设置方法:

      在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,将ohpm命令行工具的bin目录配置到系统或者用户的PATH变量中。

    • macOS环境变量设置方法:
      打开终端工具,执行以下命令。
      export OHPM_HOME=/home/xx/Downloads/ohpm  #本处路径请替换为ohpm的安装路径
      export PATH=${OHPM_HOME}/bin:${PATH}=
  5. 终端输入:若输出为版本号(如:0.7.1),则表示安装成功。

    ohpm -v

如何更改配置

用户级配置文件存放在C:/Users/用户名目录/.ohpm/.ohpmrc文件,显示默认配置,可执行如下命令:

ohpm config list -j

设置配置项,可执行如下命令:

ohpm config set key value

默认配置项如下所示:

配置项

字段名称

字段说明

字段类型

默认值

备注

仓库设置

registry

仓库地址

字符串

https://repo.harmonyos.com/ohpm/

可以配置多个仓库地址,多个仓库地址的优先级按照配置顺序排序。

@group:registry

指定仓库

字符串

""

根据 group 指定组织的仓库地址。支持多个仓库地址,且优先级大于 registry 配置,多个仓库地址的优先级按照配置顺序排序。

发布设置

publish_registry

发布仓库

字符串

https://repo.harmonyos.com/ohpm/

配置发布的仓库地址,仅支持配置一个仓库地址。

publish_id

用户发布号

字符串

""

用户发布号,用来发布鸿蒙生态三方库,全局唯一。

路径设置

cache

缓存路径

字符串

C:/Users/用户名目录/.ohpm/cache

-

key_path

私钥路径

字符串

""

利用ssh-keygen 工具生成的私钥的放置路径地址。

网络设置

 

no_proxy

不使用proxy代理

字符串

""

配置不使用代理的仓库地址,可配置多个,以英文逗号间隔;值可以是域名或者ip,支持二级域名通配符*(例如:*.huawei.com)。

http_proxy

http代理

字符串

""

支持用户名和密码的网络代理,示例:http://proxy_server:port。

https_proxy

https代理

字符串

""

支持用户名和密码的网络代理,示例:http://proxy_server:port。

strict_ssl

ssl校验

布尔

true

默认值为 true,校验 https 证书;若配置为 false,则不校验 https 证书。

ca_files

ca证书路径

字符串

""

strict_ssl=true时校验服务端证书需要的ca证书放置路径,可以放置多个证书路径,以英文逗号间隔。

fetch_timeout

请求超时时间

数值

60000

单位为毫秒。

其他设置

log_level

日志级别

字符串

info

可设置日志输出级别,对应级别类型有 debug、info、warn、error。

常用命令

命令类别

命令格式

含义说明

版本查询

ohpm -v 或 ohpm --version

查看ohpm-cli 版本号

帮助查询

ohpm help 或 ohpm -h 或 ohpm --help

查看命令帮助列表

创建

ohpm init

创建 oh-package.json5 文件

安装

 

 

ohpm install [[<@group>/]<pkg> [@<version>]] ...

安装指定版本的三方库,当未指定三方库名称时,会根据当前目录下oh-package.json5 定义的依赖关系进行全量安装

ohpm install <folder>

安装本地文件夹

ohpm install <tarball file>

安装压缩包

卸载

ohpm uninstall [<@group>/]<pkg> ...

卸载三方库

查看

ohpm list [[<@group>/]<pkg>[@<version>]]

列出已安装的三方库

查询

ohpm info [<@group>/]<pkg>[@<version>]

查询指定三方库的具体信息

设置ohpm配置项

 

 

 

ohpm config set key value

设置配置值,如服务器地址,网络代理

ohpm config delete key

删除配置

ohpm config get key

获取单个配置项

ohpm config list

获取所有的配置项列表

更新

ohpm update [[<@group>/]<pkg>] ...

更新三方库

发布

ohpm publish [<folder> | <tarball file>]

发布三方库

下架

ohpm unpublish [<@group>]<pkg>[@<version>]

下架已发布的三方库

校验仓库地址

ohpm ping

校验仓库地址是否有效

更多命令使用以及命令支持的配置项,请参阅ohpm-clihttps://ohpm.openharmony.cn/#/cn/help/ohpmrc

三、使用三方库举例

1、ohpm-repo是一个搭建轻量级的HarmonyOS三方库私有仓服务的工具。它与ohpm包管理器兼容,用来存储和管理您独有的三方库,以保证这些三方包的私有性。同时,便于这些三方库能在开发团队内部共享复用,从而提升团队的开发效率。
(1)、ohpm使用指导:
(3)、下载HarmonyOS NEXT版本的开发工具,选择ohpm-repo 5.0.7:
2、本文以lottie这个三方库为例,介绍如何使用ohpm下载、安装并使用这个三方库。
@ohos/lottie介绍:是一个动画库,它可以解析Adobe After Effects软件通过Bodymovin插件导出的JSON格式的动画,并在移动设备上进行本地渲染。即美工设计师做了一个动画JSON文件,可以使用lottie进行一个渲染,就可以实现一个炫酷的动画效果。

3、@ohos/lottie的基本使用:

(1)、 下载和安装@ohos/lottie:使用ohpm包管理工具,下载和安装@ohos/lottie。

(2)、 @ohos/lottie具体使用:阅读三方库的指导文档,引用三方库,按指导文档步骤。

 4、具体操作:

(1)、确定已经安装了ohpm,在终端输入:

ohpm -v

显示ohpm的版本则可以确定ohpm已经安装且环境变量配置正确。

(2)、终端输入将lottie三方库下载下来,当然可以在项目根目录直接安装。但是更推荐的方式是在具体使用的模块根目录去安装。可以在IDE的控制台中跳转到指定模块。如entry模块,然后在终端输入:ohpm会自动帮你下载这个包。

ohpm install @ohos/lottie

(3)、安装完成后,可以在oh-package.json5配置文件中,找到lottie的配置信息和对应的版本号,也可以在项目模块的包管理目录下,找到这个包的存放位置,这样就成功地将lottie导入到了项目模块中。

(4)、阅读lottie的详细使用指导文档
四、引入@ohos/lottie流程:
@ohos/lottie原理概述:实际上就是将AE软件导出的JSON文件,转换为一个动画,并在屏幕上进行显示。要实现这样一个流程,需要传入两个重要参数:
数据源:美工设计师给到的JSON文件。
渲染器:HarmonyOS提供的Canvas画布组件。
lottie在其中所起的作用就类似翻译过程,把JSON转换为渲染器可以识别的内容,利用Canvas画布组件,就可以将JSON文件中的动画效果绘制到页面上进行显示。

具体代码实现过程:
1、构建渲染上下文:导入依赖模块后,需要构建一个渲染上下文对象,renderingContext就是构建的上下文对象,其中renderingSettings是入参。

2、准备JSON文件:这个JSON文件就是动画的数据源。根据其描述的点坐标和具体行为,在Canvas画布上绘制一个闪烁的五角星动画。

3、关联画布:将第1步创建的上下文对象和画布进行关联,这里是将上下文对象renderingContext传入Canvas画布中。这里还要给画布设置一个初始图片背景。

4、加载动画:完成上述操作后,就可以进行动画的加载。这里需要传入三个参数。
(1)、container:上下文对象,传入的是renderingContext,将其与Canvas画布关联。
(2)、render:渲染方式,传入的是canvas画布方式。
(3)、path:JSON文件路径,
还有一些可选参数:loop、autoplay等。

5、控制动画:lottie还提供了很多接口,方便开发者对动画进行控制。

五、代码实操:

三方库资源汇总:https://gitee.com/openharmony-tpc/tpc_resource

OpenHarmony三方库中心仓:https://ohpm.openharmony.cn

@ohos/lottie的使用:https://gitee.com/openharmony-tpc/lottieETS

(1)、首先,entry模块等oh-packgage.json5文件中,可以查看引入的lottie版本:
{
  "license": "",
  "devDependencies": {},
  "author": "",
  "name": "entry",
  "description": "Please describe the basic information.",
  "main": "",
  "version": "1.0.0",
  "dependencies": {
    "@ohos/lottie": "2.0.0",
    "@ohos/library": "file:../library"
  }
}

(2)、导入库:

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

(3)、构建上下文对象renderingContext,其中renderingSettings作为其入参:

  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

(4)、将创建的上下文对象和画布进行关联:

Canvas(this.renderingContext)
          .width(CommonConstants.CONTAINER_WIDTH)
          .aspectRatio(CommonConstants.ASPECT_RATIO_176)
          .backgroundImage($r('app.media.canvasBg'))
          .backgroundImageSize(ImageSize.Cover)
          .onDisAppear(() => {
            lottie.destroy(this.animateName);
          })

(5)、关联之后,就可以进行动画的加载,主要需要传入三个参数:上下文对象container、渲染方式renderer、JSON文件路径path。

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

(6)、最后,可以使用lottie的API控制动画的播放与暂停。

lottie.play();
lottie.pause();

源码下载:ThirdPartyLibrary.zip

posted @ 2024-10-26 21:13  为敢技术  阅读(0)  评论(0编辑  收藏  举报