uniapp 悬浮窗插件（在其他应用上层显示） Ba-FloatWindow

悬浮窗（在其他应用上层显示） Ba-FloatWindow

简介（下载地址）

Ba-FloatWindow 是一款在其他应用上层显示的悬浮窗插件。支持多种场景；支持拖动；支持多个。

• 支持自动定义起始位置
• 支持自定义悬浮窗大小
• 支持贴边显示
• 支持多种拖动方效果：不可拖动、任意拖动、贴边拖动、回弹拖动
• 支持显示多个悬浮窗（当然可以用多个悬浮窗，拼凑你想要的效果）
• 支持应用内不显示，应用外自动显示的经典场景（在app.vue中设置）
• 支持自定义某界面显示、不显示

截图展示

使用方法

在 script 中引入组件

	const floatWindow = uni.requireNativePlugin('Ba-FloatWindow')
1

在 script 中调用

		data() {
			return {
				widthRatio: 0.1,
				heightRatio: 0.1,
				xRatio: 0.8,
				yRatio: 0.8,
				moveType: 3,
				slideLeftMargin: 0,
				slideRightMargin: 0,
				duration: 500,
				desktopShow: true,
				tag: "",
				iconPath: "ba_float_win_icon"
			}
		},
		methods: {
			initIcon() { //初始化
				floatWindow.initIcon({
							widthRatio: this.widthRatio,
							heightRatio: this.heightRatio,
							xRatio: this.xRatio,
							yRatio: this.yRatio,
							moveType: this.moveType,
							slideLeftMargin: this.slideLeftMargin,
							slideRightMargin: this.slideRightMargin,
							duration: this.duration,
							desktopShow: this.desktopShow,
							tag: this.tag,
							iconPath: this.iconPath
						},
						(res) => {
							console.log(res);
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 3000
							})
						});
				},
			showIcon() { //显示
				floatWindow.showIcon({
						tag: this.tag
					},
					(res) => {
						console.log(res);
						if(res.code&&res.code==2){
							//点击事件
						}
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			hideIcon() { //隐藏
				floatWindow.hideIcon({
						tag: this.tag
					});
			},
		}
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

UI 图标设置

• 默认悬浮图标：默认悬浮图标设置，在项目的 “nativeplugins\Ba-FloatWindow\android\res\drawable-xxhdpi” 目录下（没有就新建），添加 “ba_float_win_icon.png” 图片文件即可。注意：更改后需要重新制作基座才能生效，建议提前配置。
• 自定义悬浮图标：自定义图标路径和默认一样，任意添加图片，名字在 initIcon方法的 “iconPath”字段设置即可。如添加自定义图片"custom_icon.png"，那么设置 iconPath 为 “custom_icon”

方法清单

点击事件

点击事件在showIcon方法中监听，参照“使用方法”

注意：如需在后台时也能点击调起，可在监听事件中调用如下方法：

			showIcon() { //展示
				let that = this;
				floatWindow.showIcon({
						tag: this.tag
					},
					(res) => {
						console.log(res);
						if (res.code && res.code == 2) {
							//点击事件
							that.toLaunch();
						}
					});
			},
			toLaunch() {//应用在后台时，可调起
				let platform = uni.getSystemInfoSync().platform;
				if (platform == 'android') {
					var main = plus.android.runtimeMainActivity();
					var Intent = plus.android.importClass("android.content.Intent");
					var intent = new Intent(Intent.ACTION_MAIN);
					intent.setClassName(main, "io.dcloud.PandoraEntry");
					intent.setFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
					//intent.putExtra("xxx", "111111");//携带参数（如要在调起后，需要执行后续逻辑，可在这里自定义参数，在app.vue的onShow事件中监听，如下）
					main.startActivity(intent);
				} 
			},
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

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

        onLaunch: function() {
			this.checkArguments();
			// 重点是以下： 一定要监听后台恢复 ！一定要   
			plus.globalEvent.addEventListener('newintent', (e) => {
				this.checkArguments(); // 检测启动参数  
			});
		},
		onShow: function() {
		},
		onHide: function() {
		},
		methods: {
			checkArguments() {
				var args = plus.runtime.arguments;
				if (args) {
					let args1 = JSON.parse(args);
					if (args1.xxx) { //自定义参数判断
						//这里写你的处理逻辑
					}
				}
			},
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

initIcon 方法参数

初始化悬浮窗

showIcon 方法参数

显示悬浮窗

hideIcon 方法参数

隐藏悬浮窗

系列插件

图片选择插件 Ba-MediaPicker （文档）

图片编辑插件 Ba-ImageEditor （文档）

文件选择插件 Ba-FilePicker （文档）

应用消息通知插件 Ba-Notify（文档）

应用未读角标插件 Ba-Shortcut-Badge （文档）

应用开机自启插件 Ba-Autoboot（文档）

扫码原生插件（毫秒级、支持多码）Ba-Scanner-G（文档）

扫码原生插件 - 新（可任意自定义界面版本；支持连续扫码；支持设置扫码格式）Ba-Scanner（文档）

动态修改状态栏、导航栏背景色、字体颜色插件 Ba-AppBar（文档）

原生sqlite本地数据库管理 Ba-Sqlite（文档）

安卓保活插件（采用多种主流技术） Ba-KeepAlive（文档）

安卓快捷方式（桌面长按app图标） Ba-Shortcut（文档）

自定义图片水印（任意位置） Ba-Watermark（文档）

最接近微信的图片压缩插件 Ba-ImageCompressor（文档）

视频压缩、视频剪辑插件 Ba-VideoCompressor（文档）

动态切换应用图标、名称（如新年、国庆等） Ba-ChangeIcon（文档）

原生Toast弹窗提示（穿透所有界面、穿透原生；自定义颜色、图标 ） Ba-Toast（文档）

图片涂鸦、画笔 Ba-ImagePaint（文档）

pdf阅读（手势缩放、显示页数） Ba-Pdf（文档）

声音提示、震动提示、语音播报 Ba-Beep（文档）

websocket原生服务（自动重连、心跳检测） Ba-Websocket（文档）