DEV Community: 桃花镇童长老

HarmonyOS application one click graying guide

桃花镇童长老 — Sun, 29 Jun 2025 15:57:04 +0000

One-click graying is usually used in the following scenarios

1. Major memorial activities:

In special times such as major disasters, accidents or memorial days in the country, in order to express respect and condolences for the deceased, many APPs will put the interface in the dust. For example, after some earthquakes, air crashes and other disasters, as well as during national mourning days, a large number of APPs will respond to the call to put aside one-click dust. This is not only an emotional expression, but also a reflection of the social responsibility of enterprises and platforms.

2. Special anniversary or themed event:

For certain anniversary events with special significance, the APP may choose a gray interface to create a specific atmosphere. For example, on days related to historical events such as the Victory Anniversary of the Anti-Fascist War, some historical and cultural apps or related topics may guide users to pay attention and remember these important moments by putting them in the dust.

3. Simulate special visual effects or user experience scenarios:

In some specific application scenarios, in order to bring a unique visual experience to the user or simulate a specific situation, the APP will use the graying function. For example, in some movies and TV series promotional apps, in order to create a nostalgic, retro or specific plot atmosphere, the interface may be placed in one click, making the user feel like he is in a specific era background; or in some game apps, specific levels or scenes may need to be placed in gray to increase the mystery, tension or highlight specific elements of the game.

4. System or APP maintenance and upgrade:

When the APP is maintained, upgraded or failed, in order to clearly prompt the user for unavailability of the APP, the interface may be grayed out and relevant maintenance prompts are displayed. This can prevent users from continuing to operate without knowing it, reduce users' confusion and dissatisfaction, and also facilitate the development team to carry out maintenance work.

Implementation plan

1. Component common attribute grayscale

grayscale(value: number) Adds a grayscale effect to the component.
value, adds a grayscale effect to the current component. The value is defined as the ratio of grayscale conversion. If the parameter is 1.0, it will be completely converted to a grayscale image. If the parameter is 0.0, the image will not change. When the parameter is between 0.0 and 1.0, the effect will change linearly. (Percent); Default value: 0.0; Value range: [0.0, 1.0]; Description: When setting a value less than 0.0, it is processed as 0.0, and when setting a value greater than 1.0, it is processed as 1.0.

Image($r('app.media.image')).width('90%').height(30).grayscale(0.7)
Image($r('app.media.image')).width('90%').height(30).grayscale(1)

Text('为组件添加灰度效果').fontSize(15).fontColor(0xFF0000).grayscale(1)

Encapsulate a common graying component, which is wrapped with all pages.

2. Window properties setWindowGrayScale

setWindowGrayScale(grayScale: number): Promise
Set window grayscale and use Promise asynchronous callback. This interface needs to be called after calling loadContent() or setUIContent() to make the window load the page content.
grayScale, window grayscale. This parameter is a floating point number and takes the value range [0.0, 1.0]. 0.0 means that the window image has no change, 1.0 means that the window image is completely converted to a grayscale image, and the effect changes linearly from 0.0 to 1.0.

import { BusinessError } from '@kit.BasicServicesKit';

windowClass?.setUIContent('pages/Index', (error: BusinessError) => {
  if (error.code) {
    console.error(`Failed to set the content. Cause code: ${error.code}`);
    return;
  }
  console.info('Succeeded in setting the content.');
  let grayScale: number = 0.5;
  try {
    if (canIUse("SystemCapability.Window.SessionManager")) {
      let promise = windowClass?.setWindowGrayScale(grayScale);
      promise?.then(() => {
        console.info('Succeeded in setting the grayScale.');
      }).catch((err: BusinessError) => {
        console.error(`Failed to set the grayScale. Cause code: ${err.code}, message: ${err.message}`);
      });
    }
  } catch (exception) {
    console.error(`Failed to set the grayScale. Cause code: ${exception.code}, message: ${exception.message}`);
  }
});

3. Use the tool libraryharmony-utils

Call the tool class method, AppUtil.setGrayScale(1);

AppUtil.setGrayScale(0.7); //设置灰度0.7
AppUtil.setGrayScale(1); //设置全灰
AppUtil.setGrayScale(1, true); //只置灰主窗口

AppUtil.setGrayScale(0); //取消置灰

harmony-utils

桃花镇童长老 — Sun, 29 Jun 2025 15:49:59 +0000

harmony-utils(API12+)

🏆Introduction and Description

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications. Its encapsulated tools cover APP, device, screen, authorization, notification, inter-thread communication, pop-up frames, toast, biometric authentication, user preferences, taking photos, albums, scanning codes, files, logs, exception capture, characters, strings, numbers, collections, dates, random, base64, encryption, decryption, JSON and other functions, which can meet various development needs.

picker_utils It is a sub-store split by harmony-utils, including PickerUtil, PhotoHelper, and ScanUtil.

*📚 Warm reminder: *
📕 Harmony-utils is a lightweight framework that integrates more than 50 tool classes, but it is only 130KB in size. Achieve the ultimate balance between tool count and lightweight performance.
📙 Starting from version 1.3.2, the methods in the harmony-utils tool library will no longer be directly discarded. Please feel free to use it in third-party libraries and projects.
📒 In the update record, each version number has the corresponding minimum development tool version, such as: "DevEco Studio 5.1.0 Release".
📗 Please read the documentation carefully and view the use case before using the framework. 🙏
📘 See, please! Follow the official account of "Elder Tong" quickly, and you are waiting for you to unlock it.
📔 Creation is not easy, please give Elder Tong a thumbs up 👍github❤️ gitee❤️ 三方库❤️

🌞Download, installation and use instructions 🙏

ohpm i @pura/harmony-utils

OpenHarmony ohpm environment configuration and more, please refer to如何安装 OpenHarmony ohpm 包

全局初始化方法，从1.2.0版本开始，在UIAbility的onCreate方法中初始化 AppUtil.init()

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    AppUtil.init(this.context);
  }

📂Module Introduction

Module	Introduction
AppUtil	APP-related tool categories
DeviceUtil	Device-related tools
WindowUtil	Window related tool classes
DisplayUtil	Screen related tools
PermissionUtil	Application Authorization Tools
AuthUtil	Mobile phone biometric authentication (fingerprint, face, password) tools
NetworkUtil	Network related tools
FileUtil	File operation related tool categories
ImageUtil	Picture-related tools
PreviewUtil	File Preview Tools
LocationUtil	Positioning Tool Class (WGS-84 Coordinate System)
LogUtil	Log Tools
CrashUtil	Global exception capture, crash log collection
EmitterUtil	Emitter tool class (for inter-thread communication)
WantUtil	Want Tools
KvUtil	Key-value database tool class
PreferencesUtil	Preferences (User Preferences) Tool Class
CacheUtil	Cache Tools
LRUCacheUtil	LRUCache Cache Tool Class
NotificationUtil	Notification Tools
SnapshotUtil	Component screenshot and window screenshot tool class.
KeyboardUtil	Keyboard Tools
PasteboardUtil	Clipboard Tools
AssetUtil	Key Asset Storage Service Tools
ResUtil	Resource Tools
ObjectUtil	Object Tool Class
JSONUtil	JSON Tool Class
DateUtil	Date Tools
Base64Util	Base64 Tools
StrUtil	String Tool Class
CharUtil	Character Tools
NumberUtil	number tool class
ArrayUtil	Collection Tools
RandomUtil	Random Tools
RegexUtil	Regular Tools
TypeUtil	Type Checking Tool Class
FormatUtil	Format Tools
ClickUtil	Throttle, anti-shake tool class (used to click events to prevent buttons from being clicked repeatedly)
TempUtil	Temperature conversion tool category
DialogUtil	Pop-up tool class (AlertDialog)
ToastUtil	Toast Tools (promptAction)
SM2, SM3, SM4, AES, DES, RSA, MD5, SHA, ECDSA, CryptoUtil, CryptoHelper	Encryption and decryption algorithm tool class CryptoUtil: Encryption and decryption utility class, used with each encryption module. CryptoHelper: Encrypt and decrypt data type conversion.
PickerUtil	Selection and saving of photos, files (files, pictures, videos, audio), tools.拆分至 picker_utils
PhotoHelper	Photo Album related tool category.拆分至 picker_utils
ScanUtil	Code tool category (scan code, code image generation, picture identification).拆分至 picker_utils

Code Example

import { font, KeyboardAvoidMode, router } from '@kit.ArkUI';
import { AppUtil, LogUtil, StrUtil, ToastUtil } from '@pura/harmony-utils';
import { DescribeBean } from '../../model/DescribeBean';
import { MockSetup } from '@ohos/hamock';
import { TitleBarView } from '../../component/TitleBarView';
import {
  AbilityLifecycleCallback,
  ApplicationStateChangeCallback,
  ConfigurationConstant,
  EnvironmentCallback
} from '@kit.AbilityKit';
import { DialogAction, DialogHelper } from '@pura/harmony-dialog';
import { JSON } from '@kit.ArkTS';
import { Utils } from '../../utils/Utils';

/**
 * APP相关工具类
 */
