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.rhkb.cn/news/440172.html

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

相关文章

全球IP归属地查询-IP地址查询-IP城市查询-IP地址归属地-IP地址解析-IP位置查询-IP地址查询API接口

全球IP归属地查询-IP地址查询-IP城市查询-IP地址归属地-IP地址解析-IP位置查询-IP地址查询API接口

IP地址城市版查询接口 API是指能够根据IP地址查询其所在城市等地理位置信息的API接口。这类接口在网络安全、数据分析、广告投放等多个领域有广泛应用。以下是一些可用的IP地址城市版查询接口API及其简要介绍 1. 快证 IP归属地查询API 特点&#xff1a;支持IPv4 提供高精版、…
阅读更多...
k8s 中微服务之 MetailLB 搭配 ingress-nginx 实现七层负载

k8s 中微服务之 MetailLB 搭配 ingress-nginx 实现七层负载

目录 1 MetailLB 搭建 1.1 MetalLB 的作用和原理 1.2 MetalLB功能 1.3 部署 MetalLB 1.3.1 创建deployment控制器和创建一个服务 1.3.2 下载MealLB清单文件 1.3.3 使用 docker 对镜像进行拉取 1.3.4 将镜像上传至私人仓库 1.3.5 将官方仓库地址修改为本地私人地址 1.3.6 运行清…
阅读更多...
【前端】-音乐播放器（源代码和结构讲解，大家可以将自己喜欢的歌曲添加到数据当中，js实现页面动态显示音乐）

【前端】-音乐播放器（源代码和结构讲解，大家可以将自己喜欢的歌曲添加到数据当中，js实现页面动态显示音乐）

前言&#xff1a;音乐播放器是前端开发中的一个经典项目&#xff0c;通过它可以掌握很多核心技术&#xff0c;如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能&#xff0c;还能让开发者深入理解JavaScript与HTML的协同作用。 页面展示&#xff1…
阅读更多...
Web安全 - 文件上传漏洞（File Upload Vulnerability）

Web安全 - 文件上传漏洞（File Upload Vulnerability）

文章目录 OWASP 2023 TOP 10导图定义攻击场景1. 上传恶意脚本2. 目录遍历3. 覆盖现有文件4. 文件上传结合社会工程攻击 防御措施1. 文件类型验证2. 文件名限制3. 文件存储位置4. 文件权限设置5. 文件内容检测6. 访问控制7. 服务器配置 文件类型验证实现Hutool的FileTypeUtil使用…
阅读更多...
Python中的机器学习：从入门到实战

Python中的机器学习：从入门到实战

机器学习是人工智能领域的一个重要分支&#xff0c;它通过构建模型来使计算机从数据中学习并做出预测或决策。Python凭借其丰富的库和强大的生态系统&#xff0c;成为了机器学习的首选语言。本文将从基础到实战&#xff0c;详细介绍如何使用Python进行机器学习&#xff0c;涵盖…
阅读更多...
【汇编语言】寄存器（CPU工作原理）（二）—— 汇编指令的基础操作

【汇编语言】寄存器（CPU工作原理）（二）—— 汇编指令的基础操作

文章目录 前言正文——&#xff08;一气呵成解决本文内容&#xff09;结语 前言 &#x1f4cc; 汇编语言是很多相关课程&#xff08;如数据结构、操作系统、微机原理&#xff09;的重要基础。但仅仅从课程的角度出发就太片面了&#xff0c;其实学习汇编语言可以深入理解计算机底…
阅读更多...
Android Framework AMS（02）AMS启动及相关初始化5-8

Android Framework AMS（02）AMS启动及相关初始化5-8

该系列文章总纲链接&#xff1a;专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节主要涉及systemserver启动AMS及初始化AMS相关操作。同时由于该部分内容过多&#xff0c;因此拆成2个章节&#xff0c;本章节是第二章节&…
阅读更多...
LabVIEW提高开发效率技巧----使用动态事件

LabVIEW提高开发效率技巧----使用动态事件

在LabVIEW开发过程中&#xff0c;用户交互行为可能是多样且不可预知的。为应对这些变化&#xff0c;使用动态事件是一种有效的策略。本文将从多个角度详细介绍动态事件的概念及其在LabVIEW开发中的应用技巧&#xff0c;并结合实际案例&#xff0c;说明如何通过动态事件提高程序…
阅读更多...
Vector不清晰点学习易错点

Vector不清晰点学习易错点

什么是迭代器 是一个广义指针它可以是指针&#xff0c;也可以是一个可对其执行类似指针得操作-如解除引用&#xff08;如operator*()&#xff09;和递增&#xff08;operator()&#xff09;STL中每个容器类都定义了一个合适的迭代器&#xff0c;该迭代器的类型是一个名为itera…
阅读更多...
【Python游戏开发】贪吃蛇游戏demo拓展

