10款好用的开源 HarmonyOS 工具库

大家好，我是 V 哥，今天给大家分享10款好用的 HarmonyOS的工具库，在开发鸿蒙应用时可以用下，好用的工具可以简化代码，让你写出优雅的应用来。废话不多说，马上开整。

1. efTool

efTool是一个功能丰富且易用的兼容API12的HarmonyOS工具库，通过诸多实用工具类的使用，旨在帮助开发者快速、便捷地完成各类开发任务。 这些封装的工具涵盖了字符串、数字、集合、JSON等一系列操作， 可以满足各种不同的开发需求。本人为Java开发,故封装思路借鉴Java的工具类Hutool，同时扩展了HarmonyOS的UI组件。

咱们使用 ArkTS（Ark TypeScript）编写的 efTool 工具库中字符串工具类的示例代码，利用这些封装来简化开发任务，并扩展 HarmonyOS 的 UI 组件。假设我们有一个字符串处理工具类 StrUtil 和一个扩展的 UI 组件。

1. 字符串工具类 (StrUtil)

// StrUtil.ts
export default class StrUtil {// 判断字符串是否为空或仅包含空白static isBlank(input: string): boolean {return input == null || input.trim() === '';}// 将字符串转换为大写static toUpperCase(input: string): string {return input ? input.toUpperCase() : input;}// 判断字符串是否包含指定子字符串static contains(input: string, searchString: string): boolean {return input.indexOf(searchString) !== -1;}
}

2. 扩展的UI组件示例

// ExtTextComponent.ts
import { Text, Flex, View } from '@ohos:ohos_ui';export default class ExtTextComponent {// 一个自定义的文本组件，支持传入自定义样式static renderText(content: string, style?: { fontSize?: number; color?: string }) {const defaultStyle = {fontSize: 16,color: '#000000',};const finalStyle = { ...defaultStyle, ...style };return (<Textvalue={content}fontSize={finalStyle.fontSize}fontColor={finalStyle.color}/>);}// 用来组合多个文本的展示static renderTextList(textList: string[], style?: { fontSize?: number; color?: string }) {return (<Flex direction="column">{textList.map((text) => (<View>{this.renderText(text, style)}</View>))}</Flex>);}
}

3. 使用 StrUtil 和 扩展的 ExtTextComponent

以下是如何将这些工具和 UI 组件整合到 HarmonyOS 应用中的示例：

import StrUtil from './StrUtil';
import ExtTextComponent from './ExtTextComponent';// 示例逻辑
const content = 'HarmonyOS Tools';
const textList = ['First text', 'Second text', 'Third text'];function onCreate() {const isBlank = StrUtil.isBlank(content); // falseconst upperCaseText = StrUtil.toUpperCase(content); // 'HARMONYOS TOOLS'const containsHarmony = StrUtil.contains(content, 'Harmony'); // true// 在界面上展示return (<View>{ExtTextComponent.renderText(`Is blank: ${isBlank}`)}{ExtTextComponent.renderText(`Upper case: ${upperCaseText}`)}{ExtTextComponent.renderText(`Contains 'Harmony': ${containsHarmony}`)}{ExtTextComponent.renderTextList(textList)}</View>);
}

来解释一下代码：

  1. 字符串工具类 StrUtil：提供一些常用的字符串操作方法，例如判断字符串是否为空、转换为大写、检查是否包含子字符串等。 这些方法旨在简化开发中对字符串的常见处理操作。

  2. 扩展的UI组件 ExtTextComponent：封装了基于 HarmonyOS UI 组件的文本展示逻辑。renderText 方法可以方便地展示带有自定义样式的文本，而 renderTextList 方法则进一步扩展，允许批量展示文本列表。

  3. 整合示例：onCreate 函数展示了如何利用 StrUtil 和 ExtTextComponent 一起工作，处理逻辑并动态渲染内容到页面上。

通过这种方式，efTool 不仅能帮助处理基础的字符串等数据类型操作，还能通过扩展 HarmonyOS 的组件库，简化界面开发任务。efTool还有更多好用的工具，可以试试哦。

2. harmony-utils

harmony-utils 一款功能丰富且极易上手的HarmonyOS工具库，借助众多实用工具类，致力于助力开发者迅速构建鸿蒙应用。其封装的工具涵盖了APP、设备、屏幕、授权、通知、线程间通信、弹框、吐司、生物认证、用户首选项、拍照、相册、扫码、文件、日志，异常捕获、字符、字符串、数字、集合、日期、随机、base64、加密、解密、JSON等一系列的功能和操作，能够满足各种不同的开发需求。

我们写一个基于 ArkTS (Ark TypeScript) 编写的 harmony-utils 工具库的示例代码，来展示一下如何使用其中的一些常用功能。

1. APP工具类 (AppUtil)

// AppUtil.ts
export default class AppUtil {// 获取应用基本信息static getAppInfo() {return {appName: 'HarmonyApp',version: '1.0.0',packageName: 'com.harmony.app',};}// 退出应用static exitApp() {// 使用HarmonyOS API来退出应用console.log('Exiting the app...');// 调用API以退出应用，如需要可以调用系统相关功能}
}

2. 设备工具类 (DeviceUtil)

// DeviceUtil.ts
export default class DeviceUtil {// 获取设备信息static getDeviceInfo() {return {brand: 'Huawei',model: 'P50 Pro',osVersion: 'HarmonyOS 3',};}// 获取屏幕信息static getScreenInfo() {return {width: 1080,height: 2340,density: 2.5,};}
}

3. 日期工具类 (DateUtil)

