【HarmonyOS】鴻蒙應用開發中常用的三方庫介紹和使用示例
截止到2025年，目前參考官方文檔：訪問 HarmonyOS三方庫中心 。梳理了以下熱門下載量和常用的三方庫。
上述庫的組合，可快速實現網絡請求、UI搭建、狀態管理等核心功能，顯著提升開發效率。
版本號以三方庫網站上的版本號最新為準。
一、網絡與數據交互
1. ohos-axios（網絡請求）
ohos-axios：適配 HarmonyOS 的 Axios 版本，支持 HTTP/HTTPS 請求、攔截器、請求取消等，語法與 Web 端 Axios 一致，降低學習成本。
"dependencies": {"@ohos/axios": "1.3.2"
}
import axios from '@ohos/axios';// 基礎配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;// 發送GET請求
async function fetchData() {try {const response = await axios.get('/user', {params: { id: 123 }});console.log('請求成功:', response.data);} catch (error) {console.error('請求失敗:', error);}
}// 攔截器示例
axios.interceptors.request.use((config) => {// 添加Tokenconfig.headers.Authorization = 'Bearer token';return config;},(error) => Promise.reject(error)
);
2. ohos-websocket（實時通訊）
ohos-websocket：封裝 WebSocket 客戶端，支持長連接、消息監聽、斷線重連，適用于實時聊天、數據推送場景。
"dependencies": {"@ohos/websocket": "2.1.0"
}
import WebSocket from '@ohos/websocket';// 初始化連接
const ws = new WebSocket('wss://echo.websocket.events');// 連接成功
ws.onopen = () => {console.log('WebSocket連接已打開');ws.send('Hello WebSocket!'); // 發送消息
};// 接收消息
ws.onmessage = (event) => {console.log('收到消息:', event.data);
};// 連接關閉
ws.onclose = (code, reason) => {console.log(`連接關閉: ${code}, ${reason}`);
};
二、UI組件與交互
1. TDesign for HarmonyOS（企業級UI）
騰訊 TDesign 適配 HarmonyOS 的版本，包含企業級 UI 組件，風格統一，覆蓋表單、導航、數據展示等場景。
"dependencies": {"@tdesign/arkui-harmonyos": "0.8.5"
}
import { Button, Dialog } from '@tdesign/arkui-harmonyos';
import { Column } from '@arkui-x/components';@Entry
@Component
struct TDesignDemo {@State showDialog: boolean = false;build() {Column() {// primary按鈕Button({ type: 'primary', text: '打開彈窗' }).onClick(() => this.showDialog = true)// 彈窗組件Dialog({title: '提示',content: '這是TDesign彈窗',open: this.showDialog,onClose: () => this.showDialog = false})}.width('100%').padding(20)}
}
2. ohos-calendar（日歷組件）
高性能日歷組件，支持日期選擇、范圍選擇、自定義樣式。
"dependencies": {"@ohos/calendar": "3.2.1"
}
import { Calendar } from '@ohos/calendar';
import { Column } from '@arkui-x/components';@Entry
@Component
struct CalendarDemo {@State selectedDate: Date = new Date();build() {Column() {Calendar({startDate: new Date(2024, 0, 1),endDate: new Date(2025, 11, 31),selectedDate: this.selectedDate,onSelect: (date) => {this.selectedDate = date;console.log(`選中日期: ${date.toLocaleDateString()}`);}}).width('90%').height(400)}}
}
三、狀態管理
1. ohos-pinia（輕量狀態管理）
類似 Vue Pinia 的狀態管理庫，采用模塊化設計，支持 TypeScript 類型推導，更簡潔的 API。
"dependencies": {"@ohos/pinia": "2.2.3"
}
import { createPinia, defineStore } from '@ohos/pinia';// 1. 創建Pinia實例
const pinia = createPinia();// 2. 定義Store
const useUserStore = defineStore('user', {state: () => ({name: 'HarmonyOS',age: 3}),actions: {incrementAge() {this.age++;}},getters: {doubleAge: (state) => state.age * 2}
});// 3. 組件中使用
@Component
struct UserInfo {private userStore = useUserStore(pinia);build() {Column() {Text(`Name: ${this.userStore.name}`)Text(`Age: ${this.userStore.age}`)Text(`Double Age: ${this.userStore.doubleAge}`)Button('增加年齡').onClick(() => this.userStore.incrementAge())}}
}
四、數據存儲
1. ohos-sqlite（ORM數據庫）
"dependencies": {"@ohos/sqlite-orm": "4.1.0"
}
import { Database, Entity, Column, PrimaryGeneratedColumn } from '@ohos/sqlite-orm';// 1. 定義實體類
@Entity('user')
class User {@PrimaryGeneratedColumn()id: number;@Column()name: string;@Column()age: number;
}// 2. 初始化數據庫
const db = new Database({name: 'myDB',entities: [User],version: 1
});// 3. 數據庫操作
async function dbOperations() {const userRepo = db.getRepository(User);// 插入數據const newUser = new User();newUser.name = 'Test';newUser.age = 20;await userRepo.save(newUser);// 查詢數據const users = await userRepo.find();console.log('用戶列表:', users);
}
五、工具類
1. ohos-lodash（工具函數）
Lodash 的 HarmonyOS 適配版，提供字符串、數組、對象等常用工具函數（如深拷貝、防抖節流、數據格式化）。
"dependencies": {"@ohos/lodash": "4.17.21"
}
import _ from '@ohos/lodash';// 數組去重
const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = _.uniq(arr); // [1,2,3]// 深拷貝
const obj = { a: 1, b: { c: 2 } };
const copyObj = _.cloneDeep(obj);// 防抖函數
const debounced = _.debounce(() => {console.log('防抖執行');
}, 500);// 調用防抖函數（連續觸發時僅最后一次生效）
debounced();
六、媒體與圖形
1. ohos-glide（圖片加載）
參考 Android Glide 的圖片加載庫，支持網絡 / 本地圖片加載、緩存、裁剪、圓角處理。
"dependencies": {"@ohos/glide": "2.3.0"
}
import { Glide } from '@ohos/glide';
import { Image } from '@arkui-x/components';@Component
struct ImageDemo {build() {Column() {Image().width(300).height(200).onComplete(() => {// 加載網絡圖片Glide.with(this).load('https://picsum.photos/300/200').placeholder($r('app.media.default_img')) // 占位圖.error($r('app.media.error_img')) // 錯誤圖.into(this); // 綁定到當前Image組件})}}
}
