更新记录

1.0.11（2026-06-03）

修复问题

1.0.1（2026-06-03）

修复问题

1.0.0（2026-06-03）

• 首发版本
• 支持 Android 悬浮窗显示/隐藏/拖拽
• 支持自定义样式、文字、颜色、透明度
• 支持 HTML 渲染与 URL 加载
• 支持点击回调（JavaScript Bridge）
• 支持 iOS 平台（WKWebView + UIWindow）
• 支持 鸿蒙 平台（sub-window + WebViewController）
• 支持 H5 平台（DOM + fixed 定位）
• 支持 微信小程序 平台（movable-view + cover-view）

平台兼容性

uni-app(5.07)

uni-app x(5.07)

floating-window

简介

跨平台悬浮窗插件，支持在应用上层显示可拖拽的悬浮窗。

平台支持

功能

• 显示/隐藏悬浮窗
• 拖拽移动位置
• 自定义 HTML 内容
• 加载 URL 网页
• 自定义颜色、大小、透明度、圆角
• 点击回调（JavaScript Bridge）
• 权限检查与请求（Android）

使用方式

import {
    hasOverlayPermission,
    requestOverlayPermission,
    showFloatHtml,
    showFloatUrl,
    closeFloat,
    onFloatMessage
} from "@/uni_modules/floating-window";

// 检查权限（仅 Android 需要）
if (!hasOverlayPermission()) {
    requestOverlayPermission()
    return
}

// 显示 HTML 悬浮窗
showFloatHtml(
    '<div style="padding:16px;background:#0078d4;color:white;border-radius:12px;">悬浮窗</div>',
    true,  // 可拖拽
    100,   // X
    200    // Y
)

// 监听消息
onFloatMessage((msg: string) => {
    console.log("收到消息:", msg)
})

// 关闭
closeFloat()

小程序额外说明

微信小程序版本需要在页面模板中添加组件：

<template>
    <view>
        <!-- 页面内容 -->
        <uts-float-window />
    </view>
</template>

<script>
    import utsFloatWindow from "@/uni_modules/floating-window/components/uts-float-window/uts-float-window.vue"
    export default {
        components: { utsFloatWindow }
    }
</script>