// DateUtil.ts
export default class DateUtil {// 获取当前日期static getCurrentDate(): string {const date = new Date();return date.toLocaleDateString();}// 格式化日期static formatDate(date: Date, format: string): string {const options: Intl.DateTimeFormatOptions = {year: 'numeric',month: '2-digit',day: '2-digit',};return new Intl.DateTimeFormat('en-US', options).format(date);}
}

4. 吐司工具类 (ToastUtil)

// ToastUtil.ts
export default class ToastUtil {// 显示短时间提示static showToastShort(message: string) {// 使用HarmonyOS的Toast APIconsole.log(`Short Toast: ${message}`);}// 显示长时间提示static showToastLong(message: string) {// 使用HarmonyOS的Toast APIconsole.log(`Long Toast: ${message}`);}
}

5. 使用 harmony-utils 中的工具

以下是如何在应用中整合使用 AppUtil、DeviceUtil、DateUtil 和 ToastUtil 的示例：

import AppUtil from './AppUtil';
import DeviceUtil from './DeviceUtil';
import DateUtil from './DateUtil';
import ToastUtil from './ToastUtil';function onCreate() {// 获取应用信息const appInfo = AppUtil.getAppInfo();console.log(`App Name: ${appInfo.appName}, Version: ${appInfo.version}, Package: ${appInfo.packageName}`);// 获取设备信息const deviceInfo = DeviceUtil.getDeviceInfo();console.log(`Device: ${deviceInfo.brand} ${deviceInfo.model}, OS: ${deviceInfo.osVersion}`);// 获取屏幕信息const screenInfo = DeviceUtil.getScreenInfo();console.log(`Screen: ${screenInfo.width}x${screenInfo.height}, Density: ${screenInfo.density}`);// 显示当前日期const currentDate = DateUtil.getCurrentDate();console.log(`Current Date: ${currentDate}`);// 显示吐司ToastUtil.showToastShort('Welcome to HarmonyOS!');// 退出应用示例setTimeout(() => {AppUtil.exitApp();}, 5000); // 5秒后退出应用
}

解释一下代码：

  1. App工具类 (AppUtil)：封装了与应用相关的操作，提供获取应用信息和退出应用的功能。这些操作可以帮助开发者更方便地获取应用元信息和控制应用生命周期。

  2. 设备工具类 (DeviceUtil)：用于获取设备的基本信息（品牌、型号、操作系统版本）以及屏幕信息（分辨率和密度），让开发者在不同设备上自适应界面设计。

  3. 日期工具类 (DateUtil)：封装了日期操作，可以获取当前日期并进行格式化，方便开发者处理时间相关逻辑。

  4. 吐司工具类 (ToastUtil)：用于在应用中显示提示消息，简化了对系统吐司的调用，支持短时间和长时间两种不同的显示模式。

  5. 整合示例：通过 onCreate 方法展示如何利用这些工具类获取应用信息、设备信息、显示当前日期、提示消息，以及退出应用的操作。这种整合帮助开发者快速搭建功能完善的应用逻辑，简化常见任务的开发过程。

通过这种封装，harmony-utils 能够极大提高开发效率，使开发者可以专注于业务逻辑而不必处理繁琐的基础操作。还有更多好用的工具等你来使用。

3. SpinKit(API12 - 5.0.3.800)

SpinKit 是一个适用于OpenHarmony/HarmonyOS的加载动画库。

下面是使用 ArkTS 编写的 SpinKit 加载动画库的示例代码。假设 SpinKit 提供了多种加载动画样式，下面的示例展示了如何在应用中集成并使用这些动画。

1. SpinKit 动画组件示例

// SpinKit.ts
export default class SpinKit {// 圆形旋转动画static CircleSpinner() {return (<div><progress-circlecolor="#00BFFF"strokeWidth={5}radius={30}/></div>);}// 三个弹跳点动画static ThreeBounceSpinner() {return (<div><progress-bouncing-dotscolor="#00BFFF"dotRadius={10}bounceHeight={20}/></div>);}// 矩形方块加载动画static RectangleSpinner() {return (<div><progress-rectanglescolor="#00BFFF"count={5}width={10}height={30}space={5}/></div>);}
}

2. 使用 SpinKit 加载动画

以下是如何在 ArkTS 应用中使用 SpinKit 动画的示例：

import SpinKit from './SpinKit';function onCreate() {// 显示不同样式的加载动画return (<View><Text>Circle Spinner:</Text>{SpinKit.CircleSpinner()}<Text>Three Bounce Spinner:</Text>{SpinKit.ThreeBounceSpinner()}<Text>Rectangle Spinner:</Text>{SpinKit.RectangleSpinner()}</View>);
}

解释一下：

  1. SpinKit 动画组件：封装了几种常见的加载动画样式，分别是：

    • CircleSpinner：圆形旋转加载动画，使用 progress-circle 标签实现，设置了颜色、半径、以及线宽。
    • ThreeBounceSpinner：三个弹跳点动画，使用 progress-bouncing-dots 标签实现，设置了颜色、点的半径以及弹跳高度。
    • RectangleSpinner：矩形方块加载动画，使用 progress-rectangles 标签实现，设置了方块的宽高、颜色、以及方块间的间距。

  2. 使用 SpinKit 动画：通过 onCreate 函数，将多个加载动画渲染在页面上，分别展示了圆形、弹跳点和矩形方块的加载动画。这些动画可以在不同的场景中使用，例如网络请求等待或后台任务处理中。

通过这样的封装，SpinKit 提供了一套加载动画库，开发者可以轻松地将其集成到 HarmonyOS 应用中，提高用户界面的动态交互体验。

4. harmony-dialog

