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 (
      <Text
        value={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); // false
  const 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>
  );
}

来解释一下代码：

字符串工具类 StrUtil：提供一些常用的字符串操作方法，例如判断字符串是否为空、转换为大写、检查是否包含子字符串等。这些方法旨在简化开发中对字符串的常见处理操作。
扩展的UI组件 ExtTextComponent：封装了基于 HarmonyOS UI 组件的文本展示逻辑。renderText 方法可以方便地展示带有自定义样式的文本，而 renderTextList 方法则进一步扩展，允许批量展示文本列表。
整合示例：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 API
    console.log(`Short Toast: ${message}`);
  }

  // 显示长时间提示
  static showToastLong(message: string) {
    // 使用HarmonyOS的Toast API
    console.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秒后退出应用
}

解释一下代码：

App工具类 (AppUtil)：封装了与应用相关的操作，提供获取应用信息和退出应用的功能。这些操作可以帮助开发者更方便地获取应用元信息和控制应用生命周期。
设备工具类 (DeviceUtil)：用于获取设备的基本信息（品牌、型号、操作系统版本）以及屏幕信息（分辨率和密度），让开发者在不同设备上自适应界面设计。
日期工具类 (DateUtil)：封装了日期操作，可以获取当前日期并进行格式化，方便开发者处理时间相关逻辑。
吐司工具类 (ToastUtil)：用于在应用中显示提示消息，简化了对系统吐司的调用，支持短时间和长时间两种不同的显示模式。
整合示例：通过 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-circle
          color="#00BFFF"
          strokeWidth={5}
          radius={30}
        />
      </div>
    );
  }

  // 三个弹跳点动画
  static ThreeBounceSpinner() {
    return (
      <div>
        <progress-bouncing-dots
          color="#00BFFF"
          dotRadius={10}
          bounceHeight={20}
        />
      </div>
    );
  }

  // 矩形方块加载动画
  static RectangleSpinner() {
    return (
      <div>
        <progress-rectangles
          color="#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>
  );
}

解释一下：

SpinKit 动画组件：封装了几种常见的加载动画样式，分别是：
- CircleSpinner：圆形旋转加载动画，使用 progress-circle 标签实现，设置了颜色、半径、以及线宽。
- ThreeBounceSpinner：三个弹跳点动画，使用 progress-bouncing-dots 标签实现，设置了颜色、点的半径以及弹跳高度。
- RectangleSpinner：矩形方块加载动画，使用 progress-rectangles 标签实现，设置了方块的宽高、颜色、以及方块间的间距。
使用 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 {
  // 显示AlertDialog
  static showAlertDialog(title: string, message: string) {
    return (
      <dialog
        type="alert"
        title={title}
        message={message}
        buttonText="OK"
        onButtonClick={() => console.log('AlertDialog OK clicked')}
      />
    );
  }

  // 显示ConfirmDialog
  static showConfirmDialog(title: string, message: string, onConfirm: () => void, onCancel: () => void) {
    return (
      <dialog
        type="confirm"
        title={title}
        message={message}
        confirmButtonText="Yes"
        cancelButtonText="No"
        onConfirmClick={onConfirm}
        onCancelClick={onCancel}
      />
    );
  }

  // 显示LoadingDialog
  static showLoadingDialog(message: string) {
    return (
      <dialog
        type="loading"
        message={message}
      />
    );
  }

  // 显示Toast消息
  static showToast(message: string, duration: number = 2000) {
    setTimeout(() => {
      console.log(`Toast: ${message}`);
    }, duration);
  }

  // 显示TextInputDialog
  static showTextInputDialog(title: string, onConfirm: (input: string) => void) {
    let inputValue = '';
    return (
      <dialog
        type="text-input"
        title={title}
        inputHint="Enter text here"
        onConfirmClick={() => onConfirm(inputValue)}
      />
    );
  }
}

2. 使用 `DialogUtil` 弹窗示例

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

import DialogUtil from './DialogUtil';

function onCreate() {
  // 显示AlertDialog
  const alertDialog = DialogUtil.showAlertDialog('Alert', 'This is an alert dialog.');
  
  // 显示ConfirmDialog
  const confirmDialog = DialogUtil.showConfirmDialog(
    'Confirm',
    'Do you want to continue?',
    () => console.log('Confirmed'),
    () => console.log('Cancelled')
  );
  
  // 显示LoadingDialog
  const loadingDialog = DialogUtil.showLoadingDialog('Loading, please wait...');

  // 显示Toast
  DialogUtil.showToast('This is a toast message');
  
  // 显示TextInputDialog
  const textInputDialog = DialogUtil.showTextInputDialog('Input', (input: string) => {
    console.log(`Input received: ${input}`);
  });
  
  // 将这些弹窗按需渲染在界面上
  return (
    <View>
      {alertDialog}
      {confirmDialog}
      {loadingDialog}
      {textInputDialog}
    </View>
  );
}

解释一下代码：

DialogUtil 弹窗库：
- AlertDialog：简单的提示框，只有一个“OK”按钮，用于显示紧急或重要信息。
- ConfirmDialog：带确认和取消按钮的确认框，用户可以选择确认或取消操作，分别执行不同的回调函数。
- LoadingDialog：用于显示加载中的进度提示，常用于网络请求或其他异步任务。
- Toast：简短的提示信息，自动消失，常用于向用户展示非阻塞的提示。
- TextInputDialog：带有文本输入框的对话框，用户可以输入信息并确认。
使用示例：
- 在 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-refresh
        onRefresh={() => 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>
  );
}