@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();
  @State describe: DescribeBean = router.getParams() as DescribeBean;
  @State mode: number = KeyboardAvoidMode.OFFSET; //上抬模式
  @State bright: number = 0.0; //屏幕亮度值
  @State isKeepScreenOn: boolean = false; //屏幕是否为常亮状态
  @State privacyMode: boolean = false; //是否隐私模式
  @State statusBar: boolean = false;
  @State blGray: boolean = false; //置灰状态
  @State colorMode: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT; //深浅色模式
  @State blZhCn: boolean = false; //默认中文

  private applicationStateChangeCallback: ApplicationStateChangeCallback = {
    onApplicationForeground() {
      LogUtil.warn('applicationStateChangeCallback onApplicationForeground');
    },
    onApplicationBackground() {
      LogUtil.warn('applicationStateChangeCallback onApplicationBackground');
    }
  };
  @State callback1: number = -1;
  private environmentCallback: EnvironmentCallback = {
    onConfigurationUpdated(config) {
      LogUtil.warn(`onConfigurationUpdated config:\n${JSON.stringify(config, null)}`);
    },
    onMemoryLevel(level) {
      LogUtil.warn(`onMemoryLevel level: ${level}`);
    }
  };
  @State callback2: number = -1;
  private abilityLifecycleCallback: AbilityLifecycleCallback = {
    onAbilityCreate(ability) {
      LogUtil.info(`AbilityLifecycleCallback onAbilityCreate ability: ${ability}`);
    },
    onWindowStageCreate(ability, windowStage) {
      LogUtil.info(`AbilityLifecycleCallback onWindowStageCreate ability: ${ability}`);
      LogUtil.info(`AbilityLifecycleCallback onWindowStageCreate windowStage: ${windowStage}`);
    },
    onWindowStageActive(ability, windowStage) {
      LogUtil.info(`AbilityLifecycleCallback onWindowStageActive ability: ${ability}`);
      LogUtil.info(`AbilityLifecycleCallback onWindowStageActive windowStage: ${windowStage}`);
    },
    onWindowStageInactive(ability, windowStage) {
      LogUtil.info(`AbilityLifecycleCallback onWindowStageInactive ability: ${ability}`);
      LogUtil.info(`AbilityLifecycleCallback onWindowStageInactive windowStage: ${windowStage}`);
    },
    onWindowStageDestroy(ability, windowStage) {
      LogUtil.info(`AbilityLifecycleCallback onWindowStageDestroy ability: ${ability}`);
      LogUtil.info(`AbilityLifecycleCallback onWindowStageDestroy windowStage: ${windowStage}`);
    },
    onAbilityDestroy(ability) {
      LogUtil.info(`AbilityLifecycleCallback onAbilityDestroy ability: ${ability}`);
    },
    onAbilityForeground(ability) {
      LogUtil.info(`AbilityLifecycleCallback onAbilityForeground ability: ${ability}`);
    },
    onAbilityBackground(ability) {
      LogUtil.info(`AbilityLifecycleCallback onAbilityBackground ability: ${ability}`);
    },
    onAbilityContinue(ability) {
      LogUtil.info(`AbilityLifecycleCallback onAbilityContinue ability: ${ability}`);
    }
  };


  @MockSetup
  mock() {
    this.describe = new DescribeBean("AppUtil", "APP相关工具类");
  }

  build() {
    Column() {
      TitleBarView({ describe: this.describe })
      Divider()
      Scroll(this.scroller) {
        Column({ space: 5 }) {
          Button("isApiSupported()")
            .btnStyle()
            .onClick(async () => {
              let api12 = AppUtil.isApiSupported(12);
              let api15 = AppUtil.isApiSupported(15);
              let api17 = AppUtil.isApiSupported(17);
              let api20 = AppUtil.isApiSupported(20);
              let api22 = AppUtil.isApiSupported(22);
              let api31 = AppUtil.isApiSupported(31);
              let infoStr = `API12: ${api12}\nAPI15: ${api15}\nAPI17: ${api17}\nAPI20: ${api20}\nAPI22: ${api22}\nAPI31: ${api31}`;
              Utils.showSheetText(infoStr);
            })
          Button("getApplicationContext()")
            .btnStyle()
            .onClick(() => {
              let applicationContext = AppUtil.getApplicationContext();
              ToastUtil.showToast("成功获取applicationContext");
            })
          Button("getContext()")
            .btnStyle()
            .onClick(() => {
              let context = AppUtil.getContext();
              ToastUtil.showToast("成功获取上下文");
            })
          Button("getUIContext()")
            .btnStyle()
            .onClick(() => {
              let uiContext = AppUtil.getUIContext();
              ToastUtil.showToast("成功获取UIContext");
            })
          Button("getWindowStage()")
            .btnStyle()
            .onClick(() => {
              let windowStage = AppUtil.getWindowStage();
              LogUtil.error(JSON.stringify(windowStage, null, 2));
              ToastUtil.showToast("成功获取WindowStage");
            })
          Button("getMainWindow()")
            .btnStyle()
            .onClick(() => {
              let mainWindow = AppUtil.getMainWindow();
              LogUtil.error(JSON.stringify(mainWindow, null, 2));
              ToastUtil.showToast("成功获取主窗口");
            })
          Button("getConfiguration()")
            .btnStyle()
            .onClick(() => {
              let config = AppUtil.getConfiguration();
              Utils.showSheetText(JSON.stringify(config, null, 2));
            })
          Button("setGrayScale()")
            .btnStyle()
            .onClick(() => {
              if (!this.blGray) {
                this.blGray = true;
                AppUtil.setGrayScale(1);
                ToastUtil.showToast("一键置灰成功");
              } else {
                this.blGray = false;
                AppUtil.setGrayScale(0);
                ToastUtil.showToast("取消置灰成功");
              }
            })
          Button("setColorMode()")
            .btnStyle()
            .onClick(() => {
              if (this.colorMode !== ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
                this.colorMode = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
                AppUtil.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
              } else {
                this.colorMode = ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
                AppUtil.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
              }
            })
          Button("getColorMode()")
            .btnStyle()
            .onClick(() => {
              let colorMode = AppUtil.getColorMode();
              ToastUtil.showToast(`应用的颜色模式:${colorMode}`);
            })
          Button("setFont()")
            .btnStyle()
            .onClick(() => {
              font.registerFont({ familyName: 'WCSF', familySrc: $rawfile('wcsf.ttf') });
              AppUtil.setFont('WCSF');
            })
          Button("setFontSizeScale()")
            .btnStyle()
            .onClick(() => {
              AppUtil.setFontSizeScale(2);
            })
          Button("getFontSizeScale()")
            .btnStyle()
            .onClick(() => {
              let fontSizeScale = AppUtil.getFontSizeScale();
              ToastUtil.showToast(`应用字体大小缩放比例:${fontSizeScale}`);
            })
          Button("setLanguage()")
            .btnStyle()
            .onClick(() => {
              if (this.blZhCn) {
                this.blZhCn = false;
                AppUtil.setLanguage('en-us');
              } else {
                this.blZhCn = true;
                AppUtil.setLanguage('zh-cn');
              }
              ToastUtil.showToast("设置成功！");
            })
          Button("getLanguage()")
            .btnStyle()
            .onClick(() => {
              let language = AppUtil.getLanguage();
              ToastUtil.showToast(`应用的语言:${language}`);
            })
          Button("setSupportedProcessCache()")
            .btnStyle()
            .onClick(() => {
              AppUtil.setSupportedProcessCache(true);
              ToastUtil.showToast("设置成功！");
            })
          Button("clearUpApplicationData()")
            .btnStyle()
            .onClick(() => {
              DialogHelper.showAlertDialog({
                content: '是否清理应用本身的数据？',
                primaryButton:'取消',
                secondaryButton:'清理',
                onAction: (action) => {
                  if (action === DialogAction.SURE) {
                    AppUtil.clearUpApplicationData();
                  }
                }
              });
            })
          Button("killAllProcesses()")
            .btnStyle()
            .onClick(() => {
              DialogHelper.showAlertDialog({
                content: '是否终止应用的所有进程？',
                primaryButton:'取消',
                secondaryButton:'终止',
                onAction: (action) => {
                  if (action === DialogAction.SURE) {
                    AppUtil.killAllProcesses();
                  }
                }
              });
            })
          Button("restartApp()")
            .btnStyle()
            .onClick(() => {
              DialogHelper.showAlertDialog({
                autoCancel: false,
                backCancel: false,
                content: '是否重启应用？',
                primaryButton:'取消',
                secondaryButton:'重启',
                onAction: (action) => {
                  if (action === DialogAction.SURE) {
                    AppUtil.restartApp();
                  }
                }
              });
            })
          Button("exit()")
            .btnStyle()
            .onClick(() => {
              DialogHelper.showAlertDialog({
                content: '是否重退出应用？',
                primaryButton:'取消',
                secondaryButton:'退出',
                onAction: (action) => {
                  if (action === DialogAction.SURE) {
                    AppUtil.exit();
                  }
                }
              });
            })
          Button("getRunningProcessInformation()")
            .btnStyle()
            .onClick(async () => {
              let processInformation = await AppUtil.getRunningProcessInformation();
              let jsonStr = JSON.stringify(processInformation, null, 2);
              Utils.showSheetText(jsonStr);
            })
          Button("onApplicationStateChange()")
            .btnStyle()
            .onClick(() => {
              AppUtil.onApplicationStateChange(this.applicationStateChangeCallback);
              DialogHelper.showToast('添加“applicationStateChange”监听成功！');
            })
          Button("offApplicationStateChange()")
            .btnStyle()
            .onClick(() => {
              AppUtil.offApplicationStateChange(this.applicationStateChangeCallback);
              DialogHelper.showToast('移除“applicationStateChange”监听成功！');
            })
          Button("onEnvironment()")
            .btnStyle()
            .onClick(() => {
              this.callback1 = AppUtil.onEnvironment(this.environmentCallback);
              DialogHelper.showToast('添加“environment”监听成功！');
            })
          Button("offEnvironment()")
            .btnStyle()
            .onClick(() => {
              if (this.callback1 !== -1) {
                AppUtil.offEnvironment(this.callback1);
                DialogHelper.showToast('移除“environment”监听成功！');
              }
            })
          Button("onAbilityLifecycle()")
            .btnStyle()
            .onClick(() => {
              this.callback2 = AppUtil.onAbilityLifecycle(this.abilityLifecycleCallback);
              DialogHelper.showToast('添加“abilityLifecycle”监听成功！');
            })
          Button("offAbilityLifecycle()")
            .btnStyle()
            .onClick(() => {
              if (this.callback2 !== -1) {
                AppUtil.offAbilityLifecycle(this.callback2);
                DialogHelper.showToast('移除“abilityLifecycle”监听成功！');
              }
            })
          Button("getKeyboardAvoidMode()")
            .btnStyle()
            .onClick(() => {
              this.mode = AppUtil.getKeyboardAvoidMode();
              ToastUtil.showToast(`当前模式为: ${StrUtil.equal(this.mode, KeyboardAvoidMode.OFFSET) ? "上抬模式" : "压缩模式"}`)
            })
          Button("setKeyboardAvoidMode()")
            .btnStyle()
            .onClick(() => {
              AppUtil.setKeyboardAvoidMode(StrUtil.equal(this.mode, KeyboardAvoidMode.OFFSET) ?
              KeyboardAvoidMode.RESIZE : KeyboardAvoidMode.OFFSET);
              this.mode = AppUtil.getKeyboardAvoidMode();
              ToastUtil.showToast(`设置模式为: ${StrUtil.equal(this.mode, KeyboardAvoidMode.OFFSET) ? "上抬模式" :
                "压缩模式"}`)
            })
          TextInput({ placeholder: '设置模式后点击输入框查看效果' })
            .width("95%")
            .margin({ bottom: 10 })

          Button("isPortrait()")
            .btnStyle()
            .onClick(() => {
              let isPortrait = AppUtil.isPortrait();
              ToastUtil.showToast(`当前是否竖屏: ${isPortrait}`);
            })
          Button("isLandscape()")
            .btnStyle()
            .onClick(() => {
              let isLandscape = AppUtil.isLandscape();
              ToastUtil.showToast(`当前是否横屏: ${isLandscape}`);
            })
          Button("getStatusBarHeight()")
            .btnStyle()
            .onClick(() => {
              let statusBarHeight = AppUtil.getStatusBarHeight();
              ToastUtil.showToast(`状态栏的高度为：${statusBarHeight}px`)
            })
          Button("getNavigationIndicatorHeight()")
            .btnStyle()
            .onClick(() => {
              let indicatorHeight = AppUtil.getNavigationIndicatorHeight();
              ToastUtil.showToast(`底部导航条的高度为：${indicatorHeight}px`)
            })
          Button("setStatusBar()")
            .btnStyle()
            .onClick(() => {
              this.statusBar = this.statusBar ? false : true;
              if (this.statusBar) {
                AppUtil.setStatusBar();
              } else {
                AppUtil.setStatusBar(false, true);
              }
            })
          Button("getBundleInfo()")
            .btnStyle()
            .onClick(async () => {
              let bundleInfo = await AppUtil.getBundleInfo();
              let infoStr = JSON.stringify(bundleInfo, null, 2);
              Utils.showSheetText(infoStr);
            })
          Button("getAppInfoSync()")
            .btnStyle()
            .onClick(() => {
              let appInfo = AppUtil.getAppInfoSync();
              let infoStr = JSON.stringify(appInfo, null, 2);
              Utils.showSheetText(infoStr);
            })
          Button("getSignatureInfo()")
            .btnStyle()
            .onClick(async () => {
              let signatureInfo = await AppUtil.getSignatureInfo();
              let infoStr = JSON.stringify(signatureInfo, null, 2);
              Utils.showSheetText(infoStr);
            })
          Button("getBundleName()\ngetVersionCode()\ngetVersionName()\ngetTargetVersion()\ngetInstallTime()\ngetUpdateTime()\ngetAppProvisionType()\ndebug()")
            .labelStyle({ maxLines: 10 })
            .type(ButtonType.Normal)
            .borderRadius(10)
            .padding({ top: 10, bottom: 10 })
            .btnStyle()
            .onClick(() => {
              let bundleName = AppUtil.getBundleName();
              let versionCode = AppUtil.getVersionCode();
              let versionName = AppUtil.getVersionName();
              let targetVersion = AppUtil.getTargetVersion();
              let infoStr = `bundleName: ${bundleName}\nversionCode: ${versionCode}\nversionName: ${versionName}\ntargetVersion: ${targetVersion}`;
              let installTime = AppUtil.getInstallTime();
              let updateTime = AppUtil.getUpdateTime();
              infoStr = infoStr + `\ninstallTime: ${installTime}\nupdateTime: ${updateTime}`;
              let appProvisionType = AppUtil.getAppProvisionType();
              let debug = AppUtil.debug();
              infoStr = infoStr + `\nappProvisionType: ${appProvisionType}\ndebug: ${debug}`;
              Utils.showSheetText(infoStr);
            })
        }
        .margin({ top: 5, bottom: 5 })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor($r('app.color.main_background'))
  }
}


@Styles
function btnStyle() {
  .width('90%')
  .margin({ top: 10, bottom: 5 })
}

🍎Contribution code and technology communication

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

https://gitee.com/tongyuyan/harmony-utils

https://github.com/787107497

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

harmony-web

桃花镇童长老 — Sun, 29 Jun 2025 15:41:28 +0000

harmony-web (API12)

🏆Introduction and Recommendations

harmony-web It is a WebView based on Hongmeng The powerful and extremely easy-to-use library is not only lightweight, flexible and flexible, but also provides a series of problem solutions for Hongmeng WebView, helping developers to easily deal with various development challenges.

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications.

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are.

🌞Download and install

ohpm i @pura/harmony-web

OpenHarmony ohpm
For more information, please refer to如何安装 OpenHarmony ohpm 包

📚 ArkWeb Component, Parameter Description

Name	Type	Description	Required
controller	webview.WebviewController	Controller	Y
src	ResourceStr	Web Resource Address	Y
options	ArkWebOptions	ArkWeb property parameters	N
webClient	ArkWebClient	ArkWeb Lifecycle Events	N
arkJsObject	ArkJsObject or ArkJsObject[]	Interface object that needs to be registered	N

📚 ArkWebHelper, method description

Method name	Introduction
init	Initialization
prepareForPageLoad	Pre-connect url, call this API before loading the url

📚Sample code

@Entry
@ComponentV2
struct Index {
  private controller: webview.WebviewController = new webview.WebviewController();
  @Local webUrl: string = "";
  @Local options: ArkWebOptions = new ArkWebOptions();
  @Local webClient: MyWebClient = new MyWebClient();
  @Local jsObject: MyJsObject = new MyJsObject();

  onBackPress(): boolean {
    if (this.controller?.accessBackward()) {
      this.controller?.backward();
      return true;
    }
    return false;
  }

  aboutToAppear(): void {
    let params: Params = router.getParams() as Params;
    this.webUrl = params.webUrl;
  }

  build() {
    Column() {
      ArkWeb({
        controller: this.controller,
        src: this.webUrl,
        options: this.options,
        webClient: this.webClient,
        arkJsObject: this.jsObject
      })
    }
    .height('100%')
    .width('100%')
  }

}

🍎Communication and communication 🙏

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

https://gitee.com/tongyuyan/harmony-utils

https://github.com/787107497

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

picker_utils

桃花镇童长老 — Sun, 29 Jun 2025 15:36:48 +0000

picker_utils (API12+)

🏆Introduction and Recommendations

picker_utils yes harmony-utils A split sub-store includes PickerUtil, PhotoHelper, and ScanUtil.
Main solution: When using the harmony-utils three-party library and without using picker capabilities, there is no need to declare camera permissions and storage permissions in the privacy policy.

🌞Download and install

ohpm i @pura/picker_utils

OpenHarmony ohpm
For more information, please refer to如何安装 OpenHarmony ohpm 包

📚API detailed explanation使用案例

📂Module Introduction

Module	Introduction
PickerUtil	Photos, files (files, pictures, videos) selection and saving, tools
PhotoHelper	Album related tools
ScanUtil	Code tool category (scan code, code image generation, picture identification)

PickerUtil (photographing, file selection and saving, tool class)使用案例

Methods	Introduction
camera cameraEasy	Call the system camera, take photos, record videos
selectPhoto	Pull up the photoPicker interface by selecting mode, users can select one or more pictures/videos
savePhoto	Pull up photoPicker in the save mode to save the file name of the picture or video resource. If there are no parameters, the user needs to enter it by default
selectDocument	Pull up the documentPicker interface by selecting mode, users can select one or more files
saveDocument saveDocumentEasy	Pull up the documentPicker interface through the save mode, and the user can save one or more files
selectAudio	Pull up the audioPicker interface by selecting mode, users can select one or more audio files
saveAudio	Pull up the audioPicker interface through save mode, and users can save one or more audio files

PhotoHelper (album related, tool category)使用案例

Methods	Introduction
select selectEasy	Pull up the photoPicker interface by selecting mode, users can select one or more pictures/videos
save	Apply for permission to save pictures or videos to the album.
showAssetsCreationDialog	Pop-up window authorization save, call the interface to pull up the save confirmation pop-up window.
showAssetsCreationDialogEasy	Pop-up window authorization save, call the interface to pull up the save confirmation pop-up window, and save.
applyChanges	Save security controls, submit media change requests, insert pictures/videos.
getPhotoAsset	Get the PhotoAsset object of the corresponding uri, used to read file information

ScanUtil (code tool class (scan code, code image generation, picture identification))使用案例

Methods	Introduction
startScanForResult	Call the default interface to scan the code and use the Promise method to asynchronously return the decoding result
generateBarcode	Code diagram generation, use Promise to return the generated code diagram asynchronously
decode	Call picture identification and use Promise to return the identification result asynchronously
decodeImage	Call image data identification capability, use Promise asynchronous callback to return code identification results
onPickerScanForResult	Pull up the gallery through picker and select the picture, and call the picture identification code
canIUseScan	Determine whether the current device supports code capabilities

Code Example

import { router } from '@kit.ArkUI';
import { DateUtil, FileUtil, ImageUtil, LogUtil, PreferencesUtil, StrUtil, ToastUtil } from '@pura/harmony-utils';
import { DescribeBean } from '../../model/DescribeBean';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
import { MockSetup } from '@ohos/hamock';
import { TitleBarView } from '../../component/TitleBarView';
import { camera, cameraPicker } from '@kit.CameraKit';
import { picker } from '@kit.CoreFileKit';
import { CameraOptions, PickerUtil } from '@pura/picker_utils';


/**
 * 拍照、文件(文件、图片、视频、音频)选择和保存,工具类
 */
@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();
  @State describe: DescribeBean = router.getParams() as DescribeBean;
  @State uriStr: string = ''
  @State filePath: string = ''; //本地图片path
  @State cacheUri: string = ''; //缓存本地Uri，上次保存的Uri。


  @MockSetup
  mock() {
    this.describe = new DescribeBean("PickerUtil", "拍照、文件(文件、图片、视频、音频)选择和保存,工具类");
  }


  async aboutToAppear(): Promise<void> {
    this.cacheUri = PreferencesUtil.getStringSync("picker_cache_uri");
    let pixelMap = await ImageUtil.getPixelMapFromMedia($r("app.media.test_as4"))
    this.filePath = await ImageUtil.savePixelMap(pixelMap, FileUtil.getFilesDirPath(""), "漂亮小姐姐.png")
    LogUtil.error("filePath: " + this.filePath);
  }

  build() {
    Column() {
      TitleBarView({ describe: this.describe })
      Divider()
      Scroll(this.scroller) {
        Column() {
          Button("cameraEasy()")
            .btnStyle()
            .onClick(async () => {
              PickerUtil.cameraEasy().then((uri) => {
                this.uriStr = `调用相机，返回uri：\n${uri}`;
              }).catch((err: BusinessError) => {
                this.uriStr = `调用相机，异常：\n${JSON.stringify(err)}`;
              });
            })
          Button("camera()")
            .btnStyle()
            .onClick(async () => {
              let options: CameraOptions = {
                mediaTypes: [cameraPicker.PickerMediaType.PHOTO],
                cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
              }
              PickerUtil.camera(options).then((result) => {
                this.uriStr = `调用相机，返回uri：\n${result.resultUri}`;
              }).catch((err: BusinessError) => {
                this.uriStr = `调用相机，异常：\n${JSON.stringify(err)}`;
              });
            })
          Button("selectPhoto()")
            .btnStyle()
            .onClick(() => {
              PickerUtil.selectPhoto().then((uris) => {
                this.uriStr = `调用相册，返回uris：\n${uris.join('\n')}`;
              }).catch((err: BusinessError) => {
                this.uriStr = `调用相册，异常：\n${JSON.stringify(err)}`;
              });
            })
          Button("savePhoto()")
            .btnStyle()
            .onClick(() => {
              let imgName = `大漂亮_${DateUtil.getTodayTime()}.png`;
              let imgName1 = `小漂亮_${DateUtil.getTodayTime()}.png`;
              PickerUtil.savePhoto([imgName, imgName1]).then(async (uris) => {
                let uri = uris[0];
                this.uriStr = `调用保存图片，返回uris：\n${uri}`
                let file = FileUtil.openSync(uri);
                FileUtil.copyFile(this.filePath, file.fd).then(() => {
                  this.uriStr = `保存图片，返回uris：\n${uri}`
                  ToastUtil.showToast("图片1保存成功");
                })

                let file1 = FileUtil.openSync(uris[1]);
                let pixelMap1 = await ImageUtil.getPixelMapFromMedia($r("app.media.test_as3"))
                let packOpts: image.PackingOption = { format: 'image/png', quality: 100 }
                ImageUtil.packToFileFromPixelMap(pixelMap1, file1.fd, packOpts).then(() => {
                  this.uriStr = `保存图片，返回uris：\n${uris[1]}`
                  ToastUtil.showToast("图片2保存成功");
                })
              }).catch((err: BusinessError) => {
                this.uriStr = `调用保存图片，异常：\n${JSON.stringify(err)}`
              })
            })
          Button("selectDocument()")
            .btnStyle()
            .onClick(() => {
              let options: picker.DocumentSelectOptions = {
                maxSelectNumber: 9, //选择媒体文件数量的最大值,默认9。
                selectMode: picker.DocumentSelectMode.FILE, //支持选择的资源类型,默认文件
                // fileSuffixFilters: ['图片(.png, .jpg)|.png,.jpg', '文档|.txt', '视频|.mp4', '.pdf'], //选择文件的后缀类型['后缀类型描述|后缀类型']（可选） 若选择项存在多个后缀名，则每一个后缀名之间用英文逗号进行分隔（可选），后缀类型名不能超过100,选择所有文件：'所有文件(*.*)|.*';
                // defaultFilePathUri: "file://docs/storage/Users/currentUser/Download/com.harmony.utils", //指定选择的文件或者目录路径（可选）
                // authMode: true //选择是否对指定文件或目录授权，true为授权，当为true时，defaultFilePathUri为必选参数。
              }
              PickerUtil.selectDocument(options).then((uris) => {
                this.uriStr = `调用文件管理，返回uris：\n${uris.join('\n')}`
              }).catch((err: BusinessError) => {
                this.uriStr = `调用文件管理，异常：\n${JSON.stringify(err)}`
              });
            })
          Button("saveDocumentEasy()")
            .btnStyle()
            .onClick(() => {
              let fileName = `test_easy_${DateUtil.getTodayTime()}.txt`;
              PickerUtil.saveDocumentEasy([fileName]).then((paths) => {
                let path = paths[0];
                this.cacheUri = FileUtil.getUriFromPath(path);
                PreferencesUtil.put("picker_cache_uri", this.cacheUri);
                let txtStr = `“harmony-utils 一款高效的OpenHarmony/HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。\n\n`;
                FileUtil.writeEasy(path, txtStr).then(() => {
                  this.uriStr = `文件保存成功，返回uris：\n${path}`;
                  ToastUtil.showToast("文件保存成功！");
                }).catch((err: BusinessError) => {
                  this.uriStr = `文件保存，异常：\n${JSON.stringify(err)}`;
                })
              }).catch((err: BusinessError) => {
                this.uriStr = `调用保存文件，异常：\n${JSON.stringify(err)}`;
              })
            })
          Button("saveDocument()")
            .btnStyle()
            .onClick(() => {
              let fileName = `test_${DateUtil.getTodayTime()}.txt`;
              PickerUtil.saveDocument({newFileNames:[fileName]}).then((uris) => {
                let uri = uris[0];
                this.cacheUri = uri
                PreferencesUtil.put("picker_cache_uri", this.cacheUri);
                let txtStr = `“harmony-utils 一款高效的OpenHarmony/HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。\n\n`;
                FileUtil.writeEasy(uri, txtStr).then(() => {
                  this.uriStr = `文件保存成功，返回uris：\n${uri}`;
                  ToastUtil.showToast("文件保存成功！");
                }).catch((err: BusinessError) => {
                  this.uriStr = `文件保存，异常：\n${JSON.stringify(err)}`;
                })
              }).catch((err: BusinessError) => {
                this.uriStr = `调用保存文件，异常：\n${JSON.stringify(err)}`;
              })
            })
          Button("selectAudio()")
            .btnStyle()
            .onClick(() => {
              PickerUtil.selectAudio().then((uris) => {
                this.uriStr = `调用文件管理，返回uris：\n${uris.join('\n')}`;
              }).catch((err: BusinessError) => {
                this.uriStr = `调用文件管理，异常：\n${JSON.stringify(err)}`;
              });
            })
          Button("saveAudio()")
            .btnStyle()
            .onClick(() => {
              let fileName = `AudioViewPicker001.mp3`;
              PickerUtil.saveAudio([fileName]).then((uris) => {
                let uri = uris[0];
                this.uriStr = `音频文件，返回uris：\n${uri}`;
              }).catch((err: BusinessError) => {
                this.uriStr = `调用保存文件，异常：\n${JSON.stringify(err)}`;
              })
            })

          Text(this.uriStr)
            .visibility(StrUtil.isNotEmpty(this.uriStr) ? Visibility.Visible : Visibility.None)
            .textStyle()
            .margin(12)

          Blank().layoutWeight(1)
        }
        .margin({ top: 5, bottom: 5 })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor($r('app.color.main_background'))
  }
}


@Styles
function btnStyle() {
  .width('90%')
  .margin({ top: 10, bottom: 5 })
}

@Styles
function textStyle() {
  .width('95%')
  .padding(10)
  .shadow(ShadowStyle.OUTER_DEFAULT_XS)
  .margin({ top: 5, bottom: 10 })
  .border({ width: 1, color: Color.Grey, radius: 10, style: BorderStyle.Dashed })
}

🍎Communication and communication 🙏

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

SpinKit

桃花镇童长老 — Sun, 29 Jun 2025 15:32:12 +0000

SpinKit(API12)

🏆Introduction and Recommendations

SpinKit is a loading animation library for OpenHarmony/HarmonyOS.

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications.

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are.

📚Download and install

ohpm i @pura/spinkit

OpenHarmony ohpm
For more information, please refer to如何安装 OpenHarmony ohpm 包

📚Result Picture

The renderings are slightly stumbled, please run the source code or add dependencies to view the effect.

📚SpinKit Component

Properties	Introduction
spinType	Animation type
spinSize	Animation size, default 60
spinColor	Animation color, default white

  SpinKit()

  SpinKit({ spinType: SpinType.spinA })

  SpinKit({ spinType: SpinType.spinH })

  SpinKit({
     spinType: SpinType.spinA,
     spinColor: Color.Pink,
     spinSize: 70
  })

Please move the loading boxharmony-dialog

Full Code Example

import { SpinKit, SpinType } from '@pura/spinkit';
import { ComposeTitleBar } from '@kit.ArkUI';
import { ClickUtil, ToastUtil } from '@pura/harmony-utils';
import { DialogHelper } from '@pura/harmony-dialog';

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();

  aboutToAppear(): void {

  }

  build() {
    Column() {
      ComposeTitleBar({
        title: $r('app.string.spin_kit'),
        subtitle: $r('app.string.spinKit_desc'),
      })
      Divider()
      Scroll(this.scroller) {
        Column({ space: 15 }) {
          Button('加载框样式配置1')
            .fontFamily('MyFont')
            .width('100%')
            .backgroundColor(Color.Grey)
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              DialogHelper.setDefaultConfig((config) => {
                config.loading_loadType = SpinType.spinZ; //动画类型
                config.loading_loadSize = 60; //加载动画或进度条的大小
                config.loading_loadColor = "#0A51E0"; //加载动画或进度条的颜色
                config.loading_content = ''; //加载动画的提示文字
                config.loading_fontSize = 16; //文字大小
                config.loading_fontColor = Color.White; //文字颜色
                config.loading_backgroundColor = '#CC000000'; //背景颜色，八位色值前两位为透明度
                config.loading_borderRadius = 10; //背景圆角
                config.loading_marginTop = 20; //文字与动画的间距
                config.loading_padding = 30; //padding
              })
              ToastUtil.showToast("样式配置成功！");
            })
          Button('加载框样式配置2')
            .fontFamily('MyFont')
            .width('100%')
            .backgroundColor(Color.Grey)
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              DialogHelper.setDefaultConfig((config) => {
                config.loading_loadType = SpinType.spinH; //动画类型
                config.loading_loadSize = 70; //加载动画或进度条的大小
                config.loading_loadColor = Color.Brown; //加载动画或进度条的颜色
                config.loading_content = '努力加载中'; //加载动画的提示文字
                config.loading_fontSize = 16; //文字大小
                config.loading_fontColor = Color.White; //文字颜色
                config.loading_backgroundColor = '#EE000000'; //背景颜色，八位色值前两位为透明度
                config.loading_borderRadius = 12; //背景圆角
                config.loading_marginTop = 20; //文字与动画的间距
                config.loading_padding = { top: 35, right: 45, bottom: 30, left: 45 }; //padding
              })
              ToastUtil.showToast("样式配置成功！");
            })
          Button('加载框，样式一')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                let dialogId = DialogHelper.showLoadingDialog({ autoCancel: false })
                let timeoutID = setTimeout(() => {
                  DialogHelper.closeDialog(dialogId);
                  clearTimeout(timeoutID);
                }, 15000)
              })
            })
          Button('加载框，样式二')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                let dialogId = DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinH,
                  autoCancel: false,
                  onDidDisappear: () => {
                    ToastUtil.showToast("加载框关闭了")
                  }
                })
                let timeoutID = setTimeout(() => {
                  DialogHelper.closeDialog(dialogId);
                  clearTimeout(timeoutID);
                }, 15000)
              })
            })
          Button('加载框，样式三')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinK,
                  loadColor: '#0A66F9',
                  backgroundColor: '#CC000000',
                  maskColor: '#10000000'
                })
              })
            })
          Button('加载框，样式四')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinB,
                  loadColor: Color.White,
                  autoCancel: true
                })
              })
            })
          Button('加载框，样式五')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinP,
                  loadColor: Color.White,
                  loadSize: 70,
                  content: '加载中...',
                  fontSize: 18,
                  fontColor: Color.White,
                  backgroundColor: '#BB000000',
                  maskColor: '#33000000',
                  padding: { top: 30, right: 50, bottom: 30, left: 50 },
                  marginTop: 20,
                  autoCancel: true
                })
              })
            })
          Button('加载框，样式六')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                //自定义文字和加载动画的颜色
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinD,
                  content: "努力加载中",
                  loadColor: Color.Red,
                  backgroundColor: '#990000FF',
                  fontColor: Color.Red,
                  fontSize: 18,
                  padding: 30,
                  borderRadius: 10
                })
              })
            })
          Blank().layoutWeight(1)
        }
        .padding({ left: 15, right: 15 })
        Divider()
        Grid() {
          GridItem() {
            SpinKit({ spinType: SpinType.spinA })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color1'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinB })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color2'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinC })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color3'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinD })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color4'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinE })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color5'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinF })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color6'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinG })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color7'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinH })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color8'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinI })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color9'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinJ })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color10'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinK })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color11'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinL })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color12'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinM })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color13'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinN })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color14'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinO })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color15'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinP })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color14'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinQ })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color13'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinR })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color12'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinS })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color11'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinT })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color10'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinU })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color9'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinV })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color8'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinW })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color7'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinX })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color6'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinY })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color5'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinZ })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color4'))
        }
        .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')
        .columnsTemplate('1fr 1fr 1fr')
        .columnsGap(0)
        .rowsGap(0)
        .width('100%')
        .aspectRatio(3 / 9)
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }
}

