更新记录

1.0.23（2025-05-14）

增加网页log 显回调显示

1.0.22（2025-04-03）

优化

1.0.21（2025-03-17）

优化

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.91，Android：4.4，iOS：不支持，HarmonyNext：不支持 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

android-floatwindow

长期维护，有任何问题在插件群联系

推荐作者保活插件一起使用

功能介绍

  1. 支持不申请权限时 当前app 全局页面弹窗 申请权限时 退出app 和app 时均显示
  2. 浮窗可以设置拖动
  3. 浮窗可以自定义大小 网页px 转换android px 使其大小对应
  4. h5 网页直接透传消息到uniapp 代码，相互交互

插件测试使用方法

  1. 选择试用，绑定要试用的项目appid，

  2. 选择后下载到对应的本地项目，

  3. 按照文档 -》把插件引入项目（即 import {FloatWindow} from "@/uni_modules/android-floatwindow" 需要先引入），

  4. 发布-》云打包-》选择制作基座-》打包等基座制作完成

  5. 运行 -》 运行到手机或模拟器-》运行到Androidapp基座-》选择使用自定义基座运行-》选择手机-》运行

测试请注意 内置网页需要每次打基座才能生效，测试时请用电脑添加网页映射，即 采用window.loadUrl("http://192.16.8.x.x:8080/test.html") 这种方式加载url 能够修改实时变化，不用每次打基座 uniappx

    import {FloatWindow} from "@/uni_modules/android-floatwindow"
    var window:FloatWindow=new FloatWindow();;

    window!.loadUrl("file:///android_asset/test.html");
    window!.setFixedWidthHeight(true,window!.convertHtmlPxToAndroidPx(300),window!.convertHtmlPxToAndroidPx(200))
    window!.setGravity(4)
     window.setShowPattern(3)
    window!.onListenerWebData(function(type:number,data:string){
        if(type==0){
            window!.dismiss();
        }

    })

    window!.createAndShow();// 首次显示   之后可以用 window!.show();  window!.hide();  原位置显示隐藏

    //window!.sendDataToJs(1,"hello uniapp");// uniapp 调用js 方法 dataFromUniapp 并传输数据

uniapp

    import {FloatWindow} from "@/uni_modules/android-floatwindow"
    var window=new FloatWindow();;

    window.loadUrl("file:///android_asset/test.html");
    window.setFixedWidthHeight(true,window.convertHtmlPxToAndroidPx(300),window.convertHtmlPxToAndroidPx(200))
    window.setGravity(4)
     window.setShowPattern(3)
    window.onListenerWebData(function(type,data){
        if(type==0){
            window.dismiss();
        }

    })
    window.createAndShow();// 首次显示   之后可以用 window!.show();  window!.hide();  原位置显示隐藏
    //window.sendDataToJs(1,"hello uniapp");// uniapp 调用js 方法 dataFromUniapp 并传输数据

h5 使用介绍

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>window</title>
</head>
<!-- 这里需要去掉边框  否则可能出现滑动 -->
<body style="margin: 0px;padding: 0px;" >
<div class="content">
    <div id="paragraph">
        这是一个浮窗h5
    </div>
    <div class="close_btn">
        <img  id="close" src="close.png" style="width: 30px;height: 30px;"/>
    </div>
</div>

<style>
    .content{
        background-color: green;
        border-radius: 10px;
        margin: 0px;
        padding: 0px;
        color: white;
        width: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
    }
    .close_btn{
        position: absolute;
        right: 10px;
        top: 10px;
    }

</style>

<script>

    // 为按钮添加点击事件监听器
    document.getElementById('close').addEventListener('click', function() {
        uniapp.sendDataToUni(0,"")
    });

    function dataFromUniapp(type,msg){
        console.log(type,msg);
          var paragraph = document.getElementById("paragraph");
          paragraph.textContent =type+ msg;
    }

</script>

</body>
</html>

api 介绍

设置是否固定宽高

setFixedWidthHeight

参数1 boolean 为true 时生效

参数2 number 宽

参数3 number 高

window.setFixedWidthHeight(true,window.convertHtmlPxToAndroidPx(300),window.convertHtmlPxToAndroidPx(200))

设置位置 不可与setGravity共存

setLocation

参数1 number x 位置

参数2 number y 位置

window.setLocation(window.convertHtmlPxToAndroidPx(300),window.convertHtmlPxToAndroidPx(300))

设置是否超过状态栏

setImmersionStatusBar

参数1 boolean 

window.setImmersionStatusBar(true)

设置对齐位置

setGravity

参数1 number 0-8 分别对应 上左 上中 上右 中左 中中 中右 下左 下中 下右

 window.setGravity(0)

设置对齐位置

setGravityMore

参数1 number 0-8 分别对应 上左 上中 上右 中左 中中 中右 下左 下中 下右

参数2 number x 偏移

参数3 number y 偏移

 window.setGravityMore(4,window.convertHtmlPxToAndroidPx(100),window.convertHtmlPxToAndroidPx(300))

设置是否可以拖动

setDragEnable

参数1 boolean 

 window.setDragEnable(true)

设置拖动范围

setBorder

参数1 number 左

参数2 number 上

参数3 number 右

参数1 number 下

 window.setBorder(0,0,100,100)

创建并显示

createAndShow

 window.createAndShow()

取消

dismiss

 window.dismiss()

显示

show

 window.show()

隐藏

hide

 window.hide()

是否已经显示

isShow

var show= window.isShow()

更新窗口内容(已经显示的窗口更新内容)

updateWindow

 window.updateWindow()

设置显示方式

setShowPattern

参数1 number 0当前应用显示（无需权限） 1 前台显示 2 后台显示 3 一直显示

 window.setShowPattern(3)

设置滑动样式

setSidePattern

参数1 number 0~14 效果自行测试

 window.setShowPattern(0)

网页px 转换android px

convertHtmlPxToAndroidPx

return number androd px 参数1 number 网页px

var b=  window.convertHtmlPxToAndroidPx(0)

检查是否有浮窗权限

checkPermission

return 是否有浮窗权限

 var b=  window.checkPermission()

网页数据传输到uniapp

onListenerWebData

参数1 为回调方法 回调 参数1 number 参数2 string uniapp

 window.onListenerWebData(function(res1,res2){

 })

uniappx

  window.onListenerWebData(function(res1:number,res2:number){

  })

销毁浮窗WebView

 window.destoyWebView();

申请浮窗权限

显示/隐藏一像素浮窗

showOnePxWindow;

window.showOnePxWindow(true);// 显示/隐藏浮窗

网页console 消息监听

uniappx

window!.onSetWebViewConsole(function(res:string){
    console.log(res);
})

uniapp

window.onSetWebViewConsole(function(res){
    console.log(res);
})

开发文档

UTS 语法 UTS API插件 UTS 组件插件 Hello UTS

隐私、权限声明

1. 本插件需要申请的系统权限列表：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...