如何在Ionic 3（Cordova）中实现类似WhatsApp的全局置顶弹窗

嘿，刚好我之前在Ionic 3 + Cordova项目里实现过类似WhatsApp的悬浮弹窗，核心就是利用Android的SYSTEM_ALERT_WINDOW权限，搭配对应的Cordova插件来完成，给你一步步梳理下：

1. 安装适配的Cordova插件 #

首先得装一个支持系统级悬浮窗的Cordova插件，最常用的是cordova-plugin-system-alert-window，终端里执行安装命令：

cordova plugin add cordova-plugin-system-alert-window

2. 处理Android权限申请 #

Android 6.0+对SYSTEM_ALERT_WINDOW权限管控特殊，不能通过普通动态权限流程申请，得引导用户去系统设置里手动开启。你可以在Ionic代码里先检查权限状态：

import { Platform } from 'ionic-angular';

constructor(private platform: Platform) {}

checkOverlayPermission() {
  if (this.platform.is('android')) {
    // 调用插件的权限检查方法
    (<any>window).SystemAlertWindow.checkPermission((granted: boolean) => {
      if (!granted) {
        // 跳转到系统设置页面让用户开启权限
        (<any>window).SystemAlertWindow.openSettings();
      }
    });
  }
}

3. 创建并显示自定义悬浮弹窗 #

权限搞定后，就可以自定义类似WhatsApp的弹窗样式，通过插件加载显示。比如做一个消息提示弹窗：

showFloatingChatPopup() {
  if (this.platform.is('android')) {
    // 自定义弹窗的HTML结构，模拟WhatsApp的消息卡片
    const popupHtml = `
      <div style="width: 320px; height: 130px; background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.25);">
        <div style="font-weight: 600; font-size: 16px; margin-bottom: 8px;">Lisa Miller</div>
        <div style="color: #555; font-size: 14px; line-height: 1.4;">Hey, wanna grab coffee this weekend?</div>
        <div onclick="window.openChatConversation()" style="margin-top: 12px; color: #25D366; font-size: 13px; text-align: right;">回复</div>
      </div>
    `;

    // 调用插件显示弹窗
    (<any>window).SystemAlertWindow.show({
      html: popupHtml,
      width: 320,
      height: 130,
      x: 20, // 距离屏幕左边缘像素
      y: window.screen.height - 220, // 弹窗定位在屏幕底部附近
      flags: {
        focusable: true, // 允许弹窗获取焦点
        touchable: true // 允许触摸交互
      }
    }, () => {
      console.log('悬浮弹窗显示成功');
    }, (error: string) => {
      console.error('弹窗显示失败:', error);
    });
  }
}

4. 处理弹窗交互逻辑 #

如果要给弹窗里的元素加点击事件（比如点击打开聊天页面），可以在HTML里绑定全局方法，然后在Ionic组件里注册这个方法：

ionViewDidLoad() {
  if (this.platform.is('android')) {
    // 注册全局方法供弹窗调用
    (window as any).openChatConversation = () => {
      // 先关闭悬浮弹窗
      (<any>window).SystemAlertWindow.hide();
      // 跳转到对应的聊天页面
      this.navCtrl.push(ChatDetailPage, { userId: 'lisa_miller' });
    };
  }
}

5. 隐藏弹窗 #

当不需要弹窗时，调用插件的隐藏方法即可：

hideFloatingPopup() {
  if (this.platform.is('android')) {
    (<any>window).SystemAlertWindow.hide();
  }
}

• 这个方案仅支持Android平台，iOS因为系统权限限制，无法实现类似的全局悬浮弹窗。
• Android 10及以上版本对悬浮窗权限管控更严格，测试时要确保用户已经在设置里开启了“显示在其他应用上层”权限。
• 弹窗的样式建议用内联CSS，因为弹窗是独立于Ionic WebView的，无法直接引用项目的全局样式文件。

内容的提问来源于stack exchange，提问作者sumanta.k