更新记录

1.0.3（2025-11-13）

• 浮窗关闭按钮支持动态显示
• 增加外部调用关闭浮窗的方法

1.0.2（2025-11-10）

• 补充webview网页加载
• 补充文档内容

1.0.1（2025-11-10）

• 修复在uniapp项目中运行报错的问题

平台兼容性

uni-app(4.76)

uni-app x(4.76)

安卓端 悬浮窗

开发文档

功能点

• 支持拖动
• 支持窗口关闭
• 支持应用外显示
• .....

方法调用参数设置

• type 类型 0-自定义内容，1-webview加载
• content 内容
• title 标题
• floatX 用坐标点控制位置
• floatY 用坐标点控制位置
• textSize 文本内容字号
• titleSize 标题内容字号
• textColor 文本内容颜色
• pdT 上内边距 type=0 生效
• pdR 右内边距 type=0 生效
• pdB 下内边距 type=0 生效
• pdL 左内边距 type=0 生效
• wBackground 窗口背景色 type=0 生效
• radius 圆角大小 type=0 生效
• LayoutWidth 窗口口宽度
• LayoutHeight 窗口高度
• outsideShow 是否在应用外显示
• webUrl 网页链接，type类型为1，且需要展示网页时传入
• showCloseIcon 浮窗上的关闭图标
• layoutFinish layout视图加载完成回调

uniapp项目代码示例

<template>
    <view>
        <button id="btns" class="btn" type="primary" @click="openFloatW">显示悬浮窗</button>
        <button id="btns" class="btn" type="primary" style="margin-top: 10px;" @click="clearFloatW">关闭悬浮窗</button>
    </view>
</template>

<script setup>
    import { showFloatW,closeFloatW } from '@/uni_modules/xwq-floating-w';

    const openFloatW=()=>{

        let params={ 
            type:'0',//类型：0-内容显示   1-webview显示  2-加载一张图片并设置成圆形
            title: "悬浮窗标题悬浮窗标题悬浮窗标题悬浮窗标题悬浮窗标题", //标题
            content: "悬浮窗的内容悬浮窗的内容悬浮窗的内容悬浮窗的内容悬浮窗的内容" ,//内容显示，type为0生效
            floatX:80,//悬浮窗的X坐标位置，基于屏幕像素点自动转换
            floatY:150,//悬浮窗的Y坐标位置，基于屏幕像素点自动转换
            textSize:20,//内容字号大小
            titleSize:16,//标题字号大小
            textColor:"#ffff00",//内容颜色
            outsideShow:false,//应用切回后台，是否显示悬浮窗
            showCloseIcon:true, //浮窗上的关闭图标
            layoutFinish:()=>{
                console.log('view视图加载完成')
            }
        };
        showFloatW(params);
    };

    const clearFloatW=()=>{
        closeFloatW()
    }

</script>

uniappX项目代码示例

<template>
    <view>
        <button id="btns" class="btn" type="primary" @click="openFloatW">显示悬浮窗</button>
        <button id="btns" class="btn" type="primary" style="margin-top: 10px;" @click="clearFloatW">关闭悬浮窗</button>
    </view>
</template>

<script setup>
    import { showFloatW } from '@/uni_modules/xwq-floating-w';
    import {InitOption} from '@/uni_modules/xwq-floating-w/utssdk/interface.uts';

    const openFloatW=()=>{

        let params={ 
            type:'0',//类型：0-内容显示   1-webview显示  2-加载一张图片并设置成圆形
            title: "悬浮窗标题悬浮窗标题悬浮窗标题悬浮窗标题悬浮窗标题", //标题
            content: "悬浮窗的内容悬浮窗的内容悬浮窗的内容悬浮窗的内容悬浮窗的内容" ,//内容显示，type为0生效
            floatX:80,//悬浮窗的X坐标位置，基于屏幕像素点自动转换
            floatY:150,//悬浮窗的Y坐标位置，基于屏幕像素点自动转换
            textSize:20,//内容字号大小
            titleSize:16,//标题字号大小
            textColor:"#ffff00",//内容颜色
            outsideShow:false,//应用切回后台，是否显示悬浮窗
            layoutFinish:()=>{
                console.log('view视图加载完成')
            }
        } as InitOption;
        showFloatW(params);
    };

    const clearFloatW=()=>{
        closeFloatW()
    }

</script>