鸿蒙 UTS 插件使用三方依赖、本地依赖

鸿蒙 UTS 插件使用三方依赖

在鸿蒙开发中市场需要使用三方依赖，可能是三方包，可能是一个本地 har 包，这里介绍如何接入。

接入三方依赖

这里举例 https://ohpm.openharmony.cn/ 最受欢迎的三方库 @pura/harmony-utils 。这个库，提供了众多方法，可以加速功能开发。

更新：为了辅助说明，这里提供了 uts 源码，可对比参考 https://ext.dcloud.net.cn/plugin?id=24849

harmony-utils 一款功能丰富且极易上手的HarmonyOS工具库，借助众多实用工具类，致力于助力开发者迅速构建鸿蒙应用。其封装的工具涵盖了APP、设备、屏幕、授权、通知、线程间通信、弹框、吐司、生物认证、用户首选项、拍照、相册、扫码、文件、日志，异常捕获、字符、字符串、数字、集合、日期、随机、base64、加密、解密、JSON等一系列的功能和操作，能够满足各种不同的开发需求。

从原生鸿蒙角度开发，使用这个工具库，需要两个步骤

• 安装依赖
• 调用方法

在 UTS 中使用这个工具库，需要三个步骤

• 创建 UTS 插件
• 引用依赖
• 调用方法

下面介绍具体步骤

假设我们希望通过 harmony-utils 获取当前的工具包名。调用的是 AppUtil.getBundleName

1. 创建 UTS 插件

在 HBuilderX 中操作。首先创建 uni_modules 功能，如果当前目录中没有对应文件夹，可在项目文件夹节点单击右键选择 新建 uni_modules 目录

这会创建 uni_moduels 文件夹，在这个文件夹上单击右键。

在新窗口中选择 UTS 插件-API 插件，点击创建。

假定插件的 ID 是 invoke-utils，找到这个文件夹，观察是否存在对应的文件，如果没有就创建 uni_modules/invoke-utils/utssdk/app-harmony/index.uts 。

这样插件就创建好了。这部分可参考 UTS 插件介绍 和 原生混编 做进一步了解。

2. 安装依赖

创建 uni_modules/invoke-utils/utssdk/app-harmony/config.json，添加依赖。可参考文档 配置uts插件依赖。

鸿蒙的库管理工具是ohpm。类似于js的npm，Android的仓储。鸿蒙的三方sdk封装文件为.har，类似于Android的.aar
uts插件的utssdk/app-harmony/config.json文件内可以配置依赖使用鸿蒙的三方库

代码填写下面方案：

{  
   "dependencies": {  
     "@pura/harmony-utils":"1.3.6"  
   }  
}

接下来准备使用依赖功能。

3. 调用方法

在 index.uts 中添加下面逻辑

import { AppUtil } from '@pura/harmony-utils'  

UTSHarmony.onAppAbilityCreate(() => {  
  const abilityCtx = UTSHarmony.getUIAbilityContext();  
  const ctx = abilityCtx  
  AppUtil.init(ctx);  
})  

export const getAppId = () => {  
  let bundleName = AppUtil.getBundleName();  
  return bundleName  
}

在原始文档中要求在 AbilityCreate 中初始化，这里可以使用 UTSHarmony.onAppAbilityCreate 来实现初始化。

和 TS 代码类似，调用了提供的方法，返回了具体数据。

在实际的 Vue 逻辑中，比如 button 通过 click 调用下面逻辑即可

<script setup>  
  import { getAppId } from '@/uni_modules/invoke-utils'  
  function openTest() {  
    const res = getAppId()  
    console.log('获取应用ID：', res)  
  }  
</script>

调用此方法，观察控制台，可以看到包名。这说明工具调用成功。

接入 har 依赖

接入 har 依赖。如何制作 har 依赖，在下面单独说明。

假定已经得到了一个 localLib.har 文件。放置 har 文件在 uts 插件内，比如在 index.uts 的同级目录， libs/localLib.har 路径。

修改 config.json，配置相对路径。

{  
  "dependencies": {  
    "locallib": "./libs/localLib.har"  
  }  
}

在 index.uts 中引用和导出。

注意：这里提到的 locaLib 名称不是随便起的，类似于 npm 的 packages.json 依赖， "vue":"3.4" ，这里的 vue 要和实际安装的包名要一致。

包名和导出的内容如何知晓？把 har 包改成 zip 并解压，得到产物。有两个文件需要注意

• oh-package.json 里面的 name 是包的名字，可以复制出来，不要随意写成 localib 以实际为准
• 包导出的内容可以在 index.d.ts 中查看，看具体 export 的内容是什么，不要随意写成 add 以实际为准

import { add } from 'locallib'  

export const addFun = (a:number, b:number):number => {  
  return add(a, b)  
}

在页面中引入这个 uts 插件并使用即可。

<script setup>  
  import { addFun} from '@/uni_modules/otto-thirdhar'  
  function openTest() {  
    console.log(addFun(3,4))  
  }  
</script>

执行这个方法，顺利的话可以看到控制台打印数字 7.

注意事项：

• 引入 har 可能有版本兼容性要求，可在 harmony-configs/build-profile.json5 内修改 compatibleSdkVersion
• har 可能构建内容有误，实际运行不正常，可在原生工程项目中自测，排除 har 文件内部问题

如何构建 har 模块

在 DevEco 中打开一个项目，选择 文件 - 新建 - 模块 - Static Library，定义模块名选择创建。

在创建的文件中选择 index.ets 找到模块入口，可导出组件、方法。

在 DevEco 中选择 构建（在重构和运行中间） - 构建模块（第一个选项），等待编译结束，观察模块目录中的 build/default/outputs/default 找到 har 文件。

har 文件本身是一个压缩文件，可自行拆包了解结构，内部存在方法 d.ets 等文件。