小程序端无法在app.vue中直接写通知dom，因其仅支持生命周期钩子和globaldata，不支持template或render函数，否则报错“component is missing template or render function”；通知组件必须挂载到实际页面的template中，并通过事件总线或全局挂载方式实现跨页面调用。
小程序端无法直接使用 plus.nativeObj.View 或原生系统通知 API 实现全局浮层通知，必须依赖自定义组件 + 事件总线 + 页面级挂载方案，且需绕开 App.vue 不能写 template 的限制。
为什么不能在 App.vue 里直接写通知 DOM
App.vue 是 UniApp 的逻辑入口，不是渲染容器。它只支持 onLaunch、onShow 等生命周期钩子和 globalData，不支持 <template></template> 或 render 函数。试图在 App.vue 中写 <view></view> 会导致编译报错或 H5/App 端白屏。
- 错误现象：
Component is missing template or render function. - 真实限制：小程序平台（微信/支付宝/字节）根本不允许非页面组件脱离页面上下文渲染到根节点
- 替代路径：通知组件必须挂载在某个「实际存在的页面」的
<template></template>中，比如pages/index/index.vue或通过uni.$emit动态注入到当前活跃页面
如何让通知组件在任意页面都能调用（类似 this.$notify）
核心是利用 Vue 2 的 Vue.prototype（若项目已降级为 Vue 2）或 Vue 3 的 app.config.globalProperties 挂载一个工厂函数，该函数动态创建并插入通知实例到当前页面的 DOM 树中。
- 在
main.js中注册全局方法：Vue.prototype.$notify = function (options) { ... } - 工厂函数内部用
uni.createSelectorQuery()获取当前页面根节点（如#app或.page），再用document.createElement插入通知 DOM（仅 H5）；小程序端则必须通过uni.navigateTo后在目标页面onLoad中触发this.$refs.notify.show(options) - 更稳妥做法：所有页面统一在
<template></template>底部加一行<notify ref="notify"></notify>，然后在mounted中执行uni.$on('global-notify', this.$refs.notify.show)
小程序端通知样式与定位的实际约束
小程序不支持 position: fixed 跨页面生效，所谓“全局”只是视觉模拟——通知 DOM 必须位于当前页面的 <scroll-view></scroll-view> 外层或 <view class="page"></view> 内部，且 top 值需用 rpx 手动计算状态栏高度（uni.getSystemInfoSync().statusBarHeight）。
- 常见坑：
top: 20rpx在 iPhone X+ 上会被状态栏遮挡，必须动态计算：top: ${statusBarHeight + 10}rpx - 动画限制：小程序只支持
transform和opacity的 CSS 动画，height/max-height过渡会失效 - Z-index 无效：小程序层级由组件嵌套顺序决定，通知组件必须放在页面模板最外层
<view></view>内，且不能被<scroll-view></scroll-view>包裹
如何管理多条通知的队列与手动关闭
靠 globalData.notificationQueue = [] 存消息列表，但展示逻辑必须解耦：每条通知独立控制显隐，避免一条关闭导致整个队列重绘卡顿。
- 不要用 v-for 渲染全部通知 —— 小程序列表渲染性能差，且无法单独控制某条消失动画
- 推荐模式：只保留最近 1 条可见通知（
currentNotice），新通知来时先触发上一条close，再show新的；历史记录存globalData.history供消息中心页读取 - 关闭回调必须 emit 事件而非直接操作 data，否则跨页面通信丢失：例如
uni.$emit('notify-closed', id)，由 App.vue 监听后更新未读数 - 自动关闭倒计时需用
setTimeout而非uni.showToast，后者不支持自定义图标/按钮/富文本
真正难的不是写一个弹窗，而是让这个弹窗在微信小程序里不被 <scroll-view></scroll-view> 截断、在支付宝小程序里不因 web-view 容器失焦而消失、在字节小程序里能响应右滑关闭手势——这些细节不会报错，但会让通知“偶尔不出现”。
