UTS 插件在前端的引入与使用指南

最新推荐文章于 2025-10-20 11:26:13 发布

原创最新推荐文章于 2025-10-20 11:26:13 发布 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端

小白学鸿蒙专栏收录该内容

17 篇文章

订阅专栏

UTS 插件在前端的引入与使用指南

UTS 插件是 uni-app 生态中强大的跨平台能力扩展工具，它允许开发者使用统一的语法编写原生功能模块，同时支持 uni-app 和 uni-app X 框架。本文将详细介绍前端如何引用和使用 UTS 插件，以及插件间相互调用的方法。

前端引用 UTS 插件的两种方式

UTS 插件虽然使用 UTS 语法开发，但前端引用时并不局限于 UTS 语法，普通 JavaScript 同样可以轻松引用和调用。这也是 UTS 插件能够同时支持多种框架的核心优势。

1. 泛型引用方式

泛型引用是将整个 UTS 插件作为一个对象导入，然后通过点运算符调用其方法或属性。这种方式适合需要使用插件中多个功能的场景。

// 导入整个插件，命名为 UTSBattery
import * as UTSBattery from "@/uni_modules/uts-battery";

// 调用插件方法获取电池电量
UTSBattery.getBatteryCapacity().then(capacity => {
  console.log(`当前电池电量: ${capacity}%`);
});

注意事项：

导入路径必须指向插件的根目录（@/uni_modules/插件名）
不能直接指向具体的 UTS 文件（如 index.uts）
推荐使用插件的原始名称作为导入别名，提高代码可读性

2. 显性引用方式

显性引用是只导入插件中需要使用的特定方法或属性，这种方式可以减少代码体积，提高运行效率。

// 只导入需要使用的方法
import { getBatteryCapacity, isCharging } from "@/uni_modules/uts-battery";

// 直接调用导入的方法
getBatteryCapacity().then(capacity => {
  console.log(`当前电池电量: ${capacity}%`);
});

// 调用另一个导入的方法
isCharging().then(charging => {
  console.log(`设备是否在充电: ${charging}`);
});

优势：

代码更简洁，只引入必要功能
避免命名冲突
提高代码可维护性

电量管理插件示例

为了帮助理解，推荐大家体验插件市场上的电池电量管理插件，它不仅支持 Android、iOS、鸿蒙等原生平台，还同时支持 Web 和小程序平台，是学习 UTS 插件引用的理想示例。

当然也可以体验我们开发的这几个插件。

nutpi-idcard：用于解析身份证号码，提取其中的关键信息，如地区、出生日期、性别等。支持中国居民身份证、港澳台居民居住证以及外国人永久居留身份证的插件。插件地址：https://ext.dcloud.net.cn/plugin?id=23728，仓库地址：https://gitcode.com/nutpi/uni-idcard。
nutpi-chinese-number-format：一个功能强大的中文数字格式化 UTS 插件，支持数字与中文之间的双向转换，适用于 uni-app 和 uni-app x 项目。插件地址：https://ext.dcloud.net.cn/plugin?id=23776，仓库地址：https://gitcode.com/nutpi/uni-chinese-number-format/。
nutpi-utils：支持鸿蒙的拨打电话，发短信、退出应用、电量获取等功能。插件地址：https://ext.dcloud.net.cn/plugin?id=22525，仓库地址：https://gitcode.com/nutpi/uni-utils。
calendar中国传统日历：nutpi-calendar 是一个功能强大的 UTS 插件，用于处理公历和农历之间的转换，获取节日信息、节气、生肖、干支纪年等中国传统日历相关功能。插件地址：https://ext.dcloud.net.cn/plugin?id=23786，仓库地址：https://gitcode.com/nutpi/uni-calendar。

更多开发示例和最佳实践，可以参考 HelloUTS 项目。

UTS 插件间的相互调用

UTS 插件不仅可以在页面中使用，还支持在 uni_modules 目录下的其他插件中相互调用，这为构建复杂的插件生态提供了可能。

调用方法示例

假设 uni_modules 目录下有两个插件：uts-utils 和 uts-core，我们可以在 uts-utils 中调用 uts-core 的功能：

// uts-utils 插件中引用 uts-core 插件的方法
import { formatDate, validateEmail } from '@/uni_modules/uts-core';

// 在 uts-utils 中使用导入的方法
export function processUserData(userData) {
  // 验证邮箱
  const isValid = validateEmail(userData.email);
  // 格式化日期
  const formattedDate = formatDate(userData.createdAt);
  
  return { ...userData, isValid, formattedDate };
}

注意事项

依赖声明：需要在调用方插件的 package.json 中声明对被调用插件的依赖

{
  "name": "uts-utils",
  "version": "1.0.0",
  "uni_modules": {
    "dependencies": ["uts-core"],
  }
}

路径规范：必须使用绝对路径导入，不能使用相对路径

// 正确：使用绝对路径
import { formatDate } from '@/uni_modules/uts-core';

// 错误：使用相对路径
import { formatDate } from '../../uni_modules/uts-core';

关于 package.json 的更多配置信息，请参考 uni_modules 文档。

总结

UTS 插件为前端开发者提供了强大的原生能力扩展方式，通过合理使用泛型引用和显性引用，以及正确配置插件间的依赖关系，开发者可以充分利用 UTS 插件的跨平台优势，构建功能丰富、性能卓越的应用。