这是一款极为简单易用的零侵入弹窗，仅需一行代码即可轻松实现，无论在何处都能够轻松弹出。其涵盖了 AlertDialog、TipsDialog、ConfirmDialog、SelectDialog、CustomContentDialog、TextInputDialog、TextAreaDialog、BottomSheetDialog、ActionSheetDialog、CustomDialog、LoadingDialog、LoadingProgress、Toast、ToastTip 等多种类型，能够满足各种不同的弹窗开发需求。

咱们来使用一下，写一个基于 ArkTS 编写的一个弹窗库的示例代码，展示如何使用这些不同类型的弹窗，如 AlertDialog、ConfirmDialog、Toast 等。该库设计为零侵入，开发者只需一行代码即可轻松实现弹窗效果。

1. 弹窗库示例 (DialogUtil)

// DialogUtil.ts
export default class DialogUtil {// 显示AlertDialogstatic showAlertDialog(title: string, message: string) {return (<dialogtype="alert"title={title}message={message}buttonText="OK"onButtonClick={() => console.log('AlertDialog OK clicked')}/>);}// 显示ConfirmDialogstatic showConfirmDialog(title: string, message: string, onConfirm: () => void, onCancel: () => void) {return (<dialogtype="confirm"title={title}message={message}confirmButtonText="Yes"cancelButtonText="No"onConfirmClick={onConfirm}onCancelClick={onCancel}/>);}// 显示LoadingDialogstatic showLoadingDialog(message: string) {return (<dialogtype="loading"message={message}/>);}// 显示Toast消息static showToast(message: string, duration: number = 2000) {setTimeout(() => {console.log(`Toast: ${message}`);}, duration);}// 显示TextInputDialogstatic showTextInputDialog(title: string, onConfirm: (input: string) => void) {let inputValue = '';return (<dialogtype="text-input"title={title}inputHint="Enter text here"onConfirmClick={() => onConfirm(inputValue)}/>);}
}

2. 使用 DialogUtil 弹窗示例

以下是如何在应用中使用这些弹窗的示例代码：

import DialogUtil from './DialogUtil';function onCreate() {// 显示AlertDialogconst alertDialog = DialogUtil.showAlertDialog('Alert', 'This is an alert dialog.');// 显示ConfirmDialogconst confirmDialog = DialogUtil.showConfirmDialog('Confirm','Do you want to continue?',() => console.log('Confirmed'),() => console.log('Cancelled'));// 显示LoadingDialogconst loadingDialog = DialogUtil.showLoadingDialog('Loading, please wait...');// 显示ToastDialogUtil.showToast('This is a toast message');// 显示TextInputDialogconst textInputDialog = DialogUtil.showTextInputDialog('Input', (input: string) => {console.log(`Input received: ${input}`);});// 将这些弹窗按需渲染在界面上return (<View>{alertDialog}{confirmDialog}{loadingDialog}{textInputDialog}</View>);
}

解释一下代码：

  1. DialogUtil 弹窗库：

    • AlertDialog：简单的提示框，只有一个“OK”按钮，用于显示紧急或重要信息。
    • ConfirmDialog：带确认和取消按钮的确认框，用户可以选择确认或取消操作，分别执行不同的回调函数。
    • LoadingDialog：用于显示加载中的进度提示，常用于网络请求或其他异步任务。
    • Toast：简短的提示信息，自动消失，常用于向用户展示非阻塞的提示。
    • TextInputDialog：带有文本输入框的对话框，用户可以输入信息并确认。

  2. 使用示例：

    • 在 onCreate 方法中，我们展示了如何创建并显示不同类型的弹窗。通过调用 DialogUtil 中的静态方法，可以快速创建所需的弹窗并处理用户的输入或选择。
    • 每个弹窗都被定义为一个单独的 dialog 标签，可以根据用户操作的不同触发点击事件或回调函数。例如，点击 ConfirmDialog 中的“确认”按钮，会执行指定的回调函数。

通过这种封装，我们可以轻松使用多种类型的弹窗，只需一行代码即可实现所需的弹窗效果，简化了在 OpenHarmony/HarmonyOS 中弹窗的使用流程。

5. PullToRefresh

PullToRefresh是一款OpenHarmony环境下可用的下拉刷新、上拉加载组件。 支持设置内置动画的各种属性，支持设置自定义动画，支持lazyForEarch的数据作为数据源。

咱们来写一个基于 ArkTS 编写的 PullToRefresh 组件的示例代码，展示如何使用该组件实现下拉刷新和上拉加载的功能。该组件支持内置动画、自定义动画以及 lazyForEach 数据源，极大简化了数据列表的刷新和加载操作。

1. PullToRefresh 组件示例 (PullToRefresh.ts)

// PullToRefresh.ts
export default class PullToRefresh {private data: Array<string>;private loading: boolean;constructor() {this.data = [];this.loading = false;}// 下拉刷新事件onRefresh(callback: () => void) {this.loading = true;setTimeout(() => {this.data = ['New Data 1', 'New Data 2', 'New Data 3'];this.loading = false;callback();}, 2000); // 模拟2秒的网络请求}// 上拉加载事件onLoadMore(callback: () => void) {this.loading = true;setTimeout(() => {this.data.push('More Data 1', 'More Data 2');this.loading = false;callback();}, 2000); // 模拟2秒的加载更多数据}// 渲染数据列表renderList() {return (<lazyForEach items={this.data}>{(item) => (<list-item><text>{item}</text></list-item>)}</lazyForEach>);}// 渲染组件renderComponent() {return (<pull-to-refreshonRefresh={() => this.onRefresh(() => console.log('Refreshed!'))}onLoadMore={() => this.onLoadMore(() => console.log('Loaded more!'))}refreshing={this.loading}>{this.renderList()}</pull-to-refresh>);}
}

2. 使用 PullToRefresh 组件

