HarmonyOS基础(七)- 详细剖析鸿蒙引入第三方库案例篇(1)

这篇具有很好参考价值的文章主要介绍了HarmonyOS基础(七)- 详细剖析鸿蒙引入第三方库案例篇(1)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好!我是黑臂麒麟(起名原因:一个出生全右臂自带纹身的高质量程序员😏),也是一位6+(约2个半坤年)的前端;
学习如像练武功一样,理论和实践要相结合,学一门只是也是一样;
这里会用两周的时间把所学的常用ArkUI基础的常用组件输出在网;
如需深究可前往高级ArkTS系列课程;
望对学习鸿蒙小伙伴有所帮助;

前言

刚刷完codelabs的引入第三方库的案例,目前引入方式是使用根据npm改造的鸿蒙自己ohpm。目前只能使用OpenHarmony三方库中心。三方库中心的目前不多。还处于开始阶段,后续开发后需要更多开发者贡献。现在常用的三方库可以分为UI、动画、网络、图片、多媒体、数据存储、安全、工具等。

这里记录两种方式:

  • 创建本地项目库方法
  • 使用第三方库方法,这里我们使用@ohos/lottie@ohos/axios常用库;

创建本地库

本地库主要是指未上架到ohpm中心且在项目组内共享使用的库文件,这类库需要开发者在项目中创建并开发新的Library模块,创建步骤如下:

  • 鼠标移到工程目录顶部,单击鼠标右键,选择New>Module。
    鸿蒙os第三方库,HarmonyOS基础,harmonyos,华为

  • Choose Your Ability Template界面中,选择Static Library,并单击Next。
    鸿蒙os第三方库,HarmonyOS基础,harmonyos,华为

  • Configure the New Module界面中,设置新添加的模块信息,设置完成后,单击Finish完成创建。

    • Module name:新增模块的名称。
    • Language:选择开发HarmonyOS ohpm包的语言。
    • Device type:选择HarmonyOS ohpm包支持的设备类型。
    • Enable Native:是否创建一个用于调用C++代码的HarmonyOS ohpm共享模块。
      鸿蒙os第三方库,HarmonyOS基础,harmonyos,华为
  • 创建完成后,会在工程目录中生成HarmonyOS ohpm共享模块及相关文件。
    鸿蒙os第三方库,HarmonyOS基础,harmonyos,华为

引入本地库

两种方式:

  • 方式一:在Terminal窗口中,执行如下命令进行安装,并会在oh-package.json5中自动添加依赖。
ohpm install ../library 

鸿蒙os第三方库,HarmonyOS基础,harmonyos,华为

  • 方式二:在工程的oh-package.json5中设置HarmonyOS ohpm三方包依赖,配置示例如下:
"dependencies": {

"@ohos/library": "file:../library"

}

手动编写依赖设置完成后,执行ohpm install命令安装依赖包,依赖包会存储在工程的oh_modules目录下,这个跟我们前端拉新项目下来安装依赖包相似
下面是本地库NewButton代码:

import ButtonViewModel from '../../viewmodel/ButtonsViewModel';
@Component
export struct Buttons {
  @Prop buttonText: string;
  @Prop stateEffect: boolean;
  @Prop buttonShape: string;
  @Prop buttonType: string;
  @Prop fontColor: string;

  build() {
    Row() {
      Column() {
        Button({
          type: ButtonViewModel.fetchType(this.buttonShape),
          stateEffect: this.stateEffect
        }) {
          Text(this.buttonText)
            .fontSize('16vp')
            .fontColor(this.fontColor || '#FFFFFF')
        }
        .width('100vp')
        .height('35vp')
        .backgroundColor(ButtonViewModel.fetchBackgroundColor(this.buttonType))
      }
    }
  }
}

在完成上述步骤后,我们继续完成inner页面的开发,在inner页面中我们通过import的方式引入开发的本地库,并通过循环传入不同的参数展示不同的button。

import { Buttons } from '@ohos/library';
import InnerViewModel from '../viewmodel/InnerViewModel';
import { ButtonList } from '../viewModel/ButtonList';

@Component export struct Inner {
  @State buttonList: ButtonList[] = InnerViewModel.getButtonListData();
  scroller: Scroller = new Scroller();

