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	事件类型，如：onClick
  tag	悬浮窗标识，用于区分多个悬浮窗，可以不传
  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）

  webview$(document).ready(function() {onLoad()});function onLoad() {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)}function onClickFW(json) { //点击事件Android.onClickFW(json);}//获取url参数function GetUrlParam(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 采购50售出20折损3过期0

  api 列表

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