加入华为开发者学堂班级链接:

https://developer.huawei.com/consumer/cn/training/classDetail/46b54a56c7e54e74973e0af43c077bff?type=1?ha_source=hmosclass&ha_sourceId=89000248

1. 核心内容

开发鸿蒙应用时,弹窗是高频组件,自己封装不仅耗时还容易有兼容性问题。@pura/harmony-dialog是一款零侵入的弹窗库,支持Alert、Confirm、日期选择等多种弹窗类型,一行代码就能调用。核心用法是初始化后按需调用对应弹窗方法,自定义样式和回调函数。实际开发中,结合业务场景封装通用弹窗工具,能大幅提升开发效率。我之前做的项目用它替代了原生弹窗,兼容性和体验都好了很多。

2. 代码示例  

typescript
// 1. 安装依赖
// ohpm install @pura/harmony-dialog --save

// 2. 封装通用弹窗工具
import {
  AlertDialog, ConfirmDialog, DatePickerDialog, LoadingDialog
} from '@pura/harmony-dialog';

// 初始化弹窗(全局一次即可)
export function initDialog() {
  // 可全局配置默认样式
  AlertDialog.config({
    titleColor: '#333333',
    contentColor: '#666666',
    confirmColor: '#007AFF'
  });
}

// 提示弹窗
export function showAlert(message: string, title: string = '提示') {
  return new Promise<void>((resolve) => {
    AlertDialog.show({
      title,
      content: message,
      confirmText: '确定',
      onConfirm: () => resolve()
    });
  });
}

// 确认弹窗
export function showConfirm(
  message: string,
  title: string = '确认'
): Promise<boolean> {
  return new Promise((resolve) => {
    ConfirmDialog.show({
      title,
      content: message,
      confirmText: '确定',
      cancelText: '取消',
      onConfirm: () => resolve(true),
      onCancel: () => resolve(false)
    });
  });
}

// 日期选择弹窗
export function showDatePicker(
  defaultDate: Date = new Date()
): Promise<Date> {
  return new Promise((resolve) => {
    DatePickerDialog.show({
      startDate: new Date(2020, 0, 1),
      endDate: new Date(2030, 11, 31),
      selectedDate: defaultDate,
      onSelect: (date) => resolve(date)
    });
  });
}

// 加载弹窗
export let loadingDialog: LoadingDialog;
export function showLoading(message: string = '加载中...') {
  if (loadingDialog) loadingDialog.hide();
  loadingDialog = LoadingDialog.show({
    content: message,
    mask: true // 显示遮罩,禁止背景操作
  });
}

export function hideLoading() {
  if (loadingDialog) {
    loadingDialog.hide();
    loadingDialog = null;
  }
}

// 3. 组件中使用示例
@Entry
@Component
struct DialogDemo {
  aboutToAppear() {
    initDialog(); // 初始化弹窗
  }

  build() {
    Column() {
      Button('显示提示弹窗')
        .onClick(async () => {
          await showAlert('操作成功');
        });
      Button('显示确认弹窗')
        .onClick(async () => {
          const confirm = await showConfirm('确定要删除该数据吗?');
          if (confirm) {
            // 执行删除操作
          }
        });
      Button('显示日期选择')
        .onClick(async () => {
          const date = await showDatePicker();
          console.log(`选中日期: ${date.toLocaleDateString()}`);
        });
      Button('显示加载弹窗')
        .onClick(() => {
          showLoading();
          // 模拟接口请求
          setTimeout(() => {
            hideLoading();
          }, 2000);
        });
    }
  }
}

3. 总结

@pura/harmony-dialog集成的核心是“封装复用+场景适配”,全局初始化一次后,封装通用工具函数供各组件调用,避免重复代码。该库支持多种弹窗类型,满足大部分业务场景,零侵入特性不会影响现有代码。实际开发中,结合业务需求扩展弹窗样式和逻辑,能大幅提升开发效率和用户体验。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