【Python游戏开发】贪吃蛇游戏demo拓展

拓展上一项目【Python游戏开发】贪吃蛇 实现穿墙效果 # 检测游戏是否结束 def check_gameover():global finished# 移除蛇头位置超过窗口判断for n in range(len(body) - 1):if(body[n].x snake_head.x and body[n].y snake_head.y):finished True # 状态检测 def ch…
阅读更多...
html5 + css3（下）

html5 + css3（下）

目录 CSS基础基础认识体验cssCSS引入方式 基础选择器选择器-标签选择器-类选择器-id选择器-通配符 字体和文本样式1.1 字体大小1.2 字体粗细1.3 字体样式&#xff08;是否倾斜&#xff09;1.4 常见字体系列&#xff08;了解&#xff09;1.5 字体系列拓展-层叠性font复合属性文本…
阅读更多...
oh-crop: OpenHarmony/HarmonyOS上的简单的图片剪裁库，可用于头像剪裁等常见场景。

oh-crop: OpenHarmony/HarmonyOS上的简单的图片剪裁库，可用于头像剪裁等常见场景。

&#x1f4da; 简介 oh-crop: OpenHarmony/HarmonyOS上的简单的图片剪裁库&#xff0c;可用于头像剪裁等常见场景。 代码仓库&#xff1a;oh-crop &#x1f4da; 下载安装 ohpm i xinyansoft/oh-cropOpenHarmony ohpm 环境配置等更多内容&#xff0c;请参考: 下载安装三方库…
阅读更多...
一个值得关注的3D生成新算法：速度和图像生成平齐，能生成合理的展开贴图和高质量mesh

一个值得关注的3D生成新算法：速度和图像生成平齐，能生成合理的展开贴图和高质量mesh

今天跟大家介绍的GIMDiffusion是一种新的Text-to-3D模型&#xff0c;利用几何图像&#xff08;Geometry Images&#xff09;来高效地表示3D形状&#xff0c;避免了复杂的3D架构。通过结合现有的Text-to-Image模型如Stable Diffusion的2D先验知识&#xff0c;GIMDiffusion能够在…
阅读更多...
【数据结构】【链表代码】相交链表

【数据结构】【链表代码】相交链表

/*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/typedef struct ListNode ListNode; struct ListNode *getIntersectionNode(struct ListNode *headA, struct ListNode *headB) {//先求出两个链表的长度ListNode…
阅读更多...
Unity 编辑器多开

Unity 编辑器多开

开发多人联机的功能时大多数会遇到测试机不方便的问题。想多开同一个项目Uinty又禁止。。。因为在使用Unity Editor打开一个项目时&#xff0c;Unity Editor会在项目目录建立一个Temp目录&#xff0c;同时对里面的一个UnityLockfile文件进行加锁。SO...可以使用以下方法进行多开…
阅读更多...
【easypoi 一对多导入解决方案】

【easypoi 一对多导入解决方案】

easypoi 一对多导入解决方案 1.需求2.复现问题2.1校验时获取不到一对多中多的完整数据2.2控制台报错 Cannot add merged region B5:B7 to sheet because it overlaps with an existing merged region (B3:B5). 3.如何解决第二个问题处理&#xff1a; Cannot add merged region …
阅读更多...
ISO IEC 18004 2015 PDF 文字版下载

ISO IEC 18004 2015 PDF 文字版下载

ISO_IEC_18004_2015_en-US - 道客巴巴 (doc88.com)https://www.doc88.com/p-67816330893254.html
阅读更多...
Kafka和RabbitMQ区别

Kafka和RabbitMQ区别

RabbitMQ的消息延迟是微秒级&#xff0c;Kafka是毫秒级&#xff08;1毫秒1000微秒&#xff09; 延迟消息是指生产者发送消息发送消息后&#xff0c;不能立刻被消费者消费&#xff0c;需要等待指定的时间后才可以被消费。 Kafka的单机呑吐量是十万级&#xff0c;RabbitMQ是万级…
阅读更多...
vSAN02：容错、存储策略、文件服务、快照与备份、iSCSI

vSAN02：容错、存储策略、文件服务、快照与备份、iSCSI

目录 vSAN容错条带化存储策略1. 创建新策略2. 应用存储策略 vSAN文件服务文件服务快照与备份 vSAN iSCSI目标服务 vSAN容错 FTT&#xff1a;Fault to Tolerance 允许故障数 故障域&#xff1a;每一台vSAN主机是一个故障域 - 假设3台超融合&#xff08;3计算1存储&#xff09;&…
阅读更多...
【Kubernetes】常见面试题汇总（五十四）

【Kubernetes】常见面试题汇总（五十四）

目录 120.创建 init C 容器后&#xff0c;其状态不正常&#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 69-113 属于【Kubernetes】的生产…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023