  build(){
    Scroll(this.scroller) {
      Column({ space: 12 }) {
        ForEach(this.buttonList, (item: ButtonList) => {
          Column() {
            Flex({
              direction: FlexDirection.Column,
              justifyContent: FlexAlign.SpaceBetween,
              alignItems: ItemAlign.Start
            }){
			  ...
              Column() {
                Buttons({
                  buttonText: item.buttonText,
                  buttonShape: item.buttonShape,
                  buttonType: item.buttonType,
                  stateEffect: item.stateEffect,
                  fontColor: item.fontColor
                })
                  .alignSelf(ItemAlign.Center)
                  .margin({ bottom: '21vp' })
              }
              ...
            }
        })
      }
      ...
    }
    ...
  }
}

鸿蒙os第三方库,HarmonyOS基础,harmonyos,华为

社区库调用

社区库是指已经由贡献者上架到ohpm中心供其他开发者下载使用的库,调用这类库的方法如下:
通过如下两种方式设置HarmonyOS ohpm三方包依赖信息,这里推荐第一种。前端也是常用第一种方式。(下面步骤以@ohos/lottie三方库为例,其他库替换对应库的名字及版本号即可):

  • 方式一:在Terminal窗口中,执行如下命令安装HarmonyOS ohpm三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
ohpm install @ohos/lottie
  • 方式二:在工程的oh-package.json5中设置HarmonyOS ohpm三方包依赖,配置示例如下:
"dependencies": {

        "@ohos/lottie": "^2.0.0"

}

跟上面一样,需要执行ohpm install命令安装依赖包,依赖包会存储在工程的oh_modules目录下。

在完成上述步骤后,我们继续完成outer页面的开发,在outer页面中我们通过import的方式引入配置的社区库,并实现对社区库动画的调用。

import lottie, { AnimationItem } from '@ohos/lottie';
import Logger from '../common/utils/log/Logger';

@Component
export struct Outer {
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
  private animateName: string = 'data';
  private animateItem: AnimationItem | null = null;
  @State canvasTitle: string | undefined = undefined;


