当前位置：首页 > news >正文

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

news 2025/6/7 3:25:44

使用 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>