uniapp 悬浮窗-任意界面 Ba-FloatWinWeb

简介（下载地址）

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

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

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,//宽度 pxheight:128,//高度 pxxRatio: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背景色，默认透明}
                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},(res)=>{
                        console.log(res);
                        uni.showToast({title: res.msg,icon:"none",duration:3000})});},hideFW(tag){//隐藏
                floatWin.hide({tag: tag
                    },(res)=>{
                        console.log(res);
                        uni.showToast({title: res.msg,icon:"none",duration:3000})});},}

点击事件监听

在应用生命周期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事件类型，如：onClicktag悬浮窗标识，用于区分多个悬浮窗，可以不传json附加参数，可在html网页中自定义添加
示例：

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

网页配置

同时支持在线网页和本地网页。

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

如果用本地网页，文件放在项目根目录，“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网页示例（testFloatWin.html）

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><title>webview</title><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){onLoad()});functiononLoad(){let num1 =GetUrlParam("num1")let num2 =GetUrlParam("num2")let num3 =GetUrlParam("num3")let num4 =GetUrlParam("num4")if(num1)$("#num1").text(num1)if(num2)$("#num2").text(num2)if(num3)$("#num3").text(num3)if(num4)$("#num4").text(num4)}functiononClickFW(json){//点击事件
                Android.onClickFW(json);}//获取url参数functionGetUrlParam(paramName){let url =decodeURI(window.location.href);
                console.log(url)var arrObj = url.split("?");if(arrObj.length >1){var arrPara = arrObj[1].split("&");var arr;for(var i =0; i < arrPara.length; i++){
                        arr = arrPara[i].split("=");if(arr !=null&& arr[0]== paramName){return arr[1];}}return"";}else{return"";}}</script><style>body,
            html{height: 128px;width: 128px;margin: 0;padding: 0;overflow: hidden;}.container{display: flex;flex-direction: column;border-radius: 12px;width: 128px;height: 128px;background:rgba(0, 0, 50, 0.6);
                //box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.2);border-radius: 12px 12px 12px 12px;opacity: 1;}.row{display: flex;flex-direction: row;margin: 6px 6px 0px 6px;}.item{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 55px;height: 55px;background:rgba(255, 255, 255, 0.1);border-radius: 8px 8px 8px 8px;opacity: 1;}.name{text-align: center;width: 34px;height: 17px;font-size: 13px;font-weight: 500;color:rgba(255, 255, 255, 0.6);}.num{text-align: center;margin-top: 6px;width: 21px;height: 18px;font-size: 14px;font-weight: bold;color: #FFFFFF;}</style></head><bodystyle=" overflow:hidden"scroll="no"><divclass="container"><divclass="row"><divclass="item"onclick="onClickFW('item1')"><divclass="name">
                        采购
                    </div><divid="num1"class="num">
                        50
                    </div></div><divclass="item"onclick="onClickFW('item2')"style="margin-left: 6px;"><divclass="name">
                        售出
                    </div><divid="num2"class="num">
                        20
                    </div></div></div><divclass="row"><divclass="item"onclick="onClickFW('item3')"><divclass="name">
                        折损
                    </div><divid="num3"class="num">
                        3
                    </div></div><divclass="item"onclick="onClickFW('item4')"style="margin-left: 6px;"><divclass="name">
                        过期
                    </div><divid="num4"class="num">
                        0
                    </div></div></div></div></body></html>

api 列表

方法名说明show显示update更新数据hide隐藏

标签： uni-app 悬浮窗应用之上

本文转载自: https://blog.csdn.net/u013164293/article/details/132766478
版权归原作者 三杯五岳 所有，如有侵权，请联系我们删除。

uniapp 悬浮窗-任意界面 Ba-FloatWinWeb

简介（下载地址）

截图展示

使用方法

点击事件监听

点击事件参数

网页配置

html网页示例（testFloatWin.html）

api 列表

发表评论

“uniapp 悬浮窗-任意界面 Ba-FloatWinWeb”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航