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

简介（下载地址）

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

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

截图展示

请添加图片描述

使用方法

在 script 中引入组件

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

在 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背景色，默认透明
				}
				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
						})
					});
			},
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

点击事件监听

在应用生命周期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() {
		}
1
2
3
4
5
6
7
8
9
10
11

点击事件参数

属性名	说明
action	事件类型，如：onClick
tag	悬浮窗标识，用于区分多个悬浮窗，可以不传
json	附加参数，可在html网页中自定义添加

示例：

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

网页配置

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

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

如果用本地网页，文件放在项目根目录，“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  
1
2
3
4
5
6
7
8
9
10
11

webUrl参数，传入地址的格式为：“file:///android_asset/”+html文件名称

html网页示例（testFloatWin.html）

DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>webviewtitle>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
		<script>
			$(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 < 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>

	<body style=" overflow:hidden" scroll="no">
		<div class="container">
			<div class="row">
				<div class="item" onclick="onClickFW('item1')">
					<div class="name">
						采购
					div>
					<div id="num1" class="num">
						50
					div>
				div>
				<div class="item" onclick="onClickFW('item2')" style="margin-left: 6px;">
					<div class="name">
						售出
					div>
					<div id="num2" class="num">
						20
					div>
				div>
			div>
			<div class="row">
				<div class="item" onclick="onClickFW('item3')">
					<div class="name">
						折损
					div>
					<div id="num3" class="num">
						3
					div>
				div>
				<div class="item" onclick="onClickFW('item4')" style="margin-left: 6px;">
					<div class="name">
						过期
					div>
					<div id="num4" class="num">
						0
					div>
				div>
			div>
		div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

api 列表

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

相关阅读:
雷达实测数据的信噪比
 Unity中使用VS常用技巧
 使用aop拦截自定义注解
 Unity如何查找两个transform最近的公共parent
SAP-ABAP-RFC类型接口创建步骤
 2023最新SSM计算机毕业设计选题大全（附源码+LW）之java宠物领养系统0bf10
英国访问学者|签证申请详细步骤简述
 观察者模式 & 发布-订阅模式（设计模式与开发实践 P8）
有趣的 TCP 抢带宽行为
 代码随想录算法训练营第六天 | 哈希表算法题
原文地址：https://blog.csdn.net/u013164293/article/details/132766478