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

UniApp 全局通知功能实现

news 2025/11/6 6:29:41

UniApp 全局通知功能实现：从 Vue 3 兼容性问题到完整解决方案

本文记录了一个 UniApp 项目中全局通知功能的完整实现过程，重点解决了 Vue 3 API 在旧版本 HBuilderX 中的兼容性问题，并提供了完整的代码示例和实现思路。

问题背景

在开发 UniApp 应用时，我尝试实现一个全局通知功能，但在运行时遇到了白屏问题。经过排查，发现这是因为项目使用了 Vue 3 的 API，而当前使用的 HBuilderX 版本对 Vue 3 支持不完善导致的兼容性问题。

解决方案

1. 降级到 Vue 2 写法

首先需要将项目从 Vue 3 的写法改为 Vue 2 的兼容性写法。

main.js - 修复版

// 使用Vue 2的写法
import App from './App.vue'
import Vue from 'vue'
import './common/uni.promisify.adaptor'Vue.config.productionTip = false
App.mpType = 'app'const app = new Vue({...App
})
app.$mount()

2. 应用入口文件调整

App.vue - 修复版

<script>
export default {onLaunch() {console.log('App启动')// 设置一个简单的token模拟登录uni.setStorageSync('token', 'test_token')},onShow() {console.log('App Show')},onHide() {console.log('App Hide')}
}
</script><style>
/* 全局样式 */
page {background-color: #f8f8f8;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
}.container {padding: 20rpx;
}
</style>

核心功能实现

通知功能页面

创建一个功能完善的测试页面，包含多种通知类型和操作日志功能。

pages/index/index.vue - 核心代码结构

<template><view class="container"><!-- 页面头部 --><view class="header"><text class="title">推送通知测试</text><text class="subtitle">点击按钮测试通知功能</text></view><!-- 功能按钮组 --><view class="button-group"><button class="btn btn-primary" @tap="sendSimpleNotification">发送简单通知</button><button class="btn btn-success" @tap="sendDelayedNotification">发送5秒延迟通知</button><button class="btn btn-warning" @tap="sendCustomNotification">发送自定义通知</button><button class="btn btn-error" @tap="clearNotifications">清空所有通知</button></view><!-- 操作日志显示 --><view class="log-card"><text class="log-title">操作日志：</text><scroll-view class="log-content" scroll-y><text class="log-item" v-for="(log, index) in logs" :key="index">{{ log }}</text></scroll-view></view></view>
</template>

通知功能方法实现

<script>
export default {data() {return {messageCount: 1,logs: []}},methods: {// 初始化推送功能initPush() {if (typeof plus === 'undefined') {this.addLog('错误: plus对象未定义，请在真机上运行')return}// 监听通知点击事件plus.push.addEventListener('click', (msg) => {this.addLog('通知被点击: ' + msg.content)uni.showToast({title: '点击了通知',icon: 'success'})})},// 发送简单通知sendSimpleNotification() {const content = `这是第${this.messageCount}条测试消息`plus.push.createMessage(content,JSON.stringify({ type: 'test', id: this.messageCount }),{title: '测试通知',cover: false,sound: 'system'})this.addLog('发送通知: ' + content)this.messageCount++},// 发送延迟通知sendDelayedNotification() {plus.push.createMessage('这是5秒后显示的延迟通知',JSON.stringify({ type: 'delayed', time: new Date() }),{title: '延迟通知',delay: 5, // 5秒延迟cover: false})},// 清空所有通知clearNotifications() {plus.push.clear()this.messageCount = 1this.addLog('清空所有通知')}}
}
</script>

兼容性处理

Promise 兼容性适配

创建 common/uni.promisify.adaptor.js 文件处理 Promise 兼容性问题：

// common/uni.promisify.adaptor.js
if (!Promise.prototype.finally) {Promise.prototype.finally = function(callback) {let P = this.constructor;return this.then(value => P.resolve(callback()).then(() => value),reason => P.resolve(callback()).then(() => { throw reason }));};
}

配置文件

manifest.json - 配置 Android 通知权限：

{"app-plus": {"distribute": {"android": {"permissions": ["<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.POST_NOTIFICATIONS\"/>"]}}}
}

样式设计

采用渐变背景和卡片式设计，提供良好的用户体验：

.container {padding: 40rpx;min-height: 100vh;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}.btn {width: 100%;padding: 28rpx;border-radius: 16rpx;font-size: 32rpx;text-align: center;border: none;color: white;font-weight: bold;
}