鸿蒙OSUniApp 开发带有通知提示的功能组件#三方框架 #Uniapp

news2025/12/19 5:46:36

使用 UniApp 开发带有通知提示的功能组件

在移动应用开发中，通知提示（Notification/Toast/Alert）是提升用户体验和交互效率的重要手段。无论是表单校验、操作反馈、系统消息还是营销推送，合理的通知提示都能帮助用户及时获取关键信息。随着 HarmonyOS（鸿蒙）生态的不断壮大，开发一套兼容鸿蒙的通知提示功能组件变得尤为重要。本文将结合 UniApp 跨平台开发的优势，详细讲解如何实现一个高效、易扩展、适配鸿蒙的通知提示组件，并分享实际案例和鸿蒙适配经验。

为什么要自定义通知提示组件？

虽然 UniApp 内置了 uni.showToast、uni.showModal 等基础能力，但在实际项目中，往往会遇到如下需求：

支持多种类型（成功、警告、错误、信息等）和自定义样式；
支持全局调用、队列展示、自动消失、手动关闭等高级功能；
兼容多端，尤其是 HarmonyOS 设备的适配和体验优化；
支持插入图片、按钮、富文本等内容。

自定义通知组件不仅能满足个性化需求，还能提升整体产品体验和品牌一致性。

组件设计思路

设计一个通知提示组件，需要考虑以下几个方面：

类型与样式：支持多种通知类型和自定义颜色、图标、动画。
展示与消失：支持自动消失、手动关闭、队列管理。
全局调用：通过事件总线或全局挂载，方便业务随时调用。
鸿蒙适配：在鸿蒙端保证动画、手势、系统通知等能力正常。
易用性与扩展性：props 设计合理，便于业务集成和后续扩展。

组件实现

我们以一个通用的 Notify 组件为例，支持多类型、自动消失、全局调用。

1. 组件结构

在 components/notify/notify.vue 下新建组件：

<template>
  <view v-if="visible" class="notify" :class="type" :style="notifyStyle">
    <text v-if="icon" class="icon">{{ icon }}</text>
    <text class="message">{{ message }}</text>
    <text v-if="closable" class="close-btn" @click="close">×</text>
  </view>
</template>

<script>
export default {
  name: 'Notify',
  props: {
    message: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info' // success, warning, error, info
    },
    duration: {
      type: Number,
      default: 2000
    },
    icon: {
      type: String,
      default: ''
    },
    closable: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: '100rpx'
    }
  },
  data() {
    return {
      visible: false,
      timer: null
    };
  },
  computed: {
    notifyStyle() {
      return {
        top: this.top
      };
    }
  },
  methods: {
    show() {
      this.visible = true;
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          this.close();
        }, this.duration);
      }
    },
    close() {
      this.visible = false;
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.$emit('close');
    }
  },
  beforeDestroy() {
    if (this.timer) clearTimeout(this.timer);
  }
};
</script>

<style scoped>
.notify {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  min-width: 320rpx;
  max-width: 80vw;
  padding: 24rpx 40rpx;
  border-radius: 16rpx;
  color: #fff;
  font-size: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
  z-index: 9999;
  display: flex;
  align-items: center;
  animation: fadeIn 0.3s;
}
.notify.success {
  background: linear-gradient(90deg, #4caf50 0%, #43e97b 100%);
}
.notify.warning {
  background: linear-gradient(90deg, #ff9800 0%, #ffc107 100%);
}
.notify.error {
  background: linear-gradient(90deg, #f44336 0%, #ff6b6b 100%);
}
.notify.info {
  background: linear-gradient(90deg, #2196f3 0%, #6dd5fa 100%);
}
.icon {
  margin-right: 16rpx;
  font-size: 36rpx;
}
.message {
  flex: 1;
}
.close-btn {
  margin-left: 16rpx;
  font-size: 36rpx;
  color: #fff;
  opacity: 0.7;
  cursor: pointer;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20rpx); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
</style>

2. 全局调用与页面集成

可以通过事件总线或 Vue.prototype.$notify 实现全局调用。这里以页面局部调用为例：

<template>
  <view class="demo-notify">
    <button @click="showSuccess">成功提示</button>
    <button @click="showError">错误提示</button>
    <notify ref="notify" :message="notifyMsg" :type="notifyType" :icon="notifyIcon" :closable="true" />
  </view>
</template>

<script>
import Notify from '@/components/notify/notify.vue';

export default {
  components: { Notify },
  data() {
    return {
      notifyMsg: '',
      notifyType: 'info',
      notifyIcon: ''
    };
  },
  methods: {
    showSuccess() {
      this.notifyMsg = '操作成功！';
      this.notifyType = 'success';
      this.notifyIcon = '✔';
      this.$refs.notify.show();
    },
    showError() {
      this.notifyMsg = '发生错误，请重试';
      this.notifyType = 'error';
      this.notifyIcon = '✖';
      this.$refs.notify.show();
    }
  }
};
</script>

<style scoped>
.demo-notify {
  padding: 40rpx;
}
button {
  margin-right: 24rpx;
  margin-bottom: 24rpx;
  width: 220rpx;
  height: 80rpx;
  background: #007dff;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 30rpx;
}
</style>