以下是如何在应用中使用 PullToRefresh 组件的示例代码：

import PullToRefresh from './PullToRefresh';function onCreate() {const pullToRefreshComponent = new PullToRefresh();return (<View>{pullToRefreshComponent.renderComponent()}</View>);
}

解释一下：

  1. PullToRefresh 组件的设计：

    • 数据管理：组件内部维护了一个 data 数组来存储显示的内容，通过 onRefresh 方法刷新数据、通过 onLoadMore 方法加载更多数据。
    • 刷新和加载事件：下拉刷新和上拉加载的事件通过回调函数来处理，这里使用了定时器模拟2秒的异步请求，完成后调用回调函数刷新界面。
    • 懒加载数据源：组件使用了 lazyForEach 来渲染数据列表，每个数据项都以 list-item 的形式展示。这种方式能够有效处理大规模数据，提高渲染性能。
    • 动画支持：PullToRefresh 组件内部默认支持下拉和上拉加载的内置动画，并且可以通过 refreshing 属性控制加载状态。

  2. 使用示例：

    • 在 onCreate 方法中，我们创建了 PullToRefresh 组件的实例，并通过调用 renderComponent 来渲染整个下拉刷新和上拉加载的功能。
    • 当用户下拉刷新时，组件会自动调用 onRefresh 事件并触发回调函数，加载新的数据；当用户上拉加载更多时，onLoadMore 事件会被触发，加载更多的数据到列表中。

这种设计将下拉刷新、上拉加载与数据的动态渲染结合起来，提供了一种高效且易于使用的组件方案。在 OpenHarmony 环境中，开发者可以通过这一组件轻松实现数据的动态加载功能，并支持自定义动画和数据渲染方式。

6. ImageKnife

ImageKnife专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。
支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。

  • 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中
  • 支持自定义实现图片获取/网络下载
  • 支持监听网络下载回调进度
  • 继承Image的能力，支持option传入border，设置边框，圆角
  • 继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
  • 支持通过设置transform缩放图片
  • 并发请求数量，支持请求排队队列的优先级
  • 支持生命周期已销毁的图片，不再发起请求
  • 自定义缓存key
  • 自定义http网络请求头
  • 支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
  • 支持preLoadCache预加载图片
  • 支持onlyRetrieveFromCache仅用缓存加载
  • 支持使用一个或多个图片变换，如模糊，高亮等

咱们来写一个基于 ArkTS 编写的 ImageKnife 图像加载缓存库的示例代码，展示如何使用该库高效地加载和缓存图像。ImageKnife 支持自定义内存缓存策略，并允许开发者设置缓存大小（默认为 LRU 策略）。

1. ImageKnife 库示例 (ImageKnife.ts)

// ImageKnife.ts
class ImageCache {private cache: Map<string, string>;private maxSize: number;constructor(maxSize: number = 10) {this.cache = new Map<string, string>();this.maxSize = maxSize;}// 获取图像get(url: string): string | undefined {return this.cache.get(url);}// 存储图像set(url: string, image: string) {if (this.cache.size >= this.maxSize) {// 移除最久未使用的图像const firstKey = this.cache.keys().next().value;this.cache.delete(firstKey);}this.cache.set(url, image);}
}export default class ImageKnife {private cache: ImageCache;constructor(maxSize: number = 10) {this.cache = new ImageCache(maxSize);}// 加载图像loadImage(url: string): Promise<string> {return new Promise((resolve, reject) => {// 先从缓存中获取图像const cachedImage = this.cache.get(url);if (cachedImage) {resolve(cachedImage);return;}// 模拟网络加载图像setTimeout(() => {const image = `Loaded image from ${url}`; // 模拟加载的图像this.cache.set(url, image);resolve(image);}, 1000); // 模拟1秒的网络请求});}
}

2. 使用 ImageKnife 组件

以下是如何在应用中使用 ImageKnife 进行图像加载和缓存的示例代码：

import ImageKnife from './ImageKnife';function onCreate() {const imageKnife = new ImageKnife(5); // 设置最大缓存大小为5// 加载图像imageKnife.loadImage('https://example.com/image1.png').then((image) => {console.log(image); // 输出: Loaded image from https://example.com/image1.png});// 加载同一图像，应该从缓存中获取imageKnife.loadImage('https://example.com/image1.png').then((image) => {console.log(image); // 输出: Loaded image from https://example.com/image1.png (来自缓存)});// 加载新图像imageKnife.loadImage('https://example.com/image2.png').then((image) => {console.log(image); // 输出: Loaded image from https://example.com/image2.png});
}

详细解释：

  1. ImageCache 类：

    • 缓存结构：使用 Map 存储图像的 URL 和对应的图像数据。这个结构允许快速存取。
    • 最大缓存大小：通过 maxSize 属性限制缓存的最大数量。当缓存达到最大限制时，最久未使用的图像会被移除以腾出空间（实现了简单的 LRU 策略）。
    • 获取和存储：get 方法用于从缓存中获取图像，set 方法用于将图像存入缓存并管理缓存大小。

  2. ImageKnife 类：

    • 图像加载：loadImage 方法用于加载图像。首先检查缓存中是否已有图像，如果有则直接返回。如果没有，则模拟网络请求加载图像并将其存入缓存。
    • 异步处理：使用 Promise 来处理异步加载的结果，使得调用该方法时可以使用 .then() 方法处理加载结果。

  3. 使用示例：

    • 在 onCreate 方法中，创建了 ImageKnife 的实例，并设置最大缓存大小为 5。
    • 加载图像时，首先会检查缓存。如果图像已经在缓存中，则直接返回；否则会模拟网络请求加载图像并存入缓存。

