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

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

简介（下载地址）

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

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

截图展示

使用方法

在 script 中引入组件

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

在 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
					});
			},
		}

UI 图标设置

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

方法清单

名称	说明
initIcon	初始化悬浮窗
showIcon	显示悬浮窗
hideIcon	隐藏悬浮窗

点击事件

点击事件在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);
				} 
			},

在应用生命周期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) { //自定义参数判断
						//这里写你的处理逻辑
					}
				}
			},
		}

initIcon 方法参数

初始化悬浮窗

属性名	类型	必填	默认值	说明
widthRatio	Number	false	0.15	根据屏幕宽度比例，设置悬浮窗宽度
heightRatio	Number	false	0.15	根据屏幕宽度比例，设置悬浮窗高度
xRatio	Number	false	0.8	根据屏幕宽度比例，设置悬浮窗x轴起始位置
yRatio	Number	false	0.8	根据屏幕高度比例，设置悬浮窗y轴起始位置
moveType	Number	false	3	拖动效果，1：不可拖动、2：任意拖动、3：贴边拖动、4：回弹拖动
slideLeftMargin	Number	false	0	左侧贴边位置，支持负数
slideRightMargin	Number	false	0	右侧贴边位置，支持负数
duration	Number	false	500	间隔时间ms
tag	String	false	‘default_float_window_tag’	为该弹窗设置标识，以做区分，用于多个
iconPath	String	false		资源图片项目路径，参照’UI 图标设置’

showIcon 方法参数

显示悬浮窗

属性名	类型	必填	默认值	说明
tag	String	false	‘default_float_window_tag’	为该弹窗设置标识，以做区分，用于多个

hideIcon 方法参数

隐藏悬浮窗

属性名	类型	必填	默认值	说明
tag	String	false	‘default_float_window_tag’	为该弹窗设置标识，以做区分，用于多个

系列插件

图片选择插件 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（文档）