鸿蒙应用开发-我的第一个三方库

前言

  1. 鸿蒙应用使用ArkTS进行开发,ArtTS是基于TS进行扩展,添加一些类型限制,TS只是给JS添加了静态类型系统,最终编译完成的JS其实是把类型去掉了的
  2. 前端JS发展这么多年积累了很多非常好用的工具库,把这些工具库迁移到鸿蒙中会给我们开发带来很大的助力
  3. 鸿蒙三方库都是Har包,JS的工具库不能简单的迁移过来,需要做一些改动

准备工作

  1. 我们首先需要有一个鸿蒙三方库的账号,如果没有,进入这个地址进行注册 ohpm.openharmony.cn/#/cn/home
  2. 配置好访问三方库的公钥地址在这 ohpm.openharmony.cn/#/cn/person...
  3. 在个人中心添加你的公钥和获取发布码用于发布三方库到库中心

4. 在用户目录 ~/.ohpm/.ohpmrc里面配置好发布码和私钥路径

开发

说明

我的第一个库是基于 github.com/niksy/throt... v5.0.0版本 进行封装和完善的

js-e2e扫描三方库

鸿蒙是基于OpenHarmony开发的,框架中的API没有完全兼容V8运行时的内置API,我们需要使用js-e2e扫描三方库,检查是否存在node.js/web内置模块的依赖。

js-e2e工具是基于eslint进行封装,可分析出JS库代码对node.js/web浏览器的内置模块、对象的依赖及兼容ES标准版本,使用该工具,可以快速知道该库是否依赖node.js/web内置模块

步骤

下载库 git clone <git@gitee.com>:chenwenjiehw/js-e2e.git

进入下载仓库,安装依赖

执行 npm run mklink 安装输出文档的格式

执行 node checker.js -p throttle-debounce 检查npm包

创建Har包

创建一个空Ability的工程

在工程目录右键 新建→ 模块 或者 点击菜单栏文件 新建→ 模块,选择Static Library

将新建模块 src/main/ets/components删除,并且把Index.ets文件中的代码一并删除

将debounce和throttle代码拷贝到 src/main/ets目录下,当然如果你也可以自己定义一个lib目录,将代码拷贝进去

修改Index.ets代码,将必要的文件导出

在oh-package.json5中完善三方库信息,如名称、简介、版本、开源协议、作者、关键字等

在模块根目录添加CHANGELOG.md 版本变更记录、README.md 简介,安装方式等、LICENSE、example样例 等必要文件

将工程的构建模式修改为release

在工程目录中选中三方库名称,单击菜单栏中的Build > Make Module 'library'编译构建生成三方库HAR包,HAR包可在模块下的build目录下获取,包格式为*.har

验证功能

打开entry/oh-package.json5配置文件,在dependencies标签中引入@unravel/throttle-debounce三方库,并单击Sync Now进行同步 或者 打开终端执行 ohpm install命令

打开pages/Index.ets页面文件,引入并调用debounce和throttle方法进行限频

发布

打开菜单 视图->工具窗口→终端 打开终端应用

在终端 输入 ohpm publish har包的路径,发布到三方库

打开鸿蒙三方库中心仓的地址,切换到package。上面有审核状态等,后续关注信息就可以了 ohpm.openharmony.cn/#/cn/person...

搜索使用

打开三方库中心库 地址 ohpm.openharmony.cn/#/cn/home

在搜索框中输入我们发布成功的库 throttle_debounce就可以看到结果了

点击进去之后,可以查看具体的使用方式说明

参考资料

  1. JS开源库适配纯血鸿蒙 mp.weixin.qq.com/s/9qZWN6Y_R...
  2. 鸿蒙三方库中心仓 ohpm.openharmony.cn/#/cn/home
  3. 创建及发布三方库 ohpm.openharmony.cn/#/cn/help/c...
相关推荐
yaoyaoxingzhe16 分钟前
HarmonyOS应用《玄象》开发实战:Canvas 绘制星宿连线:moveTo / lineTo / stroke 路径绘制
harmonyos·鸿蒙
echohelloworld114 小时前
HarmonyOS应用开发实战:猫猫大作战-springMotion 三参数、responsiveSpringMotion 响应式弹簧、与 EaseO
harmonyos·鸿蒙
达子6667 小时前
第13章_HarmonyOs开发图解 视频
华为·音视频·harmonyos
fiona20267 小时前
HarmonyOS应用开发实战:猫猫大作战-如何精准设置缓存数量来平衡内存与滚动流畅度
harmonyos·鸿蒙
程序员黑豆8 小时前
鸿蒙应用开发之父子组件传参:@Prop 装饰器使用教程
前端·后端·harmonyos
FF2501_940228588 小时前
HarmonyOS应用《玄象》开发实战:宜忌标签云:ForEach + padding + borderRadius 的 chip 实现
harmonyos·鸿蒙
程序员黑豆8 小时前
鸿蒙应用开发之V2状态管理:@Local、@ObservedV2、@Trace 使用教程
前端·后端·harmonyos
LEO111109 小时前
HarmonyOS应用开发实战:猫猫大作战-onHover 触发时机、HoverType 类型判定、与 onTouch 的差异、TV/PC 场景应用四
harmonyos·鸿蒙
程序员黑豆9 小时前
鸿蒙应用开发之@State 装饰器详解:从基本类型到 @Observed/@ObjectLink/@Track 嵌套监听
前端·harmonyos