通过这种设计，ImageKnife 提供了一个高效、简单的图像加载和缓存解决方案，适用于 OpenHarmony 环境中的应用开发。开发者可以轻松设置缓存策略和大小，以满足不同的应用需求。

7. mpchart

mpchart各种类型的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI。

我们来写一个基于 ArkTS 编写的 mpchart 图表库的示例代码，展示如何使用该库来绘制各种类型的图表，如销售数据走势图和股价走势图。这个库旨在帮助开发者快速实现图表用户界面。

1. MPChart 库示例 (MPChart.ts)

// MPChart.ts
class MPChart {private labels: Array<string>;private data: Array<number>;private type: string;constructor(labels: Array<string>, data: Array<number>, type: string = 'line') {this.labels = labels;this.data = data;this.type = type;}// 渲染图表renderChart() {switch (this.type) {case 'line':return this.renderLineChart();case 'bar':return this.renderBarChart();case 'pie':return this.renderPieChart();default:return null;}}// 渲染折线图private renderLineChart() {return (<view><text>折线图</text><canvas><lineChartlabels={this.labels}data={this.data}lineColor="#ff5733"fillColor="rgba(255, 87, 51, 0.3)"/></canvas></view>);}// 渲染柱状图private renderBarChart() {return (<view><text>柱状图</text><canvas><barChartlabels={this.labels}data={this.data}barColor="#33c1ff"/></canvas></view>);}// 渲染饼图private renderPieChart() {return (<view><text>饼图</text><canvas><pieChartlabels={this.labels}data={this.data}colors={['#ff6384', '#36a2eb', '#cc65fe']}/></canvas></view>);}
}

2. 使用 MPChart 组件

以下是如何在应用中使用 MPChart 来绘制不同类型图表的示例代码：

import MPChart from './MPChart';function onCreate() {const labels = ['January', 'February', 'March', 'April', 'May'];const salesData = [30, 50, 70, 40, 90]; // 销售数据const priceData = [100, 120, 80, 130, 110]; // 股价数据return (<view>{/* 渲染销售数据折线图 */}<MPChart labels={labels} data={salesData} type="line" />{/* 渲染股价数据柱状图 */}<MPChart labels={labels} data={priceData} type="bar" />{/* 渲染销售数据饼图 */}<MPChart labels={labels} data={salesData} type="pie" /></view>);
}

解释一下代码：

  1. MPChart 类：

    • 构造函数：接收图表的标签、数据和类型（如折线图、柱状图、饼图）。
    • renderChart 方法：根据图表类型调用相应的渲染方法。
    • 渲染方法：
      • renderLineChart：渲染折线图，使用 lineChart 组件。
      • renderBarChart：渲染柱状图，使用 barChart 组件。
      • renderPieChart：渲染饼图，使用 pieChart 组件。

  2. 使用示例：

    • 在 onCreate 方法中，我们定义了一组标签和对应的销售数据及股价数据。
    • 使用 MPChart 组件分别渲染销售数据的折线图、股价数据的柱状图和销售数据的饼图。

这种设计使得开发者能够快速实现多种类型的图表，简化了图表的绘制过程，并且能够通过更改参数轻松切换不同的图表类型。mpchart 库的灵活性和易用性使得它非常适合用于商业数据的可视化。

8. Zxing

Zxing是一款解析和生成一维码、二维码的三方组件，用于声明式应用开发，支持多种一维码、二维码的的解析与生成功能。

咱们来写一个基于 ArkTS 编写的 Zxing 组件示例代码，展示如何使用该组件生成和解析二维码及一维码。Zxing 是一个强大的工具，广泛用于二维码和条形码的创建与解读。

1. Zxing 库示例 (Zxing.ts)

// Zxing.ts
import { QRCode } from 'zxing-js'; // 假设引入ZXing相关的库export default class Zxing {// 生成二维码static generateQRCode(data: string, size: number = 256): string {const qrCode = new QRCode();qrCode.setErrorCorrectionLevel('L'); // 设置错误校正级别qrCode.setMargin(1); // 设置边距return qrCode.createDataURL(data, {width: size,height: size,color: {dark: '#000000',  // 二维码颜色light: '#ffffff',  // 背景颜色},});}// 解析二维码static async decodeQRCode(image: string): Promise<string | null> {const qrCodeReader = new QRCode();try {const result = await qrCodeReader.decode(image);return result; // 返回解码后的内容} catch (error) {console.error('解码失败:', error);return null; // 解码失败返回null}}
}

2. 使用 Zxing 组件

以下是如何在应用中使用 Zxing 来生成和解析二维码的示例代码：

import Zxing from './Zxing';function onCreate() {const qrData = "Hello, Zxing!"; // 要编码的数据const qrCodeImage = Zxing.generateQRCode(qrData); // 生成二维码的data URL// 显示二维码console.log('二维码生成成功:', qrCodeImage);// 假设你从某个地方获取了二维码图像数据进行解码const qrCodeToDecode = qrCodeImage; // 在真实场景中应传入实际图像// 解析二维码Zxing.decodeQRCode(qrCodeToDecode).then((result) => {if (result) {console.log('解码结果:', result); // 输出解码结果} else {console.log('解码失败');}});
}

解释一下代码：

  1. Zxing 类：

    • generateQRCode 方法：
      • 该方法用于生成二维码，接受要编码的数据和二维码的大小作为参数。
      • 使用 QRCode 类创建二维码，并设置错误校正级别和边距。
      • 返回生成的二维码数据 URL，可以直接用于 <img> 标签的 src 属性。
    • decodeQRCode 方法：
      • 异步解析传入的二维码图像数据，返回解码后的内容。
      • 如果解码失败，则返回 null。

  2. 使用示例：

    • 在 onCreate 方法中，首先定义要编码的字符串，然后调用 generateQRCode 方法生成二维码的图像数据 URL。
    • 可以将生成的二维码图像显示在用户界面上（例如通过 <img> 标签）。
    • 随后调用 decodeQRCode 方法解析二维码，输出解码后的结果。