💖 Communication and communication 🙏

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

https://gitee.com/tongyuyan/harmony-utils

https://github.com/787107497

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

mime-types

桃花镇童长老 — Sun, 29 Jun 2025 15:26:34 +0000

mime-types (API12+)

🏆Introduction and Recommendations

mime-types Mainly used to process and determine the MIME type of files.

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications.

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are.

🌞Download and install

ohpm i @nutpi/mime-types

OpenHarmony ohpm
For more information, please refer to如何安装 OpenHarmony ohpm 包

📚API detailed explanation使用案例

Mime method name	Introduction
lookup	Get MIME type by file name
contentType	Get MIME type based on the suffix name of the file name
extension	Get file extension based on MIME type
getFileExtention	Get file suffix name based on file name/file path/file uri/file url
getIconFileByFileExtension	Get the icon of the corresponding file type based on the file suffix name
getIconFileByMIMEType	Get the icon of the corresponding file type according to the MIME type
getTypeDescriptorByFileExtension	Get TypeDescriptor (a description class for standardized data type) based on file suffix name
getTypeDescriptorByMIMEType	Get TypeDescriptor (a description class for standardized data type) according to file MIME type

📚Sample code

//根据文件名获取MIME类型
let mimeType1 = Mime.lookup("test.txt");
let mimeType2 = Mime.lookup("测试文档.doc");
let mimeType3 = Mime.lookup("应用.apk");
let mimeType4 = Mime.lookup("一路向西.mp4");
let mimeType5 = Mime.lookup("嗨歌.mp3");


