uni-app 全局消息通知弹窗（App端）

const { statusBarHeight } = uni.getSystemInfoSync();
class NativeMsg {
	// 整个区域的宽高
	viewStyle = {
		backgroundColor: "rgba(255,255,255,0)",
		top: "0px",
		left: "0px",
		width: "100%",
		// 取图片的高度（带阴影的尺寸）
		height: `${uni.upx2px(239)}px`
	};
	constructor(item, cb) {
		// 记录内容信息，以供回调使用
		this.item = item;
		// 弹出、消失动画要用
		this.offsetTop = -statusBarHeight - uni.upx2px(159);
		// 上边界
		this.startTop = -statusBarHeight - uni.upx2px(159);
		// 下边界
		this.endTop = statusBarHeight;
		// 上滑关闭要用
		this.clientY = 0;
		// nativeObj.View 实例
		this.view = null;
		// 背景图片
		this.bgBitmap = null;
		// 回调函数
		this.cb = cb || null;
		// 隐藏过程flag，防止重复执行
		this.hiding = false;
		// 标记当前弹窗状态
		this.status = "active";
		this.create();
	}
	// 创建区域以及背景
	create() {
		this.loadBg().then(() => {
			let _view = null;
			// 创建 View区域
			_view = new plus.nativeObj.View(`alarmMsg-${this.item.alarmId || "ins"}`, this.viewStyle);
			// 画背景
			_view.drawBitmap(
				this.bitmap,
				{},
				{ width: this.viewStyle.width, height: this.viewStyle.height, left: 0, top: 0 },
				"alarm-bg"
			);
			// 拦截触摸事件: 开启后 区域内的触摸事件不会透传到下面
			_view.interceptTouchEvent(true);
			// 增加点击事件监听
			_view.addEventListener("click", () => {
				if (this.hiding) return;
				this.hiding = true;
				this.cb &amp;&amp; this.cb({ type: "click", result: this.item });
				this.animationHide();
			});
			// 触摸事件监听
			_view.addEventListener("touchstart", res => {
				this.clientY = res.clientY;
			});
			// 触摸事件监听
			_view.addEventListener("touchmove", res => {
				const { clientY } = res;
				let offsetY = this.clientY - clientY;
				if (offsetY > 25 &amp;&amp; !this.hiding) {
					this.hiding = true;
					this.cb &amp;&amp; this.cb({ type: "move", result: this.item });
					this.animationHide();
				}
			});
			// 保存
			this.view = _view;
			// 画内容
			this.drawInfo();
			// 显示
			this.animationShow();
		});
	}
	// 加载背景图片
	loadBg() {
		// 创建Bitmap图片
		this.bitmap = new plus.nativeObj.Bitmap("nativeMsg-bg");
		// 以Promise方式封装 图片加载过程
		return new Promise((resolve, reject) => {
			// 加载图片, 路径需要注意
			this.bitmap.load(
				"_www/static/tpt/alarm-bg.png",
				() => {
					resolve();
				},
				error => {
					console.log(" ====> error", error);
					reject();
				}
			);
		});
	}
	// 画内容
	drawInfo() {
		const { warningTypeStr, projectName, description } = this.item;
		this.view.draw([
			{
				tag: "font",
				id: "mainFont",
				text: warningTypeStr,
				textStyles: { size: `${uni.upx2px(36)}px`, color: "#262626", weight: "bold", align: "left" },
				position: { top: `${uni.upx2px(60)}px`, left: `${uni.upx2px(80)}px`, height: "wrap_content" }
			},
			{
				tag: "font",
				id: "projectFont",
				text: projectName,
				textStyles: { size: `${uni.upx2px(24)}px`, color: "#7B7B7B", align: "right", overflow: "ellipsis" },
				position: {
					top: `${uni.upx2px(60)}px`,
					left: `50%`,
					width: `${uni.upx2px(750 / 2 - 40 - 20)}px`,
					height: "wrap_content"
				}
			},
			{
				tag: "font",
				id: "infoFont",
				text: description,
				textStyles: { size: `${uni.upx2px(28)}px`, color: "#7B7B7B", align: "left", overflow: "ellipsis" },
				position: {
					top: `${uni.upx2px(117)}px`,
					left: `${uni.upx2px(80)}px`,
					width: `${uni.upx2px(670 - 40 - 10)}px`,
					height: "wrap_content"
				}
			}
		]);
	}
	// 简易向下出现动画
	animationShow() {
		this.view.show();
		this.view.setStyle({
			...this.viewStyle,
			top: `${this.offsetTop++}px`
		});
		if (this.offsetTop >= this.endTop) {
			this.status = "active";
			return;
		}
		setTimeout(() => {
			this.animationShow();
		}, 0);
	}
	// 简易向上消失动画
	animationHide() {
		this.view.setStyle({
			...this.viewStyle,
			top: `${this.offsetTop--}px`
		});
		if (this.offsetTop <= this.startTop) {
			this.view.close();
			this.hiding = false;
			this.status = "close";
			return;
		}
		setTimeout(() => {
			this.animationHide();
		}, 0);
	}
	// 获取当前状态
	getStatus() {
		return this.status;
	}
	// 不用动画，直接消失
	hide() {
		this.view.hide();
		this.view.close();
	}
}