通过这种设计，Zxing 组件为开发者提供了方便的二维码和条形码生成与解析功能，简化了相关操作，使得声明式应用开发更加高效。

9. ijkplayer

ijkplayer是OpenHarmony环境下可用的一款基于FFmpeg的视频播放器。

咱们来写一个基于 ArkTS 编写的 ijkplayer 示例代码，展示如何在 OpenHarmony 环境中使用基于 FFmpeg 的视频播放器 ijkplayer。ijkplayer 是一个强大的播放器，支持多种格式的视频播放，适用于开发丰富的多媒体应用。

1. IJKPlayer 组件示例 (IJKPlayer.ts)

// IJKPlayer.ts
import { Player } from 'ijkplayer-js'; // 假设引入ijkplayer相关的库export default class IJKPlayer {private player: Player;constructor(videoUrl: string) {this.player = new Player(); // 创建播放器实例this.player.setDataSource(videoUrl); // 设置视频源}// 播放视频play() {this.player.prepare().then(() => {this.player.start(); // 准备完成后开始播放}).catch(error => {console.error('播放失败:', error);});}// 暂停视频pause() {this.player.pause();}// 停止视频stop() {this.player.stop();}// 设置视频全屏setFullScreen() {this.player.setFullScreen(true);}// 销毁播放器release() {this.player.release();}
}

2. 使用 IJKPlayer 组件

以下是如何在应用中使用 IJKPlayer 播放视频的示例代码：

import IJKPlayer from './IJKPlayer';function onCreate() {const videoUrl = 'https://example.com/video.mp4'; // 视频源地址const player = new IJKPlayer(videoUrl); // 创建播放器实例// 播放视频player.play();// 假设在某个时刻你想暂停播放setTimeout(() => {player.pause();console.log('视频已暂停');}, 5000); // 5秒后暂停// 假设在某个时刻你想停止播放setTimeout(() => {player.stop();console.log('视频已停止');player.release(); // 释放播放器资源}, 10000); // 10秒后停止
}

解释一下代码：

  1. IJKPlayer 类：

    • 构造函数：接收视频 URL 并创建 Player 实例，设置视频源。
    • play 方法：准备视频并开始播放。使用 prepare 方法预加载视频，成功后调用 start 方法开始播放，失败时输出错误信息。
    • pause 方法：调用播放器的 pause 方法以暂停视频播放。
    • stop 方法：调用播放器的 stop 方法以停止视频播放。
    • setFullScreen 方法：设置视频为全屏播放。
    • release 方法：释放播放器资源，避免内存泄漏。

  2. 使用示例：

    • 在 onCreate 方法中，定义视频的 URL，并创建 IJKPlayer 实例。
    • 调用 play 方法开始播放视频。
    • 使用 setTimeout 模拟在 5 秒后暂停视频播放，并在 10 秒后停止播放和释放播放器资源。

通过这种设计，ijkplayer 提供了一种简单有效的方式来播放视频，适用于 OpenHarmony 环境中的多媒体应用开发。开发者可以根据需求添加更多功能，如控制音量、播放进度、切换视频源等。

10. pinyin4js

pinyin4js适配了OpenHarmony的一款汉字转拼音的Javascript开源库，包含如下特性:

  • 零依赖

  • 词库灵活导入,打包
    可以自行调整字典，具体可以参照src/dict；所有资源调用由PinyinResource封装，可自行修改后打包

  • 准确、完善的字库
    Unicode编码从4E00-9FA5范围及3007（〇）的20903个汉字中，pinyin4js能转换除46个异体字（异体字不存在标准拼音）之外的所有汉字

  • 拼音转换速度快
    经测试，从4E00-9FA5范围的20902个汉字，pinyin4js耗时约110毫秒

  • 多拼音格式输出支持
    支持多种拼音输出格式：带音标、不带音标、数字表示音标以及拼音首字母输出格式

  • 常见多音字识别
    支持常见多音字的识别，其中包括词组、成语、地名等

  • 简繁体中文转换

  • 支持添加自定义字典

咱们来写一个基于 ArkTS 编写的 pinyin4js 示例代码，展示如何在 OpenHarmony 环境中使用该库将汉字转换为拼音。pinyin4js 是一个开源库，提供了汉字到拼音的转换功能，非常适合需要处理中文文本的应用。

1. Pinyin4js 组件示例 (Pinyin4js.ts)

// Pinyin4js.ts
import { PinyinHelper } from 'pinyin4js'; // 假设引入pinyin4js相关的库export default class PinyinConverter {// 转换汉字为拼音static convertToPinyin(input: string): string[] {const pinyinArray = PinyinHelper.convertToPinyinString(input, "", PinyinHelper.WITH_TONE_MARK); // 生成拼音return pinyinArray.split(','); // 返回拼音数组}
}

2. 使用 PinyinConverter 组件

以下是如何在应用中使用 PinyinConverter 将汉字转换为拼音的示例代码：

import PinyinConverter from './Pinyin4js';function onCreate() {const chineseText = '汉字转拼音'; // 待转换的汉字const pinyinArray = PinyinConverter.convertToPinyin(chineseText); // 转换为拼音console.log('原文:', chineseText);console.log('拼音:', pinyinArray.join(', ')); // 输出拼音
}

