uniapp类似微信来电的悬浮窗如何实现

“在uniapp中如何实现类似微信来电的悬浮窗功能？需要悬浮窗可以拖动，并且点击能返回应用。目前尝试过使用cover-view但无法全局显示，也测试过原生插件但兼容性较差。有没有成熟的解决方案或示例代码可以参考？最好能支持安卓和iOS双平台。”

2 回复

使用uni.createLivePusherContext创建推流悬浮窗，设置position:fixed并调整层级。通过plus.navigator.setFullscreen控制全屏显示，结合live-pusher组件实现悬浮窗效果。注意在manifest.json中配置悬浮窗权限。


在 UniApp 中实现类似微信来电的悬浮窗效果，可以通过以下步骤完成。主要思路是使用 plus.nativeObj.View 创建原生悬浮窗，并控制其显示、隐藏和交互。

实现步骤：

  1. 创建悬浮窗视图：使用 plus.nativeObj.View 定义悬浮窗的样式、位置和内容。
  2. 绑定触摸事件：实现拖动和点击事件（如接听、挂断）。
  3. 全局控制：在 onLaunch 或页面中监听来电状态，动态显示/隐藏悬浮窗。

示例代码（在 App.vue 或页面中）：

export default {
  onLaunch() {
    // 创建悬浮窗
    this.createFloatView();
  },
  methods: {
    createFloatView() {
      // 初始化悬浮窗
      const floatView = new plus.nativeObj.View('floatView', {
        top: '100px',
        left: '20px',
        width: '60px',
        height: '60px',
        backgroundColor: '#FF0000',
        borderRadius: '30px'
      });
      
      // 添加内容（例如图标或文字）
      floatView.drawText('来电', {}, { color: '#FFFFFF', size: '12px' });
      
      // 绑定拖动事件
      floatView.addEventListener('touchmove', (e) => {
        floatView.setStyle({
          left: e.target.offsetLeft + 'px',
          top: e.target.offsetTop + 'px'
        });
      });
      
      // 绑定点击事件（示例：点击关闭）
      floatView.addEventListener('click', () => {
        // 执行接听或挂断逻辑
        console.log('悬浮窗被点击');
        // 隐藏悬浮窗
        floatView.hide();
      });
      
      // 显示悬浮窗（可根据来电状态触发）
      floatView.show();
    }
  }
};

关键点：

  • 原生组件：仅支持 App 端（Android/iOS），H5 无法使用。
  • 权限配置：Android 需在 manifest.json 中添加悬浮窗权限：
    "permissions": {
  "NativeObj": {}
}
  • 交互逻辑：根据需求在点击事件中处理来电操作（如跳转页面或调用接口）。

注意事项：

  • 确保在 plusready 事件后执行代码，避免原生 API 未初始化。
  • 测试时注意悬浮窗可能被系统限制，需手动授权。

此方法能实现基本悬浮窗，可根据需求调整样式和事件逻辑。

回到顶部