悬浮窗(在其他应用上层显示) Ba-FloatWindow

简介(下载地址

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

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

截图展示

android 在其他应用的上层显示 在其他app上层显示_前端

使用方法

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’

为该弹窗设置标识,以做区分,用于多个