HarmonyOS 实战：学会在鸿蒙中使用第三方 JavaScript 库（附完整 Demo）
摘要
在鸿蒙（HarmonyOS NEXT / ArkTS）开发中，我们大部分业务逻辑和 UI 都是用 ArkTS 写的。不过在做一些数据处理、网络请求、工具函数或者复杂算法时，完全没必要“重复造轮子”。这时候就可以直接引入 JavaScript 的第三方库。鸿蒙官方已经支持通过 ohpm（OpenHarmony Package Manager）来管理依赖，就像以前在 Node.js 里用 npm 一样，几乎无缝衔接。
引言
很多同学第一次写鸿蒙项目时，会觉得 ArkTS 和 JS 是两个“平行世界”。实际上，鸿蒙框架允许 ArkTS 和 JS 混合使用，你可以很轻松地在 ArkTS 组件里 import 第三方库，比如 lodash 做数组处理、axios 做 HTTP 请求，甚至还可以引入你以前写过的老 JS 工具文件。这样一来，鸿蒙的开发效率就能和 Web 开发一样爽。
如何在鸿蒙中引入第三方 JS 库
使用 ohpm 安装依赖
在项目根目录下执行：
ohpm install lodash axios
安装完成后，oh_modules 下会有对应的依赖包。
在 ArkTS 文件中直接使用
比如我们要在页面里用 lodash.shuffle() 打乱数组，并且用 axios 调接口：
// Index.ets
import _ from 'lodash'
import axios from 'axios'@Entry
@Component
struct Index {@State list: number[] = [1, 2, 3, 4, 5]@State joke: string = '点击按钮获取笑话'build() {Column({ space: 20 }) {Text('原始数组: ' + JSON.stringify(this.list))Text('打乱后: ' + JSON.stringify(_.shuffle(this.list)))Button('获取网络数据').onClick(() => {this.fetchJoke()})Text(this.joke).fontSize(16).lineHeight(24).padding(10)}.padding(20)}async fetchJoke() {try {let res = await axios.get('https://v2.jokeapi.dev/joke/Any?type=single')this.joke = res.data.joke} catch (err) {this.joke = '请求失败: ' + JSON.stringify(err)}}
}
运行效果：
- 页面初始显示原始数组和打乱后的数组。
- 点击按钮后，会调用
axios请求在线 API 并把笑话显示出来。
实际应用场景
数据处理场景：复杂数组和对象操作
假设你要在鸿蒙 App 里展示一个电商商品列表，需要做排序、去重和分组操作。手写逻辑很麻烦，用 lodash 就很轻松。
import _ from 'lodash'let products = [{ id: 1, category: '手机', price: 3999 },{ id: 2, category: '电脑', price: 6999 },{ id: 3, category: '手机', price: 1999 }
]// 按类别分组
let grouped = _.groupBy(products, 'category')
// 按价格排序
let sorted = _.sortBy(products, 'price')
在鸿蒙里渲染时就能直接绑定分组后的数据，逻辑简洁很多。
网络请求场景：统一接口调用
很多项目需要和后端 API 通信，ArkTS 自带 http 模块，但 axios 更加方便，比如拦截器、全局配置。
import axios from 'axios'// 全局配置
const api = axios.create({baseURL: 'https://api.example.com',timeout: 5000
})// 拦截器
api.interceptors.response.use(res => res.data,err => Promise.reject(err)
)// 调用接口
async function getUserInfo(userId: number) {return api.get(`/users/${userId}`)
}
这样封装后，在鸿蒙项目里随处调用 getUserInfo 即可。
本地工具库场景：复用老 JS 文件
如果你之前写过一些工具函数，比如日期格式化、加密解密，可以直接放在项目里：
entry/src/main/resources/rawfile/utils.js
然后在 ArkTS 文件里引入：
import { formatDate } from '../resources/rawfile/utils.js'let today = formatDate(new Date())
这种方式能避免重复写逻辑，直接把老项目里的 JS 文件“搬”过来用。
QA 环节
Q1：所有 npm 包都能直接用吗？
不完全。ArkTS 和 Node.js 运行环境不同，如果库依赖了 Node.js 的 fs、path 等模块，在鸿蒙里是跑不通的。大多数纯函数工具库（lodash、dayjs、axios）都能正常使用。
Q2：UI 组件库（比如 React、Vue 插件）能用吗？
不行。ArkTS 的 UI 渲染和 Web 完全不同，这类库没法直接跑。你只能用数据处理类库。
Q3：那什么时候应该用 JS 库，什么时候用 ArkTS？
UI 和系统 API 调用建议用 ArkTS；数据处理、网络请求、工具函数类逻辑，用 JS 库更合适。
总结
在鸿蒙项目中引入第三方 JavaScript 库非常简单：用 ohpm install 安装依赖，然后直接在 ArkTS 里 import 使用。适合的场景包括：复杂数据处理（lodash）、网络请求（axios）、以及复用本地 JS 工具文件。要注意的是，和 Node.js 环境强绑定的库不适合在鸿蒙中跑。
这样做的好处是开发效率更高，老代码能复用，鸿蒙应用的逻辑层更简洁。