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 的 fspath 等模块,在鸿蒙里是跑不通的。大多数纯函数工具库(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 环境强绑定的库不适合在鸿蒙中跑。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/93836.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/93836.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++实现教务管理系统,文件操作账户密码登录(附源码)

教务管理系统项目介绍 项目概述 这是一个基于C开发的教务管理系统,提供了学生、教师和系统管理员三种角色的功能模块,实现了教务信息的录入、查询、修改和删除等基本操作。系统采用文件存储方式保存数据,具有简单易用、功能完备的特点。 项…

《C++进阶之STL》【二叉搜索树】

【二叉搜索树】目录前言:------------概念介绍------------1. 什么是二叉搜索树?2. 二叉搜索树的性能怎么样?------------基本操作------------一、查找操作思想步骤简述二、插入操作目标步骤简述三、删除操作目标步骤简述------------代码实现--------…

Orange的运维学习日记--47.Ansible进阶之异步处理

Orange的运维学习日记–47.Ansible进阶之异步处理 文章目录Orange的运维学习日记--47.Ansible进阶之异步处理Playbook 执行顺序原理可选执行策略调整并发连接数:forks 参数查看与修改 forks性能调优建议分批执行全局任务:serial 关键字serial 用法示例应…

从一个ctf题中学到的多种php disable_functions bypass 姿势

题目介绍 题目是Lilctf2025 的php-jail-is-my-cry 比赛链接:https://lilctf.xinshi.fun/ 题目环境前半部分是 php最近的phar 新 trick 大佬的原理分析 https://fushuling.com/index.php/2025/07/30/%e5%bd%93include%e9%82%82%e9%80%85phar-deadsecctf2025-baby-we…

从繁琐到优雅:Java Lambda 表达式全解析与实战指南

在 Java 8 之前,我们习惯了用匿名内部类处理回调、排序等场景,代码中充斥着大量模板化的冗余代码。直到 Java 8 引入 Lambda 表达式,这一局面才得以彻底改变。作为一名深耕 Java 多年的技术专家,我见证了 Lambda 表达式如何从一个…

《当 AI 学会 “思考”:大语言模型的逻辑能力进化与隐忧》

引言:AI “思考” 的时代信号​大语言模型展现逻辑能力的典型场景:如复杂问题推理、多步骤任务规划的实例(如 AI 辅助撰写科研思路、进行案件逻辑梳理等)​提出核心议题:大语言模型逻辑能力的进化究竟达到了怎样的程度…

企业知识管理革命:RAG系统在大型组织中的落地实践

企业知识管理革命:RAG系统在大型组织中的落地实践 🌟 Hello,我是摘星! 🌈 在彩虹般绚烂的技术栈中,我是那个永不停歇的色彩收集者。 🦋 每一个优化都是我培育的花朵,每一个特性都是我…

MySQL事务篇-事务概念、并发事务问题、隔离级别

事务事务是一组不可分割的操作集合,这些操作要么同时成功提交,要么同时失败回滚。acid事物的四大特性原子性最小工作单元,要么同时成功,要么同时失败。例如A转账300给B,A账户-300与B账户300必须满足操作原子性,避免出现…

C++高频知识点(二十三)

文章目录111. 谈谈atomic1. 什么是原子操作?2. std::atomic 的基本使用示例:基本使用3. 原子操作方法4. 内存模型与顺序一致性112. 引用成员变量是否占空间?1. 引用成员变量的定义2. 内存占用情况1. 成员变量的实际占用2. 类的总大小代码分析113. C中深…

云存储的高效安全助手:阿里云国际站 OSS

在这个数据爆炸的时代,数据存储和管理成为了众多企业和个人面临的一大挑战。想象一下,你是一位视频博主,随着粉丝量的增长,视频素材越来越多,电脑硬盘根本装不下,每次找素材都要花费大量时间。又或者你是一…

【线性基】P4301 [CQOI2013] 新Nim游戏|省选-

本文涉及知识点 C贪心 位运算、状态压缩、枚举子集汇总 线性基 P4301 [CQOI2013] 新Nim游戏 题目描述 传统的 Nim 游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同)。两个游戏者轮流操作,…

[25-cv-09610]Anderson Design Group 版权维权再出击,12 张涉案图片及近 50 个注册版权需重点排查!

Anderson 版权图案件号:25-cv-09610立案时间:2025年8月13日原告:Anderson Design Group, Inc.代理律所:Keith原告介绍原告是美国的创意设计公司,成立于1993年,简称ADG,一家家族企业,…

Mac下载AOSP源代码

一、前期准备 硬件要求 至少 200GB 可用空间(源码约 100GB,编译产物需额外空间),推荐 SSD。 内存 16GB+,避免同步 / 编译时卡顿。 系统要求 macOS 10.14+(推荐最新版本,兼容性更好) 二、环境配置 AOSP 源码包含大小写不同的文件(如 File.java 和 file.java),而 …

Linux之网络

Linux之网络两个模型应用层协议HTTPS传输层协议UDPTCP可靠性与效率的兼顾面向字节流TCP异常情况底层实现网络层协议IP网段划分子网划分NAT数据链路层协议以太网ARP代理服务器内网穿透五种IO多路复用Reactor模式本文旨在讲解tcp-ip协议原理,并不涉及代码部分&#xf…

MCP(模型上下文协议):是否是 AI 基础设施中缺失的标准?

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

基于粒子群优化算法优化支持向量机的数据回归预测 PSO-SVM

一、作品详细简介 1.1附件文件夹程序代码截图 全部完整源代码,请在个人首页置顶文章查看: 学行库小秘_CSDN博客​编辑https://blog.csdn.net/weixin_47760707?spm1000.2115.3001.5343 1.2各文件夹说明 1.2.1 main.m主函数文件 该代码实现了使用PSO…

版本更新!FairGuard-Mac加固工具已上线!

FairGuard-Mac加固工具1.0.2版本更新日志:■ 支持 AssetBundle 资源加密;■ 支持 Unity global-metadata 文件加密;AssetBundle ,是 Unity 提供的一种资源存储压缩包。其中储存了游戏的资源,如图片、模型、纹理、音视频、代码等文件。AssetBu…

【Linux篇章】穿越数据迷雾:HTTPS构筑网络安全的量子级护盾,重塑数字信任帝国!

本篇摘要 本篇文章将从https是什么,为什么需要https角度,基于之前学的http[速戳速通HTTP]认识https,介绍什么是加密等,认识加密的两种方式:对称加密和非对称加密;引出五种不同的通信方加密方式外加渗透证书…

数据库:表和索引结构

表和索引是如何组织和使用的,在很大程度上取决于具体的关系型DBMS,然而它们都依赖于大致相似的结构和原则。索引页和表页表行和索引行都被存储在页中。页的大小一般为4kb,这是一个可以满足大部分需求的大小,也可以是其他大小&…

Java 学习笔记(基础篇5)

1. 综合练习(1) 抽奖public class test10 {public static void main(String[] args) {int[] arr {2,588,888,1000,10000};Random r new Random();for (int i 0; i < arr.length; i) {int randomIndex r.nextInt(arr.length);int temp arr[randomIndex];arr[randomIndex…