自力更生!uniapp 使用鸿蒙 UTS 使用三方依赖、本地依赖

介绍

在鸿蒙应用开发过程中,合理使用第三方依赖和本地依赖是提升开发效率的关键。本文将详细介绍如何在UTS插件中集成不同类型的依赖资源。

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

接入三方依赖

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

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

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文件内可以配置依赖使用鸿蒙的三方库

代码填写下面方案:

json 复制代码
{
   "dependencies": {
     "@pura/harmony-utils":"1.3.6"
   }
}

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

3. 调用方法

在 index.uts 中添加下面逻辑

ts 复制代码
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 调用下面逻辑即可

html 复制代码
<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,配置相对路径。

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 以实际为准
ts 复制代码
import { add } from 'locallib'

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

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

html 复制代码
<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 等文件。

相关推荐
Q_Q5110082852 小时前
python+uniapp基于微信小程序美食点餐系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916008893 小时前
iOS 26 软件性能测试全流程,启动渲染资源压力对比与优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
程序员潘Sir3 小时前
使用Tabs选项卡组件快速搭建鸿蒙APP框架
harmonyos·鸿蒙
00后程序员张3 小时前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone
2501_915106324 小时前
iOS 可分发是已经上架了吗?深入解析应用分发状态、ipa 文件上传、TestFlight 测试与 App Store 审核流程
android·ios·小程序·https·uni-app·iphone·webview
编程乐学4 小时前
鸿蒙原创--DevEco Studio开发的音乐播放器App
华为·harmonyos·音乐播放器·deveco studio·大作业·鸿蒙大作业
2501_9160074713 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
Q_Q51100828513 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
性野喜悲13 小时前
uniapp+<script setup lang=“ts“>解析后端返回的图片流并将二维码展示在页面中
uni-app