前言
- 鸿蒙应用使用ArkTS进行开发,ArtTS是基于TS进行扩展,添加一些类型限制,TS只是给JS添加了静态类型系统,最终编译完成的JS其实是把类型去掉了的
- 前端JS发展这么多年积累了很多非常好用的工具库,把这些工具库迁移到鸿蒙中会给我们开发带来很大的助力
- 鸿蒙三方库都是Har包,JS的工具库不能简单的迁移过来,需要做一些改动
准备工作
- 我们首先需要有一个鸿蒙三方库的账号,如果没有,进入这个地址进行注册 ohpm.openharmony.cn/#/cn/home
- 配置好访问三方库的公钥地址在这 ohpm.openharmony.cn/#/cn/person...
- 在个人中心添加你的公钥和获取发布码用于发布三方库到库中心
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.gi
t
进入下载仓库,安装依赖
执行 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就可以看到结果了
点击进去之后,可以查看具体的使用方式说明
参考资料
- JS开源库适配纯血鸿蒙 mp.weixin.qq.com/s/9qZWN6Y_R...
- 鸿蒙三方库中心仓 ohpm.openharmony.cn/#/cn/home
- 创建及发布三方库 ohpm.openharmony.cn/#/cn/help/c...