更新记录

1.7（2024-03-28）

支持单独更新数据（不重新加载界面），updateData方法

1.6（2023-12-14）

支持编辑输入（enableEdit、disableEdit）

1.5（2023-12-04）

支持全屏，沉浸到状态栏

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

悬浮窗-任意界面 Ba-FloatWinWeb

简介

Ba-FloatWinWeb 是一款支持自定义任意界面的悬浮窗插件。采用webview方式，同时支持本地、网络地址；自带几种界面，可直接使用。

• 支持显示、更新、隐藏
• 支持记录显示位置
• 支持拖动
• 支持监听点击事件
• 支持自动申请、判断悬浮窗权限
• 支持手动申请、判断悬浮窗权限
• 支持同时设置多个悬浮窗，并且可以不同样式
• 自带几种界面，可直接使用（见效果图）
• 支持获取剪切板内容
• 支持编辑输入
• 支持全屏

有建议和需要，请联系QQ：2579546054

也可关注博客，实时更新最新插件：

uniapp 常用原生插件大全

使用方法

在 script 中引入组件

    const floatWin = uni.requireNativePlugin('Ba-FloatWinWeb')

在 script 中调用（示例参考，可根据自己业务和调用方法自行修改）

        methods: {
            showFW(tag) { //显示
                let params = {
                    //isToast: true,
                    //tag: tag,//悬浮窗标识，用于区分多个悬浮窗，可以不传
                    webUrl: "file:///android_asset/testFloatWin.html",//网页地址
                    width:128,//宽度 px
                    height: 128,//高度 px
                    xRatio: 0.8,//x轴偏移量（屏幕宽度比例）
                    yRatio: 0.7,//y轴偏移量（屏幕高度比例）
                    //moveType: 1,//拖动方式：1：不可拖动 2：任意拖动、3：贴边拖动。默认2
                    //isRememberXY: false,//是否记住上次的位置。默认true
                    //isPermission: false,//是否申请悬浮窗权限。默认true
                    //widthRatio:1,//宽度（屏幕宽度比例），width有值时无效
                    //heightRatio: 0.3,//高度（屏幕高度比例），height有值时无效
                    //webviewBgColor:"#FFFFFF"//webview背景色，默认透明
                    //isStartApp:true//点击悬浮窗，是否打开App，默认true
                    //fullscreen:true//是否全屏，沉浸到状态栏，默认false（注意heightRatio和widthRatio设置为1）
                }
                floatWin.show(params,
                    (res) => {
                        console.log(res);
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 3000
                        })
                    });
            },
            updateFW(tag) { //更新数据
                let webUrl ="file:///android_asset/testFloatWin.html?num1=66&num2=21"
                floatWin.update({
                        webUrl: webUrl,
                        //tag: tag,
                        //width:128,//宽度 px
                        //height: 128,//高度 px
                        //xRatio: 0.8,//x轴偏移量（屏幕宽度比例）
                        //yRatio: 0.7,//y轴偏移量（屏幕高度比例）
                        //moveType: 1,//拖动方式：1：不可拖动 2：任意拖动、3：贴边拖动。默认2
                    },
                    (res) => {
                        console.log(res);
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 3000
                        })
                    });
            },
            updateDataFW(tag) { //更新数据（不刷新界面）
                floatWin.updateData({
                        data: "33",//复杂的可以传json，自行解析
                        tag: tag
                    },
                    (res) => {
                        console.log(res);//结果返回数据在res.data，可自行定义（在html中，参照下文“updateData 数据更新监听”）
                    });
            },
            hideFW(tag) { //隐藏
                floatWin.hide({
                        tag: tag
                    },
                    (res) => {
                        console.log(res);
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 3000
                        })
                    });
            },
            permissionFW() { //申请悬浮窗权限
                floatWin.permission(
                    (res) => {
                        console.log(res);
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 3000
                        })
                    });
            },
            goPermissionFW() { //跳转到悬浮窗权限页面
                floatWin.goPermission(
                    (res) => {
                        console.log(res);
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 3000
                        })
                    });
            },
            isPermissionFW() { //是否申请悬浮窗权限
                floatWin.isPermission(
                    (res) => {
                        console.log(res);
                        let msg = res.msg;
                        if (res.data) {
                            msg = "isPermission:" + res.data.isPermission;
                        }
                        uni.showToast({
                            title: msg,
                            icon: "none",
                            duration: 3000
                        })
                    });
            },
        }

updateData 数据更新监听

在html文件中，监听数据更新

        function updateData(data) { //监听数据更新
            //这里写，你的数据处理逻辑
            return "更新成功"//返回结果到uniapp（res.data）
        }

点击事件监听

在应用生命周期app.vue的onLaunch事件中设置监听：

        onLaunch: function() {
            var globalEvent = uni.requireNativePlugin('globalEvent');
            globalEvent.addEventListener('baFloatWinWeb', function(e) {
                console.log('baFloatWinWeb：' + JSON.stringify(e));
                //处理点击事件
            });
        },
        onShow: function() {
        },
        onHide: function() {
        }

点击事件参数

示例：

{"action":"onClick","json":{"msg":"点击了item1"},"tag":"menu"}

网页配置

同时支持在线网页和本地网页，新增支持uniapp网页。

如果用在线网页，直接传地址即可；

如果是uniapp网页，位置放在uniapp项目的static目录下，配置如下：

├── static 
  ├── testFloatWin.html
  ├── ba_float_win_icon.png
  ├── ba_float_win_logo.png

uniapp网页的参数传值方式为：

     let webUrl = "file://" + plus.io.convertLocalFileSystemURL('_www/static/testFloatWin.html');
     //传入 webUrl

如果用本地网页，文件放在项目根目录，“nativeplugins/Ba-FloatWinWeb/android/assets/”目录下，没有就新建，配置如下（demo）：

├── nativeplugins 
  ├── Ba-FloatWinWeb
    ├── android                  
      ├── assets
        ├── static
          ├── ba_float_win_icon.png
          ├── ba_float_win_logo.png
        ├── testFloatWin.html
        ├── testFloatWin2.html 
        ├── testFloatWin3.html 
        ├── testFloatWin4.html  

本地网页webUrl参数，传入地址的格式为："file:///android_asset/"+html文件名称

html中的api

html网页示例（testFloatWin.html）

点击这里，可以看到示例（在“html网页示例”处）

或者下载插件页上传的demo，可以看到更多的示例

api 列表