//根据文件名的后缀名获取MIME类型
let mimeType1 = Mime.contentType("html");
let mimeType2 = Mime.contentType("jpeg");
let mimeType3 = Mime.contentType(".ofd");
let mimeType4 = Mime.contentType(".PDF");
let mimeType5 = Mime.contentType(".png");


//根据MIME类型获取文件扩展名
let mimeType1 = Mime.extension("image/jpeg");
let mimeType2 = Mime.extension("image/gif");
let mimeType3 = Mime.extension("audio/mp3");


//根据 文件名/文件path/文件uri/文件url，获取文件后缀名
let mimeType1 = Mime.getFileExtention("test.txt");
let mimeType2 = Mime.getFileExtention("/downnload/wps/测试文档.doc");
let mimeType3 = Mime.getFileExtention("https://developer.demo/files/开发说明.PDF");


//根据文件后缀名获取对应文件类型的图标
let iconFile1 = Mime.getIconFileByFileExtension(".txt");
let iconFile2 = Mime.getIconFileByFileExtension("doc");


//根据MIME类型获取对应文件类型的图标
let iconFile1 = Mime.getIconFileByMIMEType("application/pdf");
let iconFile2 = Mime.getIconFileByMIMEType("image/gif");

🍎Communication and communication 🙏

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

harmony-dialog Effect Preview

桃花镇童长老 — Sun, 29 Jun 2025 15:15:40 +0000

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are. It covers
AlertDialog, TipsDialog, ConfirmDialog, SelectDialog, CustomContentDialog, TextInputDialog, TextAreaDialog, BottomSheetDialog, ActionSheetDialog, TextPickerDialog, DatePickerDialog, CustomDialog, LoadingDialog, LoadingProgress, Toast, ToastTip
Various types can meet various pop-up development needs.

1. AlertDialog operation confirmation class pop-up box

2. ConfirmDialog information confirmation class pop-up box

3. TipsDialog prompt pop-up box, which is a graphic confirmation box

4. SelectDialog Select class pop-up box

5. TextInputDialog Single-line text input pop-up box

6. TextAreaDialog Multi-line text input box

7. BottomSheetDialog Action Panel

8. ActionSheetDialog Action Panel (IOS Style)

9. TextPickerDialog selector pop-up box

10. DatePickerDialog date selector pop-up box

11. LoadingDialog load class pop-up box

12. LoadingProgress Progress Progress Box

13. Toast Toast

13. ToastTip Toast with Graphics

Full Code Example

import { AreaHelper } from '@nutpi/china_area';
import { AnimationHelper, DateType, DialogAction, DialogHelper, Orientation } from '@pura/harmony-dialog';
import { DateUtil, DisplayUtil, LogUtil, ToastUtil } from '@pura/harmony-utils';
import { SpinType } from '@pura/spinkit';
import { CardButton } from '../../component/CardButton';
import { CustomImageView } from '../../component/CustomImageView';
import { CustomTextViewBuilder } from '../../component/CustomTextView';
import { DrawerBuilder } from '../../component/DrawerLayout';
import { LottieBuilder } from '../../component/LottieView';
import { MenuBuilder } from '../../component/MenuLayout';
import { MenuSheetBuilder } from '../../component/MenuSheetLayout';
import { TipBuilder } from '../../component/TipLayout';
import { TitleView } from '../../component/TitleView';
import { DrawerOptions } from '../../model/DrawerOptions';
import { LoadOptions } from '../../model/LoadOptions';
import { MenuOptions } from '../../model/MenuOptions';
import { MenuSheetOptions } from '../../model/MenuSheetOptions';
import { TipOptions } from '../../model/TipOptions';
import { Utils } from '../../utils/Utils';
import { LevelMode, router } from '@kit.ArkUI';


/**
 * TODO 弹窗工具
 * author: 桃花镇童长老ᥫ᭡
 * since: 2024/08/18
 */
@Preview
@Component
export struct DialogPage {
  private scroller: Scroller = new Scroller();
  @State menuArray: Array<ResourceStr> = [$r('app.string.str_camera'), $r('app.string.str_album'), "文件管理器"];
  @State inputText: string = ""; //输入框内容
  @State progress: number = 1;
  private likes: string[] = ['乒乓球', '鸿蒙手机', 'ArkTS', 'Mate70Pro', '三折叠手机', '小米su7', '红米K80pro', '广东名菜烤乳猪'];
  private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4']
  private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4']
  private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4']
  private multis: string[][] = [this.apfruits, this.orfruits, this.pefruits]
  @BuilderParam customTextBuilderParam: (str: string | Resource) => void = CustomTextViewBuilder; //自定义文本内容
  private rangeContent: TextPickerRangeContent[] = [{
    icon: $r('sys.media.ohos_ic_normal_white_grid_doc'),
    text: 'DOC'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_pdf'),
    text: 'PDF'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_xls'),
    text: 'XLS'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_image'),
    text: 'IMAGE'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_html'),
    text: 'HTML'
  }];




  /**
   * 统一配置一
   */
  customConfig1() {
    DialogHelper.setDefaultConfig((config) => {
      config.autoCancel = false; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。
      config.backCancel = false; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。
      config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。
      config.alignment = DialogAlignment.Center; //弹窗的对齐方式。
      config.offset = { dx: 0, dy: 0 }; //弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }
      config.maskColor = 0x11000000; //自定义蒙层颜色。默认值 0x33000000
      config.backgroundColor = Color.White; //弹窗背板颜色。默认值：Color.White
      config.backgroundBlurStyle = BlurStyle.NONE; //弹窗背板模糊材质
      config.cornerRadius = 35; //设置背板的圆角半径。可分别设置4个圆角的半径。
      // config.maskRect={ x: 'auto', y: 'auto', width: 'auto', height: 'auto' };

      config.title = $r("app.string.dialog_tip"); //弹框标题
      config.primaryButton = $r("app.string.btn_cancel"); //弹框左侧按钮。
      config.secondaryButton = $r("app.string.btn_sure"); //弹框右侧按钮。
      config.imageRes = undefined; //TipsDialog用到，展示的图片。
      config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。默认值：64*64vp

      config.loading_loadSize = 60; //加载动画或进度条的大小
      config.loading_loadColor = Color.White; //加载动画或进度条的颜色
      config.loading_content = ''; //加载动画的提示文字
      config.loading_fontSize = 16; //文字大小
      config.loading_fontColor = Color.White; //文字颜色
      config.loading_backgroundColor = '#CC094CD1'; //背景颜色，八位色值前两位为透明度
      config.loading_borderRadius = 10; //背景圆角

      config.toast_fontSize = 16; //文字大小
      config.toast_fontColor = Color.White; //文字颜色
      config.toast_backgroundColor = '#CC56D866'; //背景颜色，建议八位色值前两位为透明度
      config.toast_alignment = Alignment.Center; //土司居中显示
      config.toast_borderRadius = 8; //背景圆角
      config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding
      config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。默认值：45*45vp
      config.toast_duration = 1500; //显示时长(1500ms-10000ms)
      config.toast_durationLong = 5000; //显示时长
    });
    ToastUtil.showToast("统一配置设置成功！");
  }

  /**
   * 统一配置二
   */
  customConfig2() {
    DialogHelper.setDefaultConfig((config) => {
      config.autoCancel = false; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。
      config.backCancel = false; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。
      config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。
      config.alignment = DialogAlignment.Bottom; //弹窗的对齐方式。
      config.offset = { dx: 0, dy: -35 }; //弹窗相对alignment所在位置的偏移量。
      config.maskColor = 0x11000000; //自定义蒙层颜色。默认值 0x33000000
      config.backgroundColor = Color.White; //弹窗背板颜色。默认值：Color.White
      config.backgroundBlurStyle = BlurStyle.COMPONENT_ULTRA_THICK; //弹窗背板模糊材质
      config.cornerRadius = 20; //设置背板的圆角半径。可分别设置4个圆角的半径。

      config.title = '提示'; //弹框标题
      config.primaryButton = '取消'; //弹框左侧按钮。
      config.secondaryButton = '确定'; //弹框右侧按钮。
      config.imageRes = undefined; //TipsDialog用到，展示的图片。
      config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。

      config.loading_loadSize = 60; //加载动画或进度条的大小
      config.loading_loadColor = Color.White; //加载动画或进度条的颜色
      config.loading_content = ''; //加载动画的提示文字
      config.loading_fontSize = 16; //文字大小
      config.loading_fontColor = Color.White; //文字颜色
      config.loading_backgroundColor = '#CC56D866'; //背景颜色，八位色值前两位为透明度
      config.loading_borderRadius = 10; //背景圆角

      config.toast_fontSize = 16; //文字大小
      config.toast_fontColor = Color.Black; //文字颜色
      config.toast_backgroundColor = '#CC0FCEE3'; //背景颜色，建议八位色值前两位为透明度
      config.toast_alignment = Alignment.Top; //土司Top显示
      config.toast_borderRadius = 8; //背景圆角
      config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding
      config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。默认值：45*45vp
      config.toast_duration = 1500; //显示时长(1500ms-10000ms)
      config.toast_durationLong = 5000; //显示时长
    });
    ToastUtil.showToast("统二配置设置成功！");
  }

  /**
   * 默认的配置
   */
  defaultConfig() {
    DialogHelper.setDefaultConfig((config) => {
      config.autoCancel = true; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：true
      config.backCancel = true; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。true表示关闭弹窗。false表示不关闭弹窗。默认值：true。
      config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。默认值：true。
      config.alignment = DialogAlignment.Default; //弹窗的对齐方式。
      config.offset = { dx: 0, dy: 0 }; //弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }
      config.maskColor = 0x33000000; //自定义蒙层颜色。默认值 0x33000000
      config.backgroundColor = Color.White; //弹窗背板颜色。默认值：Color.White
      config.backgroundBlurStyle = BlurStyle.COMPONENT_ULTRA_THICK; //弹窗背板模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK
      config.cornerRadius = 20; //设置背板的圆角半径。可分别设置4个圆角的半径。

      config.title = '温馨提示'; //弹框标题
      config.primaryButton = '取消'; //弹框左侧按钮。
      config.secondaryButton = '确定'; //弹框右侧按钮。
      config.imageRes = undefined; //TipsDialog用到，展示的图片。
      config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。默认值：64*64vp

      config.loading_loadSize = 60; //加载动画或进度条的大小
      config.loading_loadColor = Color.White; //加载动画或进度条的颜色
      config.loading_content = ''; //加载动画的提示文字
      config.loading_fontSize = 16; //文字大小
      config.loading_fontColor = Color.White; //文字颜色
      config.loading_backgroundColor = '#CC000000'; //背景颜色，八位色值前两位为透明度
      config.loading_borderRadius = 10; //背景圆角

      config.toast_fontSize = 16; //文字大小
      config.toast_fontColor = Color.White; //文字颜色
      config.toast_backgroundColor = '#CC000000'; //背景颜色，建议八位色值前两位为透明度
      config.toast_alignment = undefined; //土司显示位置
      config.toast_borderRadius = 8; //背景圆角
      config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding
      config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。默认值：45*45vp
      config.toast_duration = 2000; //显示时长(1500ms-10000ms)
      config.toast_durationLong = 10000; //显示时长(10000ms)
    });
    ToastUtil.showToast("默认配置,设置成功！");
  }