  build(){
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.SpaceBetween
    }){
      Column(){
        Canvas(this.renderingContext)
          .width('100%')
          .aspectRatio(1.76)
          .backgroundImage($r('app.media.canvasBg'))
          .backgroundImageSize(ImageSize.Cover)
          .onDisAppear(() => {
            lottie.destroy(this.animateName);
          })
        Text(this.canvasTitle)
          .width('100%')
          .fontSize('14fp')
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
          .fontColor('#182431')
          .opacity(0.4)
      }
      .margin({
        top: '10vp',
        left: '10vp',
        right: '10vp'
      })

      Column({ space: 12 }){
        Button(){
          Text('加载动画')
            .fontSize('16fp')
            .fontColor('#007DFF')
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('41vp')
        .backgroundColor('#dedbdb')
        .onClick(() => {
          if (this.animateItem != null) {
            this.animateItem.destroy();
            this.animateItem = null;
          }

          this.canvasTitle = '加载动画';

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

        Button() {
          Text('结束并回到第0帧')
            .fontSize('16fp')
            .fontColor('#007DFF')
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('40vp')
        .backgroundColor('#dedbdb')
        .onClick(() => {
          if (this.animateItem === null) return;
          this.canvasTitle = '结束并回到第0帧';
          this.animateItem.goToAndPlay(0, true);
        })

        Flex({ justifyContent: FlexAlign.SpaceBetween }){
          Button(){
            Text('播放')
              .fontSize('16fp')
              .fontColor('#007DFF')
              .fontWeight(FontWeight.Bold)
          }
          .width('49%')
          .height('40vp')
          .backgroundColor('#dedbdb')
          .onClick( () => {
            if (this.animateItem === null) return;
            this.canvasTitle = '播放'
            lottie.play();
          })

          Button() {
            Text('暂停')
              .fontSize('16fp')
              .fontColor('#007DFF')
              .fontWeight(FontWeight.Bold)
          }
          .width('49%')
          .height('40vp')
          .backgroundColor('#dedbdb')
          .onClick(() => {
            if (this.animateItem === null) return;
            this.canvasTitle = '暂停';
            lottie.pause();
          })
        }
      }
      .padding({
        left: '23vp',
        right: '23vp',
        bottom: '41vp'
      })
    }
    .height('100%')
  }
}

鸿蒙os第三方库,HarmonyOS基础,harmonyos,华为

总结

这里介绍了本地库使用、远程第三方库引入;
本地库或者远程第三方库,都需要ohpm引入到oh-package.json5中才能使用;
我是前端,喜欢用ohpm直接导入。如需要手动导入可以选择第二种;

结语

本篇文章的内容结束了。文章有不对或不完整的地方,望多指点;
望更多小伙伴们加入harmonyOS开发大家庭,壮大生态圈,让鸿蒙更好,让国产手机(物联网)系统更强大。
如对你学习有所帮助,希望可爱你动动小手,关注、点赞、收藏;文章来源地址https://www.toymoban.com/news/detail-855866.html

到了这里,关于HarmonyOS基础(七)- 详细剖析鸿蒙引入第三方库案例篇(1)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 引入第三方字体库 第三方字体库Google Fonts

    googlefonts官方网站 googlefonts中国网站 本人是在微信小程序中引入 在static中建一个文件夹font-family 例如字体链接:https://fonts.font.im/css?family=Kirang+Haerang 将该链接的返回的资源的复制到css文件中 font-family.css main.js引入 微信小程序不校验合法域名就能看到结果

    2024年02月16日
    浏览(52)
  • 鸿蒙加载第三方动态链接库(.so)文件

    在没有正确引用so文件情况下会报出上述错误,正确姿势应该如下 在Android的写法是在main目录下创建jniLibs,然后.so文件复制进去即可,但是在鸿蒙里面要在libs/内放置arm64-v8a和armeabi-v7a两个文件夹的so文件,然后在build.gradle文件 加多一个.so的描述 即可使用

    2024年02月13日
    浏览(34)
  • python学习-第三方库的引入

    目录 前言: 第三方库的三种引入方式:  1、使用pip+cmd引入第三方库  2、使用pycharm引入第三方库  3、使用轮子.whl文件进行离线安装 扩展知识-永久更改第三方库下载源         在Python语言的库中,分为Python标准库和Python的第三方库。python的标准库是随着pyhon安装的时候

    2024年02月05日
    浏览(67)
  • Vue 项目中引入本地第三方 JS 库

    ESLint 语法检测会报错: \\\'$\\\' is not define   ESLint 语法检测不会报错   ESLint 语法检测不会报错   ESLint 语法检测会报错: \\\'$\\\' is not define 项目开启了 ESLint 语法检测的话,会报一个 error : \\\'$\\\' is not defined。 1、在每一个使用 $ 的代码行上 加  /* eslint-disable */  ,忽略该报错。 2、在根

    2024年02月04日
    浏览(71)
  • uniapp微信小程序引入第三方广告插件

      以Slime广告插件为例。 一、微信小程序后台申请相关插件   二、manifest.json文件 三、pages.json文件 四、要使用该插件的vue页面 引用插件后就可以使用插件的相关方法。 附:Slime插件文档 Slime | 小程序插件 | 微信公众平台

    2024年02月11日
    浏览(67)
  • Flutter插件引入第三方jar包之armeabi

    然而我们这个相机厂商只提供 armeabi 架构的包 由于测试机是v8a的架构,而且flutter经过多个版本更新后,不能直接flutter run的时候指定平台架构为32位的,则 无法调用到so文件 ,所以有不小的麻烦。这先按下不表。 首先还是在 plugin/android 的目录新建一个 libs 文件夹,然后将

    2024年04月16日
    浏览(41)
  • 引入供应链安全来保护第三方代码元素

    应用程序安全测试解决方案 DerScanner 添加了一项新功能,允许用户验证应用程序代码中的第三方元素。 开源软件供应链攻击事件一年内增加两倍,网络威胁呈升级趋势。第三方组件的统计数据令人震惊,约占平均应用程序代码量的 80%,使这些组件成为一个重大的网络安全问

    2024年01月19日
    浏览(38)
  • 鸿蒙Native输出so动态库,并提供给第三方导入使用

    DevEco Studio版本:4.0.0.600 API:9 最近在学习鸿蒙的Native输出so动态库,下面就给大家分享下我的学习心得及在实现过程中遇到的问题。 实现需求:通过so库输出文本内容 “你好,鸿蒙!” 参考资料: OpenHarmony Native API 1、创建Native工程 File--New--create Project,选择Native C++项目 正常

    2024年04月10日
    浏览(36)
  • 【Maven】maven引入第三方jar包并打包

    idea中的springboot项目引用第三方jar包,打包时将其引入 本文参照官网:http://maven.apache.org/ 第一种:在pom文件引入jar包的目录 1.选择File下的project Structure 2.选择Module,选择项目模块,选择Dependencies下的加号:点击JARs or Directories…: 3.选择你jar包所在的位置,点击OK,点击Apply,此时已

    2024年02月16日
    浏览(54)
  • 安卓APP引入第三方SDK如何做安全检测?

    最近听说好多App都被下架处理了,隐私合规管理特别严格。隔壁王老板公司旗下的一款App就被通报了,说是嵌入的第三方SDK违规收集用户个人信息。 还记得,在2021年的315晚会,上海、北京有几家公司都被报道,其SDK均在未经用户授权,窃取用户个人信息。涉案App有 50多款,

    2024年02月05日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包