解释一下：

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

详细解释：

ImageCache 类：
- 缓存结构：使用 Map 存储图像的 URL 和对应的图像数据。这个结构允许快速存取。
- 最大缓存大小：通过 maxSize 属性限制缓存的最大数量。当缓存达到最大限制时，最久未使用的图像会被移除以腾出空间（实现了简单的 LRU 策略）。
- 获取和存储：get 方法用于从缓存中获取图像，set 方法用于将图像存入缓存并管理缓存大小。
ImageKnife 类：
- 图像加载：loadImage 方法用于加载图像。首先检查缓存中是否已有图像，如果有则直接返回。如果没有，则模拟网络请求加载图像并将其存入缓存。
- 异步处理：使用 Promise 来处理异步加载的结果，使得调用该方法时可以使用 .then() 方法处理加载结果。
使用示例：
- 在 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>
          <lineChart
            labels={this.labels}
            data={this.data}
            lineColor="#ff5733"
            fillColor="rgba(255, 87, 51, 0.3)"
          />
        </canvas>
      </view>
    );
  }

  // 渲染柱状图
  private renderBarChart() {
    return (
      <view>
        <text>柱状图</text>
        <canvas>
          <barChart
            labels={this.labels}
            data={this.data}
            barColor="#33c1ff"
          />
        </canvas>
      </view>
    );
  }

  // 渲染饼图
  private renderPieChart() {
    return (
      <view>
        <text>饼图</text>
        <canvas>
          <pieChart
            labels={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>
  );
}

解释一下代码：

MPChart 类：
- 构造函数：接收图表的标签、数据和类型（如折线图、柱状图、饼图）。
- renderChart 方法：根据图表类型调用相应的渲染方法。
- 渲染方法：
  - renderLineChart：渲染折线图，使用 lineChart 组件。
  - renderBarChart：渲染柱状图，使用 barChart 组件。
  - renderPieChart：渲染饼图，使用 pieChart 组件。
使用示例：
- 在 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('解码失败');
    }
  });
}

解释一下代码：

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

解释一下代码：

IJKPlayer 类：
- 构造函数：接收视频 URL 并创建 Player 实例，设置视频源。
- play 方法：准备视频并开始播放。使用 prepare 方法预加载视频，成功后调用 start 方法开始播放，失败时输出错误信息。
- pause 方法：调用播放器的 pause 方法以暂停视频播放。
- stop 方法：调用播放器的 stop 方法以停止视频播放。
- setFullScreen 方法：设置视频为全屏播放。
- release 方法：释放播放器资源，避免内存泄漏。
使用示例：
- 在 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(', ')); // 输出拼音
}

解释一下代码：

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

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

最后

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

posted @ 2024-09-30 09:27 威哥爱编程阅读(1119) 评论(0) 编辑收藏举报

刷新页面返回顶部

威哥爱编程

华为开发者专家（HDE）：专注于 Java、HarmonyOS、AI 大模型、Go技术分享

10款好用的开源 HarmonyOS 工具库

1. efTool

1. 字符串工具类 (StrUtil)

2. 扩展的UI组件示例

3. 使用 StrUtil 和 扩展的 ExtTextComponent

来解释一下代码：

2. harmony-utils

1. APP工具类 (AppUtil)

2. 设备工具类 (DeviceUtil)

3. 日期工具类 (DateUtil)

4. 吐司工具类 (ToastUtil)

5. 使用 harmony-utils 中的工具

解释一下代码：

3. SpinKit(API12 - 5.0.3.800)

1. SpinKit 动画组件示例

2. 使用 SpinKit 加载动画

解释一下：

4. harmony-dialog

1. 弹窗库示例 (DialogUtil)

2. 使用 DialogUtil 弹窗示例

解释一下代码：

5. PullToRefresh

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

2. 使用 PullToRefresh 组件

解释一下：

6. ImageKnife

1. ImageKnife 库示例 (ImageKnife.ts)

2. 使用 ImageKnife 组件

详细解释：

7. mpchart

1. MPChart 库示例 (MPChart.ts)

2. 使用 MPChart 组件

解释一下代码：

8. Zxing

1. Zxing 库示例 (Zxing.ts)

2. 使用 Zxing 组件

解释一下代码：

9. ijkplayer

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

2. 使用 IJKPlayer 组件

解释一下代码：

10. pinyin4js

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

2. 使用 PinyinConverter 组件

解释一下代码：

最后

公告

1. 字符串工具类 (`StrUtil`)

3. 使用 `StrUtil` 和扩展的 `ExtTextComponent`

1. APP工具类 (`AppUtil`)

2. 设备工具类 (`DeviceUtil`)

3. 日期工具类 (`DateUtil`)

4. 吐司工具类 (`ToastUtil`)

5. 使用 `harmony-utils` 中的工具

1. `SpinKit` 动画组件示例

2. 使用 `SpinKit` 加载动画

1. 弹窗库示例 (`DialogUtil`)

2. 使用 `DialogUtil` 弹窗示例

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

2. 使用 `PullToRefresh` 组件

1. `ImageKnife` 库示例 (`ImageKnife.ts`)

2. 使用 `ImageKnife` 组件

1. `MPChart` 库示例 (`MPChart.ts`)

2. 使用 `MPChart` 组件

1. `Zxing` 库示例 (`Zxing.ts`)

2. 使用 `Zxing` 组件

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

2. 使用 `IJKPlayer` 组件

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

2. 使用 `PinyinConverter` 组件