  /**
   * 操作确认类弹出框
   */
  alertDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showAlertDialog({
        uiContext:this.getUIContext(),
        backgroundColor: Color.Orange,
        content: "确定保存该WPS文件吗？",
        onAction: (action) => {
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您点击了取消按钮`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`您点击了确认按钮`);
          }
        }
      })
    } else if (index == 1) {
      //自定义按钮颜色
      DialogHelper.showAlertDialog({
        title: "提示",
        content: "确定保存该视频文件吗？",
        // primaryButton:'取消',
        secondaryButton: {
          value: "确认",
          fontColor: Color.Brown
        },
        onAction: (action) => {
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您取消了保存`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已保存`);
          }
        }
      })
    } else if (index == 2) {
      //自定义按钮和二级标题
      DialogHelper.showAlertDialog({
        primaryTitle: "提示",
        secondaryTitle: "保存前请确认文件",
        content: "确定保存该视频文件吗",
        primaryButton: "取消",
        secondaryButton: $r('app.string.btn_save'),
        onAction: (action) => {
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您取消了保存`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已保存`);
          }
        }
      })
    } else {
      //不带标题，不主动关闭弹框
      DialogHelper.showAlertDialog({
        title: "",
        content: "确定保存该视频文件吗",
        actionCancel: false, //点击操作按钮不关闭弹框
        autoCancel: false, //点击遮障层时，不关闭弹窗
        backCancel: false, //点击返回键，不关闭弹窗
        onAction: (action, dialogId) => {
          DialogHelper.closeDialog(dialogId); //关闭弹框
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您取消了保存`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已保存`);
          }
        }
      })
    }
  }

  /**
   * 信息确认类弹出框
   */
  confirmDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showConfirmDialog({
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 1) {
      //自定义按钮
      DialogHelper.showConfirmDialog({
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        primaryButton: { value: "取消", fontColor: Color.Red },
        secondaryButton: "退出",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 2) {
      //不显示标题
      DialogHelper.showConfirmDialog({
        title: "",
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else {
      //底部弹出
      DialogHelper.showConfirmDialog({
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        alignment: DialogAlignment.Bottom, //底部弹出
        offset: { dx: 0, dy: -35 },
        autoCancel: false, //点击遮障层时，不关闭弹窗
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    }
  }

  /**
   * 提示弹出框
   */
  tipsDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showTipsDialog({
        uiContext:this.getUIContext(),
        content: '想要卸载这个APP嘛?',
        showInSubWindow:false,
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 1) {
      //自定义图标和图标大小
      DialogHelper.showTipsDialog({
        imageRes: $r('sys.media.ohos_app_icon'),
        imageSize: { width: 50, height: 50 },
        content: '想要卸载这个APP嘛?',
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 2) {
      //自定义图标和按钮
      DialogHelper.showTipsDialog({
        imageRes: $r('app.media.icon_tip_warn'),
        content: '想要卸载这个APP嘛?',
        primaryButton: "卸载",
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else {
      //自定义
      DialogHelper.showTipsDialog({
        imageRes: $r('sys.media.ohos_app_icon'),
        imageSize: { width: 50, height: 50 },
        content: '想要卸载这个APP嘛?',
        checkTips: "是否删除缓存文件",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        primaryButton: {
          value: "取消",
          fontColor: Color.Black
        },
        secondaryButton: {
          value: "卸载",
          fontColor: Color.Red
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    }
  }

  /**
   * 选择类弹出框
   */
  selectDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showSelectDialog({
        radioContent: ["文本菜单选项一", "文本菜单选项二", "文本菜单选项三", "文本菜单选项四", "文本菜单选项五"],
        onCheckedChanged: (index) => {
          ToastUtil.showToast(`${index}`);
        },
        onAction: (action, dialogId, value) => {
          ToastUtil.showToast(`${action} --- ${value}`);
        }
      })
    } else if (index == 1) {
      //自定义标题，内容，底部弹出框
      let dialogID = DialogHelper.showSelectDialog({
        title: "请选择",
        content: "选择您中意的文本菜单",
        alignment: DialogAlignment.Bottom, //底部弹出
        offset: { dx: 0, dy: -35 },
        autoCancel: false, //点击遮障层时，不关闭弹窗
        radioContent: ["文本菜单选项一", "文本菜单选项二", "文本菜单选项三", "文本菜单选项四", "文本菜单选项五"],
        onCheckedChanged: (index) => {
          ToastUtil.showToast(`${index}`);
          DialogHelper.closeDialog(dialogID);
        },
        onAction: (action, dialogId, value) => {
          ToastUtil.showToast(`${action} --- ${value}`);
          DialogHelper.closeDialog(dialogId);
        }
      })
    } else if (index == 2) {
      //自定义标题，内容，底部弹出框
      DialogHelper.showSelectDialog({
        title: "请选择菜单",
        content: "选择您中意的文本菜单",
        selectedIndex: 3, //设置选中索引
        autoCancel: false, //点击遮障层时，不关闭弹窗
        radioContent: [{
          title: "文本菜单选项一",
          icon: $r('app.media.icon_tip_warn'),
          action: () => {
          }
        },
          {
            title: "文本菜单选项二",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          },
          {
            title: "文本菜单选项三",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          },
          {
            title: "文本菜单选项四",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          },
          {
            title: "文本菜单选项五",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          }],
        onCheckedChanged: (index) => {
          ToastUtil.showToast(`${index}`);
        },
        onAction: (action, dialogId, value) => {
          ToastUtil.showToast(`${action} --- ${value}`);
        }
      })
    }
  }

  /**
   * 单行文本输入弹出框
   */
  textInputDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showTextInputDialog({
        autoCancel: false,
        backCancel: false,
        actionCancel: false,
        text: this.inputText,
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          }
          DialogHelper.closeDialog(dialogId);
        }
      })
    } else if (index == 1) {
      //自定义按钮、标题、边距等
      DialogHelper.showTextInputDialog({
        title: "支付密码",
        placeholder: "请输入密码",
        inputType: InputType.Password,
        showPassword: false,
        showPasswordIcon: true,
        passwordIcon: {
          onIconSrc: $r('sys.media.ohos_ic_public_voice'),
          offIconSrc: $r('sys.media.ohos_ic_public_voice_off')
        },
        passwordRules:"1234567",
        cancelButton: {
          style: CancelButtonStyle.INPUT
        },
        defaultFocus: true, //主动拉起键盘
        text: this.inputText,
        alignment: DialogAlignment.Bottom,
        offset: { dx: 0, dy: -35 },
        contentAreaPadding: { top: 12, bottom: 16, left: 15, right: 15 },
        buttons: [
          { value: "取消", fontColor: Color.Red },
          "确认"
        ],
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          this.inputText = content;
        }
      })
    } else if (index == 2) {
      //不带标题的
      DialogHelper.showTextInputDialog({
        title: "",
        buttons: [
          '取消',
          { value: '保存', fontColor: Color.Red }
        ],
        alignment: DialogAlignment.Bottom,
        offset: { dx: 0, dy: -35 },
        contentAreaPadding: { top: 30, bottom: 10, left: 15, right: 15 },
        text: this.inputText,
        placeholder: "请输入人员年龄",
        inputType: InputType.Number,
        maxLength: 3,
        inputFilter: {
          value: "[0-9]",
          error: (value) => {
            console.error("inputFilter: " + value);
          }
        },
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          } else if (action == DialogAction.CANCEL) {

          }
        }
      })
    }
  }

  /**
   * 多行文本输入弹出框
   */
  textAreaDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showTextAreaDialog({
        text: this.inputText,
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          }
        }
      })
    } else if (index == 1) {
      //自定义弹框高度
      DialogHelper.showTextAreaDialog({
        title: "评论内容",
        text: this.inputText,
        defaultFocus: true,
        placeholder: "请输入，[a-z,A-Z,0-9]，长度20",
        maxLength: 20,
        inputFilter: {
          value: "[0-9A-Za-z]",
          error: (value) => {
            LogUtil.error("inputFilter: " + value);
          }
        },
        inputHeight: 160,
        alignment: DialogAlignment.Bottom,
        offset: { dx: 0, dy: -35 },
        buttons: [{
          value: "确认",
          fontColor: Color.Red
        }],
        autoCancel: false,
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
            this.inputText = content;
        }
      })
    } else if (index == 2) {
      //自定义弹框，多按钮，
      DialogHelper.showTextAreaDialog({
        primaryTitle: "批示操作弹框",
        secondaryTitle: "请填写批示意见",
        text: this.inputText,
        buttons: ["暂存", "提交"],
        autoCancel: false,
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          }
        }
      })
    }
  }


  /**
   * 自定义内容区弹出框
   */
  customContentDialog(index: number) {
    if (index == 0) {
      //简单使用，局部 @Builder
      DialogHelper.showCustomContentDialog({
        contentBuilder: () => {
          this.customTextBuilder("我是一个自定义文本内的弹框！")
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 1) {
      //自定义文本内容，使用全局 @Builder 和 自定义组件
      DialogHelper.showCustomContentDialog({
        title: "哈哈哈哈哈哈",
        contentBuilder: () => {
          this.customTextBuilderParam($r('app.string.module_desc'))
        },
        buttons: [
          '取消',
          { value: '知道了', fontColor: Color.Red }
        ],
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 2) {
      //自定义图文，使用局部 @Builder 和 自定义组件
      DialogHelper.showCustomContentDialog({
        primaryTitle: "爱心提示",
        secondaryTitle: "其实我是一个二级标题",
        contentBuilder: () => {
          this.customTextImgBuilder("最受欢迎的三方库，@pura/harmony-utils",$r('app.media.test_as2'))
        },
        buttons: [
          { value: '取消', fontColor: Color.Black },
          { value: '知道了', fontColor: Color.Red }
        ],
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    }
  }

  /**
   * 动作面板
   */
  bottomSheetDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showBottomSheetDialog({
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 1) {
      //带标题
      DialogHelper.showBottomSheetDialog({
        title: "请选择上传方式",
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 2) {
      //自定义按钮
      DialogHelper.showBottomSheetDialog({
        title: "请选择操作方式",
        sheets: [{
          value: "文本操作选项一",
          fontColor: Color.Red,
          fontSize: 18
        }, {
          value: "文本操作选项二",
          fontColor: Color.Blue,
          fontSize: 18
        }, {
          value: "文本操作选项三",
          fontColor: Color.Brown,
          fontSize: 18
        }, {
          value: "文本操作选项四",
          fontColor: Color.Green,
          fontSize: 18
        }],
        onAction: (index) => {
          ToastUtil.showToast(`您点击了第几个按钮，${index + 1}`);
        }
      })
    }
  }

  /**
   * 动作面板（IOS风格）
   */
  actionSheetDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showActionSheetDialog({
        actionCancel: false,
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 1) {
      //带标题
      DialogHelper.showActionSheetDialog({
        title: "请选择上传方式",
        cancelFontColor: Color.Red,
        cancelFontWeight: FontWeight.Normal,
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 2) {
      //自定义按钮
      DialogHelper.showActionSheetDialog({
        title: "请选择操作方式",
        sheets: [{
          value: "文本操作选项一",
          fontColor: Color.Red,
          fontSize: 18
        }, {
          value: "文本操作选项二",
          fontColor: Color.Blue,
          fontSize: 18
        }, {
          value: "文本操作选项三",
          fontColor: Color.Brown,
          fontSize: 18
        }, {
          value: "文本操作选项四",
          fontColor: Color.Green,
          fontSize: 18
        }],
        onAction: (index) => {
          ToastUtil.showToast(`您点击了第几个按钮，${index + 1}`);
        },
        onDidDisappear: () => {
          ToastUtil.showToast("ActionSheetDialog关闭了");
        }
      })
    }
  }

  /**
   * TextPickerDialog，选择器弹框
   */
  textPickerDialog(index: number) {
    if (index == 0) {
      DialogHelper.showTextPickerDialog({
        title: "请选择",
        range: this.likes,
        // range: this.rangeContent,
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value as string}`);
          }
        }
      })
    } else if (index == 1) {
      DialogHelper.showTextPickerDialog({
        autoCancel: false,
        title: "请选择",
        titleFontColor: Color.Pink,
        titleBackground: "#E6E6E6",
        primaryButton: "取消",
        secondaryButton: {
          value: "确定",
          fontColor: Color.Red,
        },
        range: this.multis,
        value: ["apple2", "orange3", "peach1"], //设置选中
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value as string}`);
          }
        },
        onChange: (value: string | string[], index: number | number[]): void => {
          LogUtil.error(`value: ${value}`);
          LogUtil.error(`index: ${index}`);
        }
      })
    } else if (index == 2) {
      let aiHuiList = AreaHelper.getCityByNameSync("安徽省");
      DialogHelper.showTextPickerDialog({
        range: aiHuiList,
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value}`);
          }
        }
      })
    } else if (index == 3) {
      let areas = AreaHelper.getAreaSync();
      DialogHelper.showTextPickerDialog({
        title: "请选择收货地址",
        range: areas,
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value}`);
          }
        }
      })
    }
  }


  /**
   * DatePickerDialog，日期选择器弹框
   */
  datePickerDialog(index: number) {
    if (index == 0) {
      DialogHelper.showDatePickerDialog({
        dateType: DateType.YmdHms,
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH:mm:ss");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    } else if (index == 1) {
      DialogHelper.showDatePickerDialog({
        primaryButton: {
          value: "取消",
          fontColor: Color.Red
        },
        secondaryButton: "确认",
        title: "请选择日期",
        dateType: DateType.YmdHm,
        // selected: new Date("2999-12-16 19:20:35"),
        start:new Date("1976-01-01 00:00:00"),
        end: new Date(),
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH:mm");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    } else if (index == 2) {
      DialogHelper.showDatePickerDialog({
        title: "请选择年月日",
        dateType: DateType.YmdH,
        canLoop: false,
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    } else if (index == 3) {
      DialogHelper.showDatePickerDialog({
        title: "请选择时分秒",
        transition: AnimationHelper.transitionInDown(300),
        dateType: DateType.Hms,
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "HH:mm:ss");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    }
  }


  /**
   * 显示自定义弹窗
   */
  customDialog(index: number) {
    if (index == 0) {
      //自定义一个Tip弹出框
      let tipOptions: TipOptions = {
        autoCancel: true,
        backCancel: true,
        title: "提交成功",
        content: "请假单已成功提交给您的领导啦",
        levelMode:LevelMode.EMBEDDED,
        onAction: (action, dialogId) => {
          router.pushUrl({ url: "pages/spinkit/SpinKit1" });
          // DialogHelper.closeDialog(dialogId);
        }
      };
      DialogHelper.showCustomDialog(wrapBuilder(TipBuilder), tipOptions);
    } else if (index == 1) {
      //自定义一个底部的MenuLayout
      let menuOptions: MenuOptions = {
        transition:AnimationHelper.transitionInDown(),
        alignment: DialogAlignment.Bottom,
        title: "分享",
        menus: Utils.getMenus(),
        onItemClick: (menu) => {
          DialogHelper.showToast(menu.text);
          DialogHelper.closeDialog(menuOptions.dialogId ?? "");
        }
      };
      DialogHelper.showCustomDialog(wrapBuilder(MenuBuilder), menuOptions);
    } else if (index == 2) {
      //自定义一个左边的DrawerLayout
      let drawer: DrawerOptions = {
        width: px2vp(DisplayUtil.getWidth()) - 50, //自定义的宽度
        autoCancel: false,
        alignment: DialogAlignment.TopStart,
        keyboardAvoidMode: KeyboardAvoidMode.NONE,
        transition: AnimationHelper.transitionInLeft(250)
      };
      DialogHelper.showCustomDialog(wrapBuilder(DrawerBuilder), drawer);
    } else {
      //基于Lottie动画的自定义加载框
      let loadOptions: LoadOptions = new LoadOptions();
      loadOptions.backCancel = true;
      DialogHelper.showCustomDialog(wrapBuilder(LottieBuilder), loadOptions);
      setTimeout(() => {
        DialogHelper.closeDialog(loadOptions.dialogId ?? "");
      }, 10000)
    }
  }


  /**
   * 显示自定义半模态
   */
  showBindSheet(index: number) {
    // let targetId = this.getUniqueId();
    let targetId = "10001";

    //自定义一个底部的MenuLayout
    let menuOptions: MenuSheetOptions = {
      dialogId: DialogHelper.generateId(),
      title: {
        title: "分享我的动态",
      },
      detents: [SheetSize.FIT_CONTENT, SheetSize.MEDIUM, SheetSize.FIT_CONTENT],
      borderWidth: 10,
      borderColor: Color.White,
      targetId: targetId,
      mode: SheetMode.EMBEDDED,
      preferType: SheetType.BOTTOM,
      menus: Utils.getMenus(),
      onItemClick: (menu) => {
        router.pushUrl({ url: "pages/spinkit/SpinKit1" });
        DialogHelper.showToast(menu.text);
      }
    };
    DialogHelper.showBindSheet(wrapBuilder(MenuSheetBuilder), menuOptions);
  }


  /**
   * 显示进度加载类弹出框
   */
  loadingDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showLoadingDialog({ autoCancel: true })
    } else if (index == 1) {
      //自定义文字内容
      DialogHelper.showLoadingDialog({
        loadColor: Color.White,
        content: "努力加载中",
        fontSize: 15,
        backgroundColor: '#ED000000',
        autoCancel: true,
      })
    } else if (index == 2) {
      //指定加载动画和加载动画的颜色
      DialogHelper.showLoadingDialog({
        loadType: SpinType.spinH,
        loadColor: $r('app.color.color_main'),
        backgroundColor: '#DD000000',
        fontColor: Color.White,
        borderRadius: 8
      })
    } else {
      //禁止点击返回关闭弹窗 和 禁止点击遮蔽层关闭弹窗
      let dialogId = DialogHelper.showLoadingDialog({
        loadType: SpinType.spinU,
        loadColor: $r('app.color.color_main'),
        marginTop: 20,
        content: "努力加载中",
        fontColor: $r('app.color.color_main'),
        autoCancel: false,
        backCancel: false
      })
      //延时关闭
      let timeoutID = setTimeout(() => {
        DialogHelper.closeDialog(dialogId); //关闭加载框
        clearTimeout(timeoutID);
      }, 5000);
    }
  }

  /**
   * 进度条加载弹框
   */
  loadingProgress(index: number) {
    if (index == 0) {
      //简单使用
      this.progress = 50;
      let dialogId = DialogHelper.showLoadingProgress({
        progress: this.progress,
      });
      //模拟网络
      let intervalID = setInterval(() => {
        if (this.progress < 100) {
          this.progress = this.progress + 1
          DialogHelper.updateLoading(dialogId, "", this.progress)
          console.log("progress: " + this.progress);
        } else {
          DialogHelper.closeDialog(dialogId); //加载成功
          ToastUtil.showToast("加载成功啦~");
          clearInterval(intervalID);
        }
      }, 100);
    } else if (index == 1) {
      //自定义加载内容和主题色
      this.progress = 10;
      let dialogId = DialogHelper.showLoadingProgress({
        progress: this.progress,
        content: "努力加载中",
        loadColor: $r('app.color.color_main'),
        fontColor: $r('app.color.color_main'),
        autoCancel: false,
        shadow: { radius: 0 }
      })
      //模拟网络
      let intervalID = setInterval(() => {
        if (this.progress < 100) {
          this.progress = this.progress + 1
          DialogHelper.updateLoading(dialogId, undefined, this.progress)
          console.log("progress: " + this.progress);
        } else {
          DialogHelper.closeDialog(dialogId); //加载成功
          ToastUtil.showToast("加载成功啦~");
          clearInterval(intervalID);
        }
      }, 150);
    } else if (index == 2) {
      //自定义加载内容和主题色
      this.progress = 0;
      let dialogId = DialogHelper.showLoadingProgress({
        progress: this.progress,
        content: "文件下载中",
        loadColor: Color.White,
        autoCancel: false,
      })
      //模拟网络
      let intervalID = setInterval(() => {
        if (this.progress < 100) {
          this.progress = this.progress + 1
          DialogHelper.updateLoading(dialogId, undefined, this.progress)
          console.log("progress: " + this.progress);
        } else {
          DialogHelper.closeDialog(dialogId); //加载成功
          ToastUtil.showToast("下载成功啦~");
          clearInterval(intervalID);
        }
      }, 200);
    }
  }

  /**
   * 自定义的吐司
   */
  toast(index: number) {
    if (index == 0) {
      //简单使用,长文本
      DialogHelper.showToast("女人什么年龄是最好？任何年龄都可以。因为每个年龄段都有不一样的美。看XX的穿搭你就会发现成熟女性的魅力，反而会更加的吸引人。难道这就是传说中的可爱在性感面前真的不值得一提吗？")
    } else if (index == 1) {
      //自定义的长吐司
      DialogHelper.showToastLong("这是一个自定义的长吐司呀~~~", {
        fontColor: Color.White,
        backgroundColor: "#DD0066FF",
        bottom: "120vp"
      });
    } else if (index == 2) {
      //自定义吐司
      DialogHelper.showToast("这是一个居中的自定义吐司", {
        fontColor: Color.Red,
        backgroundColor: Color.Black,
        alignment: Alignment.Center,
      });
    } else {
      //自定义吐司
      DialogHelper.showToastLong("这是一个距离顶部100vp的自定义吐司", {
        fontColor: Color.White,
        backgroundColor: "#99FF0000",
        alignment: Alignment.Top,
        offset: { dx: 0, dy: vp2px(100) }
      });
    }
  }

  /**
   * 带图标的吐司Tip
   */
  toastTip(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showToastTip({
        message: "操作成功",
        imageRes: $r('app.media.icon_tip_ok')
      })
    } else if (index == 1) {
      DialogHelper.showToastTip({
        message: "操作失败",
        imageRes: $r('app.media.icon_tip_warn')
      })
    } else if (index == 2) {
      //自定义背景和圆角
      DialogHelper.showToastTip({
        message: "操作成功",
        imageRes: $r('app.media.icon_tip_info'),
        backgroundColor: $r('app.color.color_main'),
        borderRadius: 6
      })
    } else {
      //自定义颜色和时长
      DialogHelper.showToastTip({
        message: "操作成功",
        imageRes: $r('app.media.icon_tip_ok'),
        // fontColor: $r('app.color.color_main'),
        alignment: DialogAlignment.Bottom,
        offset: { dy: -100, dx: 0 },
        duration: 2000,
        orientation: Orientation.HORIZONTAL,
        imageSize: { height: 24, width: 24 },
        margin: 8,
      })
    }
  }

  build() {
    Column() {
      TitleView({ title: "弹框指南" })
      Scroll(this.scroller) {
        Column() {
          CardButton({
            label: "弹框，加载框、吐司 的统一配置",
            buttons:["配置一", "配置二", "默认的配置"],
            onClickAction: (index: number): void => {
              if (index === 0) {
                this.customConfig1();
              } else if (index === 1) {
                this.customConfig2();
              } else {
                this.defaultConfig();
              }
            }
          })

          CardButton({
            label: "AlertDialog",
            content: "操作确认类弹出框",
            onClickAction: (index: number): void => this.alertDialog(index)
          })
          CardButton({
            label: "ConfirmDialog",
            content: "信息确认类弹出框",
            onClickAction: (index: number): void => this.confirmDialog(index)
          })
          CardButton({
            label: "TipsDialog",
            content: "提示弹出框",
            onClickAction: (index: number): void => this.tipsDialog(index)
          })
          CardButton({
            label: "SelectDialog",
            content: "选择类弹出框",
            num: 3,
            onClickAction: (index: number): void => this.selectDialog(index)
          })
          CardButton({
            label: "TextInputDialog",
            content: "单行文本输入弹出框",
            num: 3,
            onClickAction: (index: number): void => this.textInputDialog(index)
          })
          CardButton({
            label: "TextAreaDialog",
            content: "多行文本输入弹出框",
            num: 3,
            onClickAction: (index: number): void => this.textAreaDialog(index)
          })
          CardButton({
            label: "CustomContentDialog",
            content: "显示自定义内容区弹出框，同时支持定义操作区按钮样式",
            num: 3,
            onClickAction: (index: number): void => this.customContentDialog(index)
          })
          CardButton({
            label: "BottomSheetDialog",
            content: "显示动作面板",
            num: 3,
            onClickAction: (index: number): void => this.bottomSheetDialog(index)
          })
          CardButton({
            label: "ActionSheetDialog",
            content: "显示动作面板（IOS风格）",
            num: 3,
            onClickAction: (index: number): void => this.actionSheetDialog(index)
          })
          CardButton({
            label: "TextPickerDialog",
            content: "选择器弹框-TextPicker",
            num: 4,
            onClickAction: (index: number): void => this.textPickerDialog(index)
          })
          CardButton({
            label: "DatePickerDialog",
            content: "日期选择器弹框",
            num: 4,
            onClickAction: (index: number): void => this.datePickerDialog(index)
          })
          CardButton({
            label: "CustomDialog",
            content: "自定义弹窗",
            onClickAction: (index: number): void => this.customDialog(index)
          })
          CardButton({
            label: "BindSheet",
            content: "自定义半模态",
            onClickAction: (index: number): void => this.showBindSheet(index)
          })
            .id("10001")
          CardButton({
            label: "LoadingDialog",
            content: "进度加载类弹出框",
            onClickAction: (index: number): void => this.loadingDialog(index)
          })
          CardButton({
            label: "LoadingProgress",
            content: "进度条加载弹框",
            num: 3,
            onClickAction: (index: number): void => this.loadingProgress(index)
          })
          CardButton({
            label: "Toast",
            content: "自定义的吐司",
            onClickAction: (index: number): void => this.toast(index)
          })
          CardButton({
            label: "ToastTip",
            content: "带图标的吐司Tip",
            onClickAction: (index: number): void => this.toastTip(index)
          })
            .margin({ bottom: 15 })
        }
      }
      .layoutWeight(1)
      .width('100%')
      .backgroundColor($r('app.color.main_background'))
    }
  }


  //自定义文本
  @Builder
  customTextBuilder(content: string) {
    Text(content)
      .fontFamily('MyFont')
      .fontColor($r('app.color.font_title'))
      .fontSize(16)
      .padding(5)
      .textShadow({
        color: Color.Brown,
        type: ShadowType.COLOR,
        radius: 3,
        offsetX: 5,
        offsetY: 5,
        fill: false
      })
  }


  //自定义文本和图片
  @Builder
  customTextImgBuilder(content: ResourceStr, src: Resource) {
    CustomImageView({ content: content, src: src })
  }


}

harmony-dialog

桃花镇童长老 — Sun, 29 Jun 2025 15:09:43 +0000

harmony-dialog(API12+)

🏆Introduction and Recommendations

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are. It covers
AlertDialog, TipsDialog, ConfirmDialog, SelectDialog, CustomContentDialog, TextInputDialog, TextAreaDialog, BottomSheetDialog, ActionSheetDialog, TextPickerDialog, DatePickerDialog, CustomDialog, BindSheet, LoadingDialog, LoadingProgress, Toast, ToastTip
Various types can meet various pop-up development needs.

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications.

🌞Download and install

ohpm i @pura/harmony-dialog

OpenHarmony ohpm
For more information, please refer to如何安装 OpenHarmony ohpm 包

📚API detailed explanation预览效果🌞

DialogHelper Method	Introduction
setDefaultConfig	Set default uniform style
showAlertDialog	Display operation confirmation class pop-up box
showConfirmDialog	Display information confirmation class pop-up box
showTipsDialog	The display prompt pop-up box is a confirmation box with graphics
showSelectDialog	Show Select class pop-up box
showTextInputDialog	Show single line text input pop-up box
showTextAreaDialog	Show multi-line text input box
showCustomContentDialog	Display the pop-up box of the custom content area, and supports defining the button style of the operation area
showBottomSheetDialog	Show action panel
showActionSheetDialog	Show Action Panel (IOS Style)
showTextPickerDialog	Display selector pop-up box; refer to the TextPicker component; cooperatechina_areaData selection of provinces, cities and counties in China can be made.
showDatePickerDialog	Show date selector pop-up box, in conjunctionharmony-utilsThe DateUtil tool class uses, formats the date.
showCustomDialog	Show custom popups
update	Refresh custom pop-ups
isShowing	Is the current pop-up window displayed
closeDialog	Close pop-up box
showLoadingDialog	Show loading class pop-up box
showLoadingProgress	Show progress bar loading box
updateLoading	Refresh loading box
showBindSheet	Show custom semi-modal
updateBindSheet	Refresh custom semi-modal
closeBindSheet	Show toast with graphics
showToast	Show Toast
showToastLong	Show long toast
showToastShort	Show short toast
showToastTip	Show toast with graphics
generateId	GenerateBox ID

AnimationHelper Method	Introduction
transitionInUp	InUp animation
transitionInDown	InDown Animation
transitionInLeft	InLeft Animation
transitionInRight	InRight Animation

📚Sample code使用案例

    //简单初始化（1.0.8版本及以后）
    //必须在UIAbility的onCreate方法里初始化context。
    DialogHelper.setDefaultConfig((config) => {
      config.uiAbilityContext = this.context;
    })

    //设置默认的统一配置，在UIAbility的onCreate方法里初始化
    DialogHelper.setDefaultConfig((config) => {
      config.uiAbilityContext = this.context  //必须初始化上下文
      config.autoCancel = true; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：true
      config.backCancel = true; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。true表示关闭弹窗。false表示不关闭弹窗。默认值：true。
      config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。默认值：true。
      config.alignment = DialogAlignment.Center; //弹窗的对齐方式。
      config.offset = { dx: 0, dy: 0 }; //弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }
      config.maskColor = 0x33000000; //自定义蒙层颜色。默认值 0x33000000
      config.backgroundColor = Color.White; //弹窗背板颜色。默认值：Color.White
      config.backgroundBlurStyle = BlurStyle.COMPONENT_ULTRA_THICK; //弹窗背板模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK
      config.cornerRadius = 20; //设置背板的圆角半径。可分别设置4个圆角的半径。

      config.title = '温馨提示'; //弹框标题
      config.primaryButton = '取消'; //弹框左侧按钮。
      config.secondaryButton = '确定'; //弹框右侧按钮。
      config.imageRes = undefined; //TipsDialog用到，展示的图片。
      config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。默认值：64*64vp

      config.loading_loadSize = 60; //加载动画或进度条的大小
      config.loading_loadColor = Color.White; //加载动画或进度条的颜色
      config.loading_content = ''; //加载动画的提示文字
      config.loading_fontSize = 16; //文字大小
      config.loading_fontColor = Color.White; //文字颜色
      config.loading_backgroundColor = '#CC000000'; //背景颜色，八位色值前两位为透明度
      config.loading_borderRadius = 10; //背景圆角

      config.picker_textStyle = ; //设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。
      config.picker_selectedTextStylee = ; //设置选中项的文本颜色、字号、字体粗细。
      config.picker_disappearTextStylee = ; //设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。
      config.picker_divider: DividerOptions = { strokeWidth: '2px', startMargin: 0, endMargin: 0, color: '#33000000' }; //设置分割线样式，不设置该属性则按“默认值”展示分割线。
      config.picker_canLoop: boolean = true; //设置是否可循环滚动。
      config.picker_titleFontColor = $r("sys.color.ohos_id_picker_title_text_color"); //弹框标题的字体颜色。
      config.picker_titleBackground = "#F9F9F9"; //头部背景颜色
      config.picker_buttonFontColor = $r("sys.color.ohos_id_picker_button_text_color"); //按钮颜色

      config.toast_duration = 2000; //显示时长(1500ms-10000ms)
      config.toast_durationLong = 10000; //显示时长(10000ms)
      config.toast_fontSize = 16; //文字大小
      config.toast_fontColor = Color.White; //文字颜色
      config.toast_backgroundColor = '#CC000000'; //背景颜色，建议八位色值前两位为透明度
      config.toast_borderRadius = 8; //背景圆角
      config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding
      config.toast_orientation = Orientation.VERTICAL; //吐司布局方向，默认垂直。设置该值时，请重新设置imageSize和margin。
      config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。垂直默认值：45*45vp，水平建议值：24*24vp。
      config.toast_margin = 10; //吐司的图片与文字间距。
    });

    //在子窗口 使用弹框需要传入uiContext
    DialogHelper.showTipsDialog({
      uiContext:this.getUIContext(), //子窗口需要传入UIContext
      content: '想要卸载这个APP嘛?',
      onAction: (action) => {
        ToastUtil.showToast(`${action}`);
      }
    })

    //操作确认类弹出框
    DialogHelper.showAlertDialog({
      content: "确定保存该WPS文件吗？",
      onAction: (action) => {
        if (action == DialogAction.CANCEL) {
          ToastUtil.showToast(`您点击了取消按钮`);
        } else if (action == DialogAction.SURE) {
          ToastUtil.showToast(`您点击了确认按钮`);
        }
      }
    })


    //信息确认类弹出框
    DialogHelper.showConfirmDialog({
      checkTips: "是否记住密码？",
      content: "您是否退出当前应用",
      onCheckedChange: (check) => {
        ToastUtil.showToast(`${check}`);
      },
      onAction: (action) => {
        ToastUtil.showToast(`${action}`);
      }
    })


    //提示弹出框
    DialogHelper.showTipsDialog({
      content: '想要卸载这个APP嘛?',
      onAction: (action) => {
        ToastUtil.showToast(`${action}`);
      }
    })


    //选择类弹出框
    DialogHelper.showSelectDialog({
      radioContent: ["文本菜单选项一", "文本菜单选项二", "文本菜单选项三", "文本菜单选项四", "文本菜单选项五"],
      onCheckedChanged: (index) => {
        ToastUtil.showToast(`${index}`);
      },
      onAction: (action, dialogId, value) => {
        ToastUtil.showToast(`${action} --- ${value}`);
      }
    })

    //单行文本输入弹出框
    DialogHelper.showTextInputDialog({
      text: this.inputText,
      onChange: (text) => {
        console.error("onChange: " + text);
      },
      onAction: (action, dialogId, content) => {
        if (action == DialogAction.SURE) {
          this.inputText = content;
        }
      }
    })


    //多行文本输入弹出框
    DialogHelper.showTextAreaDialog({
      text: this.inputText,
      onChange: (text) => {
        console.error("onChange: " + text);
      },
      onAction: (action, dialogId, content) => {
        if (action == DialogAction.SURE) {
          this.inputText = content;
        }
      }
    })


    //自定义内容区弹出框
    DialogHelper.showCustomContentDialog({
      contentBuilder: () => {
        this.customTextBuilder("我是一个自定义弹框！")
      },
      onAction: (action) => {
        ToastUtil.showToast(`${action}`);
      }
    })

    //动作面板
    DialogHelper.showBottomSheetDialog({
      title: "请选择上传方式",
      sheets: ["相机", "相册", "文件管理器"],
      onAction: (index) => {
        ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
      }
    })


    //动作面板（IOS风格）
    DialogHelper.showActionSheetDialog({
      title: "请选择上传方式",
      sheets: ["相机", "相册", "文件管理器"],
      onAction: (index) => {
        ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
      }
    })

    //选择器弹框（TextPickerDialog）
    let areas = AreaHelper.getAreaSync();
    DialogHelper.showTextPickerDialog({
      title: "请选择收货地址",
      range: areas,
      onAction: (action: number, dialogId: string, value: string | string[]) => {
        if (action == DialogAction.SURE) {
          ToastUtil.showToast(`已选择：${value}`);
        }
      }
    })

    //日期选择器弹框（DatePickerDialog）
    DialogHelper.showDatePickerDialog({
      dateType: DateType.YmdHm,
      onAction: (action: number, dialogId: string, date: Date): void => {
        if (action == DialogAction.SURE) {
          let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH:mm");
          ToastUtil.showToast(`选中日期：${dateStr}`);
          LogUtil.error(`选中日期：${dateStr}`);
        }
      }
    })

    //进度加载类弹出框
    DialogHelper.showLoadingDialog({
      loadType: SpinType.spinP,
      loadColor: Color.White,
      loadSize: 70,
      backgroundColor: '#BB000000',
      content: "加载中…",
      fontSize: 18,
      padding: { top: 30, right: 50, bottom: 30, left: 50 },
      autoCancel: true
     })


    //进度条加载弹框
    DialogHelper.showLoadingProgress({ progress: this.progress })

    //吐司
    DialogHelper.showToast("这是一个自定义吐司")
    DialogHelper.showToastLong("这是一个自定义的长吐司呀")


    //吐司Tip
    DialogHelper.showToastTip({
      message: "操作成功",
      imageRes: $r('sys.media.ohos_ic_public_ok')
    })

   //自定义弹窗
    let drawer: DrawerOptions = {
      width: 260,
      msg: "这是一个自定义弹框，DrawerLayout",
      alignment: DialogAlignment.CenterStart,
      offset: { dx: 0, dy: 0 },
      transition: AnimationHelper.transitionInLeft(250)
    }
    DialogHelper.showCustomDialog(wrapBuilder(DrawerBuilder), drawer)

🍎Communication and communication 🙏

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

https://gitee.com/tongyuyan/harmony-utils

https://github.com/787107497

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

EventBus

桃花镇童长老 — Sun, 29 Jun 2025 14:58:06 +0000

EventBus

🏆Introduction and Recommendations

EventBus Message bus, supports Sticky, supports cross-APP broadcasting.

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications.

🌞Download and install

ohpm i @nutpi/eventbus
OpenHarmony ohpm
For more information, please refer to如何安装 OpenHarmony ohpm 包

📚API detailed explanation

EventBus method	Introduction
on	Register Event Listening
once	Register a single event listening
off	Logout event listening
offAll	Log out all event listening
post	Post regular news
postSticky	Post sticky news
postApp	Publish cross-app messages
getSticky	Get sticky event data
removeSticky	Remove sticky events

📚Sample code

//注册事件监听
EventBus.on('id', (id: string) => {
  ToastUtil.showToast(`ID: ${id}`);
});

//注册单次事件监听
EventBus.once('id', (id: string) => {
  ToastUtil.showToast(`单次ID: ${id}`);
});


//发布普通消息
EventBus.post('id', '100001200');

//发布粘性消息
EventBus.postSticky('id', '100001201');

//发布跨App消息
EventBus.postApp('id', '100001202');


//获取粘性事件数据
let sticky = EventBus.getSticky('id');
ToastUtil.showToast(`粘性事件数据：${sticky}`);

//移除粘性事件
EventBus.removeSticky('id');
ToastUtil.showToast(`移除粘性事件成功！`);


//注销事件监听
EventBus.off('id');

//注销所有事件监听
EventBus.offAll();

Full Code Example

import { router } from '@kit.ArkUI';
import { TitleBarView } from '../../component/TitleBarView';
import { DescribeBean } from '../../model/DescribeBean';
import { EventBus } from '@nutpi/eventbus';
import { ToastUtil } from '@pura/harmony-utils';
import { DialogHelper } from '@pura/harmony-dialog';

/**
 * @nutpi/eventbus，使用案例
 */
@Entry
@ComponentV2
export struct EventBusPage {
  private scroller: Scroller = new Scroller();
  @Local describe: DescribeBean = router.getParams() as DescribeBean;
  @Local txtStr: string = "";

  build() {
    Column() {
      TitleBarView({ describe: this.describe })
      Divider()
      Scroll(this.scroller) {
        Column({ space: 5 }) {
          Button("on()")
            .btnStyle()
            .onClick(() => {
              //注册事件监听
              EventBus.on('id', (id: string) => {
                DialogHelper.showAlertDialog({
                  autoCancel: false,
                  backCancel: false,
                  content: `ID: ${id}`,
                  primaryButton: '已收到',
                  onAction: (action, id) => {
                    DialogHelper.closeDialog(id);
                  }
                });
              });
              ToastUtil.showToast(`注册事件监听成功！`);
            })
          Button("once()")
            .btnStyle()
            .onClick(() => {
              //注册单次事件监听
              EventBus.once('id', (id: string) => {
                DialogHelper.showAlertDialog({
                  autoCancel: false,
                  backCancel: false,
                  content: `单次ID: ${id}`,
                  primaryButton: '已收到',
                  onAction: (action, id) => {
                    DialogHelper.closeDialog(id);
                  }
                });
              });
              ToastUtil.showToast(`注册单次事件监听成功！`);
            })
          Button("post()")
            .btnStyle()
            .onClick(() => {
              EventBus.post('id', '100001200');
              ToastUtil.showToast(`发布普通消息！`);
            })
          Button("postSticky()")
            .btnStyle()
            .onClick(() => {
              EventBus.postSticky('id', '100001201');
              ToastUtil.showToast(`发布粘性消息！`);
            })
          Button("getSticky()")
            .btnStyle()
            .onClick(() => {
              let sticky = EventBus.getSticky('id');
              ToastUtil.showToast(`粘性事件数据：${sticky}`);
            })
          Button("removeSticky()")
            .btnStyle()
            .onClick(() => {
              EventBus.removeSticky('id');
              ToastUtil.showToast(`移除粘性事件成功！`);
            })
          Button("postApp()")
            .btnStyle()
            .onClick(() => {
              EventBus.postApp('id', '100001202');
              ToastUtil.showToast(`发布跨App消息！`);
            })
          Button("off()")
            .btnStyle()
            .onClick(() => {
              //注销事件监听
              EventBus.off('id');
              ToastUtil.showToast(`注销事件监听！`);
            })
          Button("offAll()")
            .btnStyle()
            .onClick(() => {
              //注销所有事件监听
              EventBus.offAll();
              ToastUtil.showToast(`注销所有事件监听！`);
            })

          Blank().layoutWeight(1)
        }
        .margin({ top: 5, bottom: 5 })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.main_background'))
  }
}


@Styles
function btnStyle() {
  .width('90%')
  .margin({ top: 10, bottom: 5 })
}

🍎Communication and communication 🙏

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

china_area

桃花镇童长老 — Sun, 29 Jun 2025 14:51:53 +0000

china_area

🏆Introduction and Recommendations

china_area China's regional data, provincial, municipal and county data.

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications.

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are.

🌞Download and install

ohpm i @nutpi/china_area
OpenHarmony ohpm
For more information, please refer to如何安装 OpenHarmony ohpm 包

📚API detailed explanation使用案例

AreaHelper Method	Introduction
getAreaStrSync getAreaStr	Get JSON strings for provinces, cities and counties
getAreaSync getArea	Get data from provinces, cities and counties
getCityByNameSync getCityByName	Get the following city according to the provincial name
getDintrictByNameSync getDintrictByName	Get the following district and county based on the city name

📚Sample code

//获取省市县的JSON字符串
let txtStr = await AreaHelper.getAreaStr();
let areaList = JSONUtil.jsonToArray<AreaEntity>(txtStr);


//获取省市县的数据
let areas = AreaHelper.getAreaSync();


//根据省名获取下面的市
let citys = await AreaHelper.getCityByName("安徽省");


//根据市名获取下面的区县
let list = AreaHelper.getDistrictByNameSync("合肥市");


//配合‘@pura/harmony-dialog’的\nshowTextPickerDialog()方法使用
let data = AreaHelper.getAreaSync();
DialogHelper.showTextPickerDialog({
  title: "请选择",
  range: data,
  onChange: (value: string | string[], index: number | number[]) => {
    LogUtil.error(`value: ${value} --- index: ${index}`);
  },
  onAction: (action: number, dialogId: string, value: string | string[]) => {
    if (action === DialogAction.SURE) {
      DialogHelper.showToast(`已选择：${value}`);
    }
  }
});

🍎Communication and communication 🙏

Any problems found during use can be askedIssueGive us;
Of course, we also welcome you to send us a messagePR 。

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.

SM4, SM4 encryption and decryption

桃花镇童长老 — Sun, 29 Jun 2025 14:45:18 +0000

Introduction and description of harmony-utils

Download and install

ohpm i @pura/harmony-utils

ohpm i @pura/picker_utils

  //Global initialization method, initialized in the onCreate method of UIAbility AppUtil.init()
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    AppUtil.init(this.context);
  }

Introduction to SM4 algorithm

SM4 is a commercial symmetric encryption algorithm independently developed by China. It was released by the State Cryptography Administration in 2006 and became the national cryptography industry standard in 2012 (GM/T 0002-2012). This algorithm uses a 128-bit packet length and a 128-bit key length to realize data encryption through 32 rounds of nonlinear iterative structures, and the security strength is comparable to that of AES-128. Its core design includes S-box replacement, cyclic shifting and other operations, and supports standard working modes such as ECB and CBC. As the core component of China's cryptographic system (SM series), SM4 is widely used in financial payment, e-government, Internet of Things and other fields, meeting domestic cryptographic compliance requirements. The algorithm has the characteristics of efficient software and hardware implementation, and has passed the ISO/IEC international standard certification (18033-3), becoming an important basic algorithm in the field of information security in my country.

SM4 application scenarios

Financial payment: Encrypt sensitive data (such as transaction amount and account information) in bank card transactions, mobile payments and online banking to ensure the security of transmission and comply with the password compliance requirements of China's financial industry;
E-government: used for data transmission and encryption of electronic ID cards and government affairs systems, and combined with SM2 signature algorithm to achieve identity authentication and data integrity protection;
Internet of Things Security: Encrypt communication data between smart devices to prevent data leakage in industrial-grade SSDs, smart homes and other scenarios;
Replacement of localized innovation and innovation: replace AES algorithm in information technology application innovation projects to meet the independent and controllable needs of party and government organs and key infrastructure.

API methods and usage

generateSymKey generates symmetric key SymKey

let symKey1 = await SM4.generateSymKey();
let symKeyStr1 = CryptoHelper.dataBlobToStr(symKey1.getEncoded(), 'hex');
LogUtil.error(`对称密钥1：${symKeyStr1}`);

let symKey2 = SM4.generateSymKeySync();
let symKeyStr2 = CryptoHelper.dataBlobToStr(symKey2.getEncoded(), 'base64');
LogUtil.error(`对称密钥2：${symKeyStr2}`);

encryptGCM encryption (GCM mode)

let gcmParams = CryptoUtil.generateGcmParamsSpec();

let str1 = "鸿蒙技术交流群：xxxxxxxxxxx";

let smyKeyHexStr = "da4eed5a22f8883e2339c0b563161c38"; //16进制字符串密钥
let symKey = await CryptoUtil.getConvertSymKey('SM4_128', smyKeyHexStr, 'hex');
let dataBlob = CryptoHelper.strToDataBlob(str1, 'utf-8'); //待加密数据

let encryptDataBlob1 = await SM4.encryptGCM(dataBlob, symKey, gcmParams); //加密
let encryptStr1 = CryptoHelper.dataBlobToStr(encryptDataBlob1, 'utf-8');
LogUtil.error(`加密（GCM模式）,异步：${encryptStr1}`);

let encryptDataBlob2 = SM4.encryptGCMSync(dataBlob, symKey, gcmParams!); //加密
let encryptStr2 = CryptoHelper.dataBlobToStr(encryptDataBlob2, 'utf-8');
LogUtil.error(`加密（GCM模式）,同步：${encryptStr2}`);

decryptGCM decryption (GCM mode)

let gcmParams = CryptoUtil.generateGcmParamsSpec();

let str1 = "鸿蒙技术交流群：xxxxxxxxxxx";

let smyKeyHexStr = "da4eed5a22f8883e2339c0b563161c38"; //16进制字符串密钥
let symKey = await CryptoUtil.getConvertSymKey('SM4_128', smyKeyHexStr, 'hex');
let dataBlob = CryptoHelper.strToDataBlob(str1, 'utf-8'); //待加密数据

let encryptDataBlob1 = await SM4.encryptGCM(dataBlob, symKey, gcmParams!); //加密
let decryptDataBlob1 = await SM4.decryptGCM(encryptDataBlob1, symKey, gcmParams!); //解密
let decryptStr1 = CryptoHelper.dataBlobToStr(decryptDataBlob1, 'utf-8');
LogUtil.error(`解密（GCM模式）,异步：${decryptStr1}`);

let encryptDataBlob2 = SM4.encryptGCMSync(dataBlob, symKey, gcmParams!); //加密
let decryptDataBlob2 = SM4.decryptGCMSync(encryptDataBlob2, symKey, gcmParams!); //解密
let decryptStr2 = CryptoHelper.dataBlobToStr(decryptDataBlob2, 'utf-8');
LogUtil.error(`解密（GCM模式）,同步：${decryptStr2}`);

encryptCBC encryption (CBC mode)

let ivParams = CryptoUtil.generateIvParamsSpec();

let str2 = "harmony-utils，一款高效的HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。";
let smyKeyBase64Str = "2k7tWiL4iD4jOcC1YxYcOA=="; //base64符串密钥
let symKey = CryptoUtil.getConvertSymKeySync('SM4_128', smyKeyBase64Str, 'base64');
let dataBlob = CryptoHelper.strToDataBlob(str2, 'utf-8'); //待加密数据

let encryptDataBlob1 = await SM4.encryptCBC(dataBlob, symKey, ivParams); //加密
let encryptStr1 = CryptoHelper.dataBlobToStr(encryptDataBlob1, 'utf-8');
LogUtil.error(`加密（CBC模式）,异步：${encryptStr1}`);

let encryptDataBlob2 = SM4.encryptCBCSync(dataBlob, symKey, ivParams); //加密
let encryptStr2 = CryptoHelper.dataBlobToStr(encryptDataBlob2, 'utf-8');
LogUtil.error(`加密（CBC模式）,同步：${encryptStr2}`);

decryptCBC decryption (CBC mode)

let ivParams = CryptoUtil.generateIvParamsSpec();

let str2 = "harmony-utils，一款高效的HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。";
et smyKeyBase64Str = "2k7tWiL4iD4jOcC1YxYcOA=="; //base64符串密钥
let symKey = CryptoUtil.getConvertSymKeySync('SM4_128', smyKeyBase64Str, 'base64');
let dataBlob = CryptoHelper.strToDataBlob(str2, 'utf-8'); //待加密数据

let encryptDataBlob1 = await SM4.encryptCBC(dataBlob, symKey, ivParams); //加密
let decryptDataBlob1 = await SM4.decryptCBC(encryptDataBlob1, symKey, ivParams); //解密
let decryptStr1 = CryptoHelper.dataBlobToStr(decryptDataBlob1, 'utf-8');
LogUtil.error(`解密（CBC模式）,异步：${decryptStr1}`);

let encryptDataBlob2 = SM4.encryptCBCSync(dataBlob, symKey, ivParams); //加密
let decryptDataBlob2 = SM4.decryptCBCSync(encryptDataBlob2, symKey, ivParams); //解密
let decryptStr2 = CryptoHelper.dataBlobToStr(decryptDataBlob2, 'utf-8');
LogUtil.error(`解密（CBC模式）,同步：${decryptStr2}`);

encryptECB encryption (ECB mode)

let str1 = "鸿蒙技术交流群：xxxxxxxxxxx";

let smyKeyBase64Str = "2k7tWiL4iD4jOcC1YxYcOA=="; //base64符串密钥
let symKey = CryptoUtil.getConvertSymKeySync('SM4_128', smyKeyBase64Str, 'base64');
let dataBlob = CryptoHelper.strToDataBlob(str1, 'utf-8'); //待加密数据

let encryptDataBlob1 = await SM4.encryptECB(dataBlob, symKey); //加密
let encryptStr1 = CryptoHelper.dataBlobToStr(encryptDataBlob1, 'utf-8');
LogUtil.error(`加密（ECB模式）,异步：${encryptStr1}`);

let encryptDataBlob2 = SM4.encryptECBSync(dataBlob, symKey); //加密
let encryptStr2 = CryptoHelper.dataBlobToStr(encryptDataBlob2, 'utf-8');
LogUtil.error(`加密（ECB模式）,同步：${encryptStr2}`);

decryptECB decryption (ECB mode)

let str1 = "鸿蒙技术交流群：xxxxxxxxxxx";

let smyKeyBase64Str = "2k7tWiL4iD4jOcC1YxYcOA=="; //base64符串密钥
let symKey = CryptoUtil.getConvertSymKeySync('SM4_128', smyKeyBase64Str, 'base64');
let dataBlob = CryptoHelper.strToDataBlob(str1, 'utf-8'); //待加密数据

let encryptDataBlob1 = await SM4.encryptECB(dataBlob, symKey); //加密
let decryptDataBlob1 = await SM4.decryptECB(encryptDataBlob1, symKey); //解密
let decryptStr1 = CryptoHelper.dataBlobToStr(decryptDataBlob1, 'utf-8');
LogUtil.error(`解密（ECB模式）,异步：${decryptStr1}`);

let encryptDataBlob2 = SM4.encryptECBSync(dataBlob, symKey); //加密
let decryptDataBlob2 = SM4.decryptECBSync(encryptDataBlob2, symKey); //解密
let decryptStr2 = CryptoHelper.dataBlobToStr(decryptDataBlob2, 'utf-8');
LogUtil.error(`解密（ECB模式）,同步：${decryptStr2}`);

encryptGCMSegment encryption (GCM mode) segmentation

let gcmParams = CryptoUtil.generateGcmParamsSpec();

let str3 = "harmony-utils，一款高效的HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。。。";

let smyKeyHexStr = "da4eed5a22f8883e2339c0b563161c38"; //16进制字符串密钥
let symKey = await CryptoUtil.getConvertSymKey('SM4_128', smyKeyHexStr, 'hex');
let dataBlob = CryptoHelper.strToDataBlob(str3, 'utf-8'); //待加密数据


let encryptDataBlob1 = await SM4.encryptGCMSegment(dataBlob, symKey, gcmParams!); //加密
let encryptStr1 = CryptoHelper.dataBlobToStr(encryptDataBlob1, 'utf-8');
LogUtil.error(`分段加密（GCM模式）,异步：${encryptStr1}`);

let encryptDataBlob2 = SM4.encryptGCMSegmentSync(dataBlob, symKey, gcmParams!); //加密
let encryptStr2 = CryptoHelper.dataBlobToStr(encryptDataBlob2, 'utf-8');
LogUtil.error(`分段加密（GCM模式）,同步：${encryptStr2}`);

decryptGCMSegment Decrypt (GCM mode) segmentation

let gcmParams = CryptoUtil.generateGcmParamsSpec();

let str3 = "harmony-utils，一款高效的HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。。。";

let smyKeyHexStr = "da4eed5a22f8883e2339c0b563161c38"; //16进制字符串密钥
let symKey = await CryptoUtil.getConvertSymKey('SM4_128', smyKeyHexStr, 'hex');
let dataBlob = CryptoHelper.strToDataBlob(str3, 'utf-8'); //待加密数据

let encryptDataBlob1 = await SM4.encryptGCMSegment(dataBlob, symKey, gcmParams!); //加密);
let decryptDataBlob1 = await SM4.decryptGCMSegment(encryptDataBlob1, symKey, gcmParams!); //解密
let decryptStr1 = CryptoHelper.dataBlobToStr(decryptDataBlob1, 'utf-8');
LogUtil.error(`分段解密（GCM模式）,异步：${decryptStr1}`);

let encryptDataBlob2 = SM4.encryptGCMSegmentSync(dataBlob, symKey, gcmParams!); //加密
let decryptDataBlob2 = SM4.decryptGCMSegmentSync(encryptDataBlob2, symKey, gcmParams!); //解密
let decryptStr2 = CryptoHelper.dataBlobToStr(decryptDataBlob2, 'utf-8');
LogUtil.error(`分段解密（GCM模式）,同步：${decryptStr2}`);

SM3, SM3 tool class

桃花镇童长老 — Sun, 29 Jun 2025 14:39:59 +0000

Introduction and description of harmony-utils

Download and install

ohpm i @pura/harmony-utils

ohpm i @pura/picker_utils

  //Global initialization method, initialized in the onCreate method of UIAbility AppUtil.init()
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    AppUtil.init(this.context);
  }

Introduction to SM3 algorithm

SM3 is the commercial cryptographic hash algorithm standard (GM/T 0004-2012) issued by the China National Cryptography Administration in 2010. It outputs a 256-bit fixed-length hash value, and its security strength is equivalent to that of SHA-256. This algorithm adopts the Merkle-Damgard structure design, and achieves data obfuscation through message filling, grouping expansion and 32 rounds of iterative compression, and has anti-collision attack and original image attack capabilities. As the core component of the domestic cryptographic system, SM3 is widely used in digital signatures, electronic certification, financial payments, and Internet of Things security, and has been included in the ISO/IEC 10118-3 international standard. Its efficiency is adapted to ordinary computers and embedded devices, and supports the formulation of more than 30 domestic cryptographic industry standards.

SM3 application scenarios

Digital signature: Used in conjunction with SM2 asymmetric algorithm to generate hash summary and sign electronic contracts, government documents, etc. to ensure data integrity and non-repudiation;
Financial security: used for online banking transaction verification and payment packet integrity protection. More than 80% of domestic financial institutions deploy this algorithm in key systems;
Internet of Things Authentication: Generate message authentication code (HMAC-SM3) for smart device communication data to prevent data tampering in industrial-grade SSDs, smart grids and other scenarios;
Crypto protocol basis: Support key derivation and verification of security protocols such as SSL/TLS, VPN, etc. to meet the needs of domestic substitution.

API methods and usage

digest SM3 summary

let str1 = "鸿蒙技术交流群：xxxxxxxxxxx";

let digest1 = await SM3.digest(str1);
LogUtil.error(`摘要，异步: ${digest1}`);

let digest2 = SM3.digestSync(str1,'hex');
LogUtil.error(`摘要，同步1: ${digest2}`);

let digest3 = SM3.digestSync(str1, 'base64');
LogUtil.error(`摘要，同步2:  ${digest3}`);

digestSegment SM3 segment summary

let str3 = "harmony-utils，一款高效的HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。";

let digest1 = await SM3.digestSegment(str3);
LogUtil.error(`分段摘要，异步: ${digest1}`);

let digest2 = SM3.digestSegmentSync(str3);
LogUtil.error(`分段摘要，同步1: ${digest2}`);

let digest3 = SM3.digestSegmentSync(str3, 'base64', 256);
LogUtil.error(`分段摘要，同步2: ${digest3}`);

hmac SM3 message authentication code calculation

let str1 = "鸿蒙技术交流群：xxxxxxxxxxx";
let symKey = CryptoUtil.generateSymKeySync("HMAC|SM3");

let digest1 = await SM3.hmac(str1, symKey);
LogUtil.error(`消息认证码计算，异步: ${digest1}`);

let digest2 = SM3.hmacSync(str1, symKey);
LogUtil.error(`消息认证码计算，同步1: ${digest2}`);

let digest3 = SM3.hmacSync(str1, symKey, 'base64');
LogUtil.error(`消息认证码计算，同步2: ${digest3}`);

hmacSegment SM3 message authentication code calculation, segmented

let str2 = "harmony-utils，一款高效的HarmonyOS工具包，封装了常用工具类，提供一系列简单易用的方法。帮助开发者快速构建鸿蒙应用。";
let symKey = CryptoUtil.generateSymKeySync("HMAC|SM3");

let digest1 = await SM3.hmacSegment(str2, symKey);
LogUtil.error(`分段消息认证码计算，异步: ${digest1}`);

let digest2 = SM3.hmacSegmentSync(str2, symKey);
LogUtil.error(`分段消息认证码计算，同步1: ${digest2}`);

let digest3 = SM3.hmacSegmentSync(str2, symKey, 'hex', 256);
LogUtil.error(`分段消息认证码计算，同步2: ${digest3}`);