解释一下代码：

  1. PinyinConverter 类：

    • convertToPinyin 方法：
      • 接收一个汉字字符串作为输入，使用 PinyinHelper.convertToPinyinString 方法将其转换为拼音字符串。
      • convertToPinyinString 的参数说明：
        • 第一个参数是待转换的汉字字符串。
        • 第二个参数是连接符，这里使用空字符串（""）表示拼音之间不使用连接符。
        • 第三个参数指定拼音的格式，这里选择 PinyinHelper.WITH_TONE_MARK 以带音调的拼音形式返回。
      • 最后将拼音字符串按逗号分割并返回拼音数组。

  2. 使用示例：

    • 在 onCreate 方法中，定义待转换的汉字字符串，然后调用 convertToPinyin 方法进行转换。
    • 输出原文和转换后的拼音。

通过这种设计，pinyin4js 提供了一种简便的方式来处理汉字与拼音之间的转换，非常适合在涉及中文文本的应用中使用，开发者可以根据需求对其进行扩展或修改。

最后

HarmonyOS NEXT 正式版即将发布，你在学习鸿蒙的过程还有哪些好用的工具库吗，欢迎分享给V 哥，关注威哥爱编程，一起学习鸿蒙开发。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1551601.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

YOLO11震撼发布！

YOLO11震撼发布！

非常高兴地向大家介绍 Ultralytics YOLO系列的新模型&#xff1a; YOLO11&#xff01; YOLO11 在以往 YOLO 模型基础上带来了一系列强大的功能和优化&#xff0c;使其速度更快、更准确、用途更广泛。主要改进包括 增强了特征提取功能&#xff0c;从而可以更精确地捕捉细节以更…
阅读更多...
编程魔法：基于LLM的AI function开发，如何实现高效数据生成？

编程魔法：基于LLM的AI function开发，如何实现高效数据生成？

基于大语言模型&#xff08;LLM&#xff09;的AI function开发&#xff0c;简直就是现代编程界的“魔法棒”&#xff01; 你好&#xff0c;我是三桥君 最近三桥君有个任务&#xff0c;需要造一些测试数据&#xff0c;比如姓名、手机号、银行卡号、邮箱啥的&#xff0c;用来做测…
阅读更多...
PV大题--专题突破

PV大题--专题突破

写在前面&#xff1a; PV大题考查使用伪代码控制进程之间的同步互斥关系&#xff0c;它需要我们一定的代码分析能力&#xff0c;算法设计能力&#xff0c;有时候会给你一段伪代码让你补全使用信号量控制的操作&#xff0c;请一定不要相信某些人告诉你只要背一个什么模板&#…
阅读更多...
新手必知的录屏工具及其使用方法详解

新手必知的录屏工具及其使用方法详解

你平常会录屏吗&#xff1f;录屏已经成为了一项非常实用的技能。无论是制作教学视频还是记录游戏精彩瞬间&#xff0c;录屏都可以帮我们记录我们在电脑上看到的精彩瞬间。今天我们就一同来探索在电脑上如何录屏吧。 1.福昕录屏工具 链接&#xff1a;www.foxitsoftware.cn/REC…
阅读更多...
太速科技-FMCJ457-基于JESD204B的2路2Gsps AD 2路2Gsps DA FMC子卡

太速科技-FMCJ457-基于JESD204B的2路2Gsps AD 2路2Gsps DA FMC子卡

FMCJ457-基于JESD204B的2路2Gsps AD 2路2Gsps DA FMC子卡 一、板卡概述 该子卡是高速AD9172 DAC和AD9689 ADC的FMC板。为客户提供高达2 GHz 的可用模拟带宽以及 JESD204B 接口&#xff0c;以快速地对各种宽带 RF 应用进行原型制作。 AD芯片AD9689&#xff0c;AD9689-2…
阅读更多...
Ceph RocksDB 深度调优

Ceph RocksDB 深度调优

介绍 调优 Ceph 可能是一项艰巨的挑战。在 Ceph、RocksDB 和 Linux 内核之间&#xff0c;实际上有数以千计的选项可以进行调整以提高存储性能和效率。由于涉及的复杂性&#xff0c;比较优的配置通常分散在博客文章或邮件列表中&#xff0c;但是往往都没有说明这些设置的实际作…
阅读更多...
论文翻译 | LLaMA-Adapter :具有零初始化注意的语言模型的有效微调

论文翻译 | LLaMA-Adapter :具有零初始化注意的语言模型的有效微调

摘要 我们提出了一种轻量级的自适应方法&#xff0c;可以有效地将LLaMA微调为指令遵循模型。lama - adapter采用52K自指导演示&#xff0c;在冻结的LLaMA 7B模型上只引入1.2M可学习参数&#xff0c;在8个A100 gpu上进行微调花费不到一个小时。具体来说&#xff0c;我们采用了一…
阅读更多...
armbian安装docker

armbian安装docker

最近又搞了台瑞莎Radxa 3E &#xff0c;从零开始部署unbuntu环境&#xff0c;发现是真曲折啊&#xff0c;虽然有点前车之鉴了 在Armbian上安装Docker&#xff0c;可以按照以下步骤操作&#xff1a; 1、更新软件包列表&#xff1a; sudo apt-get update 2、安装必要的软件包…
阅读更多...
【C++篇】领略模板编程的进阶之美：参数巧思与编译的智慧

【C++篇】领略模板编程的进阶之美：参数巧思与编译的智慧

文章目录 C模板进阶编程前言第一章: 非类型模板参数1.1 什么是非类型模板参数&#xff1f;1.1.1 非类型模板参数的定义 1.2 非类型模板参数的注意事项1.3 非类型模板参数的使用场景示例&#xff1a;静态数组的实现 第二章: 模板的特化2.1 什么是模板特化&#xff1f;2.1.1 模板…
阅读更多...
安防监控/智慧安防EasyCVR视频汇聚监控平台无法启动并报错“no space left on service”是什么原因？

