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 安装依赖

在项目根目录下执行：

bash 复制代码

ohpm install lodash axios

安装完成后，oh_modules 下会有对应的依赖包。

在 ArkTS 文件中直接使用

比如我们要在页面里用 lodash.shuffle() 打乱数组，并且用 axios 调接口：

ts 复制代码

// 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 就很轻松。

ts 复制代码

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 更加方便，比如拦截器、全局配置。

ts 复制代码

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 文件里引入：

ts 复制代码

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 环境强绑定的库不适合在鸿蒙中跑。

这样做的好处是开发效率更高，老代码能复用，鸿蒙应用的逻辑层更简洁。