更新记录

1.0.8(2024-11-18) 下载此版本

修复发布失败问题

1.0.7(2024-11-18) 下载此版本

新增uniapp发送数据到js

1.0.6(2024-10-25) 下载此版本

修复回调函数只接收一次问题

查看更多

平台兼容性

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 代码,相互交互

uniappx

    import {FloatWindow} from "@/uni_modules/android-floatwindow"
    var window:FloatWindow|null=null;

    window=new FloatWindow();
    window!.loadUrl("file:///android_asset/test.html");
    window!.setFixedWidthHeight(true,window!.convertHtmlPxToAndroidPx(300),window!.convertHtmlPxToAndroidPx(200))
    window!.setGravity(4)
    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=null;

    window=new FloatWindow();
    window.loadUrl("file:///android_asset/test.html");
    window.setFixedWidthHeight(true,window.convertHtmlPxToAndroidPx(300),window.convertHtmlPxToAndroidPx(200))
    window.setGravity(4)
    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">
    <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 高

设置位置 不可与setGravity共存

setLocation

参数1 number x 位置

参数2 number y 位置

设置是否超过状态栏

setImmersionStatusBar

参数1 boolean

设置对齐位置

setGravity

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

设置对齐位置

setGravityMore

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

参数2 number x 偏移

参数3 number y 偏移

设置是否可以拖动

setDragEnable

参数1 boolean

设置拖动范围

setBorder

参数1 number 左

参数2 number 上

参数3 number 右

参数1 number 下

创建并显示

createAndShow

取消

dismiss

显示

show

隐藏

hide

是否已经显示

isShow

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

updateWindow

设置显示方式

setShowPattern

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

设置滑动样式

setSidePattern

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

网页px 转换android px

convertHtmlPxToAndroidPx

return number androd px 参数1 number 网页px

检查是否有浮窗权限

checkPermission

return 是否有浮窗权限

网页数据传输到uniapp

onListenerWebData

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

申请浮窗权限

打赏

感谢您使用此插件,如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

微信

支付宝

许可协议

MIT协议

开发文档

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

隐私、权限声明

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

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

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

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

许可协议

MIT协议

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