安防监控/智慧安防EasyCVR视频汇聚监控平台无法启动并报错“no space left on service”是什么原因？

视频汇聚/安防监控/智慧安防EasyCVR视频监控平台&#xff0c;作为一款智能视频监控综合管理平台&#xff0c;凭借其强大的视频融合汇聚能力和灵活的视频能力&#xff0c;在各行各业的应用中发挥着越来越重要的作用。平台可以引入AI智能分析能力&#xff0c;能够实现对视频中的特…
阅读更多...
DRF实操——支付宝的介绍与对接支付宝

DRF实操——支付宝的介绍与对接支付宝

DRF实操——支付宝的介绍与对接支付宝 1. 支付宝的介绍实际上线环境&#xff1a;开发环境&#xff1a; 2. DRF对接支付宝1. 创建配置文件2. 在setting文件中&#xff0c;做支付宝配置3. 安装支付宝第三方库4. 在setting文件中实例化支付宝对象5.创建模型&#xff0c;保存订单的…
阅读更多...
【以图搜图代码实现2】--faiss工具实现犬类以图搜图

【以图搜图代码实现2】--faiss工具实现犬类以图搜图

第一篇&#xff1a;【以图搜图代码实现】–犬类以图搜图示例 使用保存成h5文件&#xff0c;使用向量积来度量相似性&#xff0c;实现了以图搜图&#xff0c;说明了可以优化的点。 第二篇&#xff1a;【使用resnet18训练自己的数据集】 准对模型问题进行了优化&#xff0c;取得了…
阅读更多...
【完-网络安全】Windows用户

【完-网络安全】Windows用户

文章目录 内置账号用户组通过命令行管理用户 内置账号 通过注销切换用户账号 Administrator用户 该帐号为系统默认的管理员帐号&#xff0c;该帐户具有Windows的最高管理权限&#xff0c;默认禁用。 Guest用户&#xff0c;来宾账户 可运行部分抵权限程序&#xff0c;查看部分文…
阅读更多...
【STM32单片机_(HAL库)】4-0【定时器TIM】定时器中断配置步骤

【STM32单片机_(HAL库)】4-0【定时器TIM】定时器中断配置步骤

定时器工作原理 定时器计数模式 定时器溢出时间计算 定时器中断实验配置步骤 msp 函数是对 MCU 相关的硬件进行初始化设置&#xff0c;通常被设计用于处理特定硬件外设或功能的底层初始化工作。
阅读更多...
redis的数据结构，内存处理，缓存问题

redis的数据结构，内存处理，缓存问题

redisObject redis任意数据的key和value都会被封装为一个RedisObject&#xff0c;也叫redis对象&#xff1a; 这就redis的头信息&#xff0c;占有16个字节 redis中有两个热门数据结构 1.SkipList&#xff0c;跳表&#xff0c;首先是链表&#xff0c;和普通链表有以下差异&am…
阅读更多...
前端工程规范-2：JS代码规范（Prettier + ESLint）

前端工程规范-2：JS代码规范（Prettier + ESLint）

Prettier 和 ESLint 是两个在现代 JavaScript 开发中广泛使用的工具&#xff0c;它们结合起来可以提供以下作用和优势&#xff1a; 代码格式化和风格统一&#xff1a; Prettier 是一个代码格式化工具&#xff0c;能够自动化地处理代码的缩进、空格、换行等格式问题&#xff0c;…
阅读更多...
【STM32单片机_(HAL库)】4-2【定时器TIM】定时器输出PWM配置步骤

【STM32单片机_(HAL库)】4-2【定时器TIM】定时器输出PWM配置步骤

PWM介绍 PWM波形&#xff08;Pulse Width Modulation&#xff0c;脉冲宽度调制波形&#xff09;是一种占空比可变的脉冲波形。 频率 1/Ts 占空比 Ton / Ts 分辨率 占空比变化步距 定时器输出PWM配置
阅读更多...
2024年十大热门人力资源管理系统对比与推荐

2024年十大热门人力资源管理系统对比与推荐

本文介绍了ZohoPeople、金蝶云、用友、北森等10款热门HRMS系统&#xff0c;包括各自特点如ZohoPeople的全球化管理、北森的全面人才管理等。建议企业先试用再决定购买&#xff0c;以找到最适合的系统。 一、Zoho People Zoho People 是一个基于云的全球化人力资源管理系统 (HR…
阅读更多...
啤酒在文学中的浪漫形象：精酿啤酒的诗意之旅

啤酒在文学中的浪漫形象：精酿啤酒的诗意之旅

在文学的浩瀚星空中&#xff0c;啤酒并非仅仅是醉人的琼浆&#xff0c;它更是一种情感的载体&#xff0c;一种浪漫的符号。尤其是当提及Fendi Club精酿啤酒时&#xff0c;我们仿佛能闻到那从古老酒窖中飘出的馥郁香气&#xff0c;感受到它在文字间流淌的诗意与温情。 一、啤酒…
阅读更多...
鸿蒙开发（NEXT/API 12）【请求用户授权】手机侧应用开发

鸿蒙开发（NEXT/API 12）【请求用户授权】手机侧应用开发

为保护用户隐私&#xff0c;Wear Engine的API需要用户授权才可以正常访问。建议开发者在用户首次调用Wear Engine开放能力的时候执行本章节操作。 申请用户穿戴设备权限 应用拉起华为账号登录和授权界面&#xff0c;由用户授权相应的数据访问权限。用户可以自主选择授权的数据…
阅读更多...
最新文章

Copyright @ 2022~2023