// 对外暴露一个创建实例的方法
export function createAlarm(item, cb) {
	return new NativeMsg(item, cb);
}

简单描述过程

createAlarm 方法创建并返回一个 NativeMsg 的实例。

NativeMsg 类创建弹窗过程：

生成Bitmap 背景图片对象，并加载。方法： loadBg （异步）
在加载完成背景图片的回调里面创建弹窗区域以及把背景图画上去方法： create
区域和背景画好之后根据传递来的 item 画内容，以及绑定点击 click 事件和滑动 touch 事件。
1. 点击事件：
  1. 点击设置 this.hiding 状态为真，防止重复触发
  2. 执行回调 this.cb
  3. 关闭弹窗 animationHide 向上消失效果
2. 滑动事件
  1. touchstart 记录当前 this.clientY = res.clientY;
  2. touchmove 对比当前 clientY 与 this.clientY 之间距离，达到一定距离触发收起事件，和点击事件差不多，区别在于回调传递的 type 不同。
根据UI设计把内容话上去 drawInfo
以动画的方式显示弹窗 animationShow

使用

import { createAlarm } from "@/utils/nativeMsg";
// ...
// 接收到消息
function onReceived(data) {
		// #ifdef APP-PLUS
		// 调用
			showAlarmMsg(message);
		// #endif
}

// 定义一个全局变量保存 NativeMsg 实例
let alarmMsgInstance = null;
function showAlarmMsg(msg) {
	console.log(" ====> msg", msg);
	// #ifdef APP-PLUS
  //	业务需求只保留一个弹窗, 当存在的时候要干掉
	if (alarmMsgInstance &amp;&amp; alarmMsgInstance.getStatus() === "active") {
		let _oldIns = alarmMsgInstance;
		alarmMsgInstance = null;
  //延迟300 等新的弹窗出来后再消失，视觉上比较好看
		setTimeout(() => {
			_oldIns.hide();
		}, 300);
	}
	// 创建一个新的弹窗（新的会覆盖在旧的上面）
	alarmMsgInstance = createAlarm(item, res => {
		// 这里是点击或者滑动的回调 点击type是‘click’,滑动是‘move’
    // result 是传递过去的msg，原封不动的返回过来了。
		const { type, result } = res;
		if (type === "move") return;
		uni.navigateTo({
			url: `/pages/xxxxxx?id=${result.id}`
		});
	});
	// #endif
	// #ifndef APP-PLUS
	console.log(" ====> 收到消息", msg);
	// #endif
}