鸿蒙Interstitial Dialog Action探索：构建用户友好的中断对话框体验

在上次成功集成了Atomic Service Web组件后，我感受到鸿蒙的Atomic Service系统在不同应用场景下的灵活性。此次，我决定继续深入探索鸿蒙的另外一个有趣的功能——Interstitial Dialog Action。在应用开发中，我们时常需要用对话框来提示用户，或要求他们进行某些操作，Interstitial Dialog正是适合这种场景的工具。它可以实现一种类似广告插屏的对话框，用户可以选择继续操作或中断。我觉得这个功能非常适合用户确认重要信息、提供关键选项等场景，所以我决定独立开发一个小项目来尝试这种对话框的应用。

开发前的思考与应用场景

在开发之前，我思考了一下，Interstitial Dialog最常见的场景之一就是在应用内提供重要的提示信息，或者在用户即将进行某些不可逆操作时提醒他们。比如，我打算做一个购物车结算的页面，当用户点击“结算”按钮时，弹出一个插屏对话框确认用户是否真的要进行支付操作。这样可以有效避免因为误操作而产生的后果。

环境搭建与基础实现

首先，我在鸿蒙的DevEco Studio中创建了一个新项目，目标是构建一个模拟购物车结算的小应用，并在用户点击“结算”按钮时使用Interstitial Dialog进行确认操作。

我先定义了一个简单的商品列表和一个“结算”按钮，用户可以选择商品加入购物车，并进行结算。

export default {
  data: {
    cartItems: [
      { name: '商品1', price: 50 },
      { name: '商品2', price: 30 }
    ],
    totalAmount: 80
  },
  methods: {
    onCheckout() {
      this.showInterstitialDialog();
    },
    showInterstitialDialog() {
      // 这里我们将要实现插屏对话框
    }
  }
}

在onCheckout方法中，点击“结算”按钮会触发插屏对话框的显示逻辑。

实现Interstitial Dialog Action

接下来，我使用Interstitial Dialog API来实现这个插屏对话框。当用户点击“结算”按钮时，将会弹出一个对话框，要求用户确认是否继续支付。

import interstitialDialog from '@ohos.atomicservice';

export default {
  data: {
    cartItems: [
      { name: '商品1', price: 50 },
      { name: '商品2', price: 30 }
    ],
    totalAmount: 80
  },
  methods: {
    async showInterstitialDialog() {
      try {
        const result = await interstitialDialog.show({
          title: '确认支付',
          message: `总金额为 ¥${this.totalAmount}，您确认要进行支付吗？`,
          positiveButton: '确认',
          negativeButton: '取消'
        });
        if (result === 'positive') {
          console.log('用户确认支付');
          this.processPayment();
        } else {
          console.log('用户取消支付');
        }
      } catch (error) {
        console.error('显示插屏对话框失败:', error);
      }
    },
    processPayment() {
      console.log('支付处理中...');
      // 模拟支付逻辑
      setTimeout(() => {
        console.log('支付成功！');
      }, 2000);
    }
  }
}

在上面的代码中，我调用了interstitialDialog.show()方法来显示对话框，并设置了标题、消息内容，以及两个按钮：确认和取消。当用户点击确认时，会调用processPayment()方法来处理支付逻辑；如果用户点击取消，则取消支付。

在模板中，我添加了一个购物车的展示和结算按钮。

<template>
  <div class="container">
    <list>
      <list-item v-for="(item, index) in cartItems" :key="index">
        {{ item.name }} - ¥{{ item.price }}
      </list-item>
    </list>
    <text>总金额：¥{{ totalAmount }}</text>
    <button @click="onCheckout">结算</button>
  </div>
</template>

遇到的挑战与优化

在实现的过程中，我遇到了一个小问题，就是在插屏对话框显示时，如果网络连接比较慢或者设备性能较低，用户会感觉有些延迟。为了优化用户体验，我决定在显示对话框之前，先增加一个加载动画，提示用户“处理中，请稍候”。这样可以有效缓解用户在等待时的不确定感。

我修改了代码，增加了一个isLoading状态，用于显示加载提示。

export default {
  data: {
    cartItems: [
      { name: '商品1', price: 50 },
      { name: '商品2', price: 30 }
    ],
    totalAmount: 80,
    isLoading: false
  },
  methods: {
    async showInterstitialDialog() {
      this.isLoading = true;
      setTimeout(async () => {
        this.isLoading = false;
        try {
          const result = await interstitialDialog.show({
            title: '确认支付',
            message: `总金额为 ¥${this.totalAmount}，您确认要进行支付吗？`,
            positiveButton: '确认',
            negativeButton: '取消'
          });
          if (result === 'positive') {
            console.log('用户确认支付');
            this.processPayment();
          } else {
            console.log('用户取消支付');
          }
        } catch (error) {
          console.error('显示插屏对话框失败:', error);
        }
      }, 500); // 模拟加载时间
    },
    processPayment() {
      console.log('支付处理中...');
      // 模拟支付逻辑
      setTimeout(() => {
        console.log('支付成功！');
      }, 2000);
    }
  }
}

在模板中，我增加了一个加载提示。

<template>
  <div class="container">
    <div v-if="isLoading" class="loading">处理中，请稍候...</div>
    <list v-else>
      <list-item v-for="(item, index) in cartItems" :key="index">
        {{ item.name }} - ¥{{ item.price }}
      </list-item>
    </list>
    <text v-if="!isLoading">总金额：¥{{ totalAmount }}</text>
    <button v-if="!isLoading" @click="onCheckout">结算</button>
  </div>
</template>

最终成品：一个用户友好的购物车结算应用

经过这段时间的开发，我成功完成了这个小项目。它包含了一个购物车页面，当用户点击“结算”按钮时，会显示一个确认的插屏对话框，用户可以选择是否继续支付。如果用户确认支付，则会进入支付流程。这次开发让我对鸿蒙的Interstitial Dialog有了更深入的理解，也让我意识到，用户体验的提升需要关注每一个细节，特别是在重要操作前的确认提示，能够有效降低误操作带来的风险。

总结与思考：Interstitial Dialog的应用潜力

通过这次对Interstitial Dialog的探索，我感受到了这个组件在提升用户体验方面的巨大潜力。它可以有效地在用户进行重要操作之前提供明确的提示，并允许用户做出决定，这在电商、支付、敏感数据修改等场景中尤为重要。在未来，我希望能够将这种对话框与更多的场景结合起来，比如在用户关闭应用时提示保存数据，或者在用户执行删除操作时进行确认，从而进一步优化应用的易用性和可靠性。

希望这次的分享能够为你在鸿蒙开发中的用户交互设计带来一些启发，也欢迎你们加入我的鸿蒙开发之旅，一起探索更多的可能性！