uniapp 悬浮窗(悬浮球动态菜单在其他应用上层显示) Ba-FloatBall

Posted 三杯五岳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp 悬浮窗(悬浮球动态菜单在其他应用上层显示) Ba-FloatBall相关的知识,希望对你有一定的参考价值。

简介(下载地址

Ba-FloatBall 是一款在其他应用上层显示的悬浮球插件。支持展示菜单、拖动、自动贴边等;支持自定义样式。

  • 支持添加展示菜单,可自定义(不添加菜单,可只显示悬浮球)
  • 支持自定义悬浮窗大小
  • 支持拖动、贴边显示
  • 支持自定义起始位置、保存上次位置

截图展示

使用方法

script 中引入组件

	const floatBall = uni.requireNativePlugin('Ba-FloatBall')

script 中调用

		data() 
			return 
				ballSize: 0.12,
				menuSize: 0.5,
				menuItemSize: 0.1,
				ballIcon: "floatball_icon",
			
		,
		methods: 
			initFW() //初始化
				floatBall.init(
						ballSize: this.ballSize,//悬浮球大小
						menuSize: this.menuSize,//悬浮球菜单范围大小
						menuItemSize: this.menuItemSize,//菜单项大小
						ballIcon: this.ballIcon,//悬浮球图片
						ballMenus: [
							icon: 'ic_weibo',//菜单项图片
							tag: 'weibo'//菜单项标识
						, 
							icon: 'ic_weixin',
							tag: 'weixin'
						, 
							icon: 'ic_email',
							tag: 'email'
						, 
							icon: 'ic_qq',
							tag: 'qq'
						, 
							icon: 'ic_weixin',
							tag: 'weixin'
						]
					,
					(res) => 
						console.log(res);
						uni.showToast(
							title: res.msg,
							icon: "none",
							duration: 3000
						)
					);
			,
			showFW() //展示
				floatBall.show((res) => 
					console.log(res);
					uni.showToast(
						title: res.msg,
						icon: "none",
						duration: 3000
					)
				);
			,
			hideFW() //隐藏
				floatBall.hide(
					(res) => 
						console.log(res);
						uni.showToast(
							title: res.msg,
							icon: "none",
							duration: 3000
						)
					);
			,
		

悬浮球样式设置

注意:资源配置更改后,需要重新制作基座才生效,建议提前配置。

注意图片资源为png格式

  • 悬浮球样式:悬浮球图标设置,在项目的 “nativeplugins\\Ba-FloatBall\\android\\assets\\baFloatBall” 目录下(没有就新建),添加 “floatball_icon.png” 图片文件即可。如果是其他名称,请在init方法的ballIcon参数传值,只设置名称,不带扩展名。

  • 自定义展开菜单:菜单的图标路径和悬浮球一样,可任意添加图片,支持多个。

    添加资源后,在 init 方法的 ballMenus 数组参数中配置,如下:

                ballMenus: [
				    icon: 'ic_weibo',//菜单项图片
					tag: 'weibo'//菜单项标识
				, 
					icon: 'ic_weixin',
					tag: 'weixin'
				, 
					icon: 'ic_email',
					tag: 'email'
				]

方法清单

名称说明
show初始化
show显示
hide隐藏

监听点击事件

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

        onLaunch: function() 
			var globalEvent = uni.requireNativePlugin('globalEvent');
			globalEvent.addEventListener('baFloatBallEvent', function(e) 
				console.log('baFloatBallEvent:' + JSON.stringify(e));
				//这里写你的处理逻辑
				//点击哪一项,根据菜单设置的tag区分,悬浮球tag为“FloatBall”
			);
		,
		onShow: function() 
		,
		onHide: function() 
		

init 方法参数

初始化悬浮球

属性名类型必填默认值说明
ballSizeNumberfalse0.12根据屏幕宽度比例,设置悬浮球大小
menuSizeNumberfalse0.5根据屏幕宽度比例,设置菜单区域范大小
menuItemSizeNumberfalse0.1根据屏幕宽度比例,设置菜单项大小
ballIconStringfalse‘floatball_icon’悬浮球图片资源名称,参照’悬浮球样式设置’
ballMenusArrayfalse悬浮球菜单配置,可多个
ballMenus 参数
属性名类型必填默认值说明
iconStringtrue图片资源名称,参照’悬浮球样式设置’
tagStringtrue菜单标识,用于区分点击事件

系列插件

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

短信监听(验证码) Ba-Sms文档

智能安装(自动升级) Ba-SmartUpgrade文档

监听系统广播、自定义广播 Ba-Broadcast文档

监听通知栏消息(支持白名单、黑名单、过滤) Ba-NotifyListener文档

全局置灰、哀悼置灰(可动态、同时支持nvue、vue) Ba-Gray文档

获取设备唯一标识(OAID、AAID、IMEI等) Ba-IdCode文档

实时定位(系统、后台运行、支持息屏)插件 Ba-Location文档

实时定位(高德、后台运行、支持息屏、坐标转换、距离计算) Ba-LocationAMap文档

窗口小工具、桌面小部件、微件 Ba-AppWidget文档

窗口小工具、桌面小部件、微件(日历、时间) Ba-AwCalendarS文档

画中画悬浮窗(视频) Ba-VideoPip文档

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

悬浮窗(应用内、无需授权) Ba-FloatWindow2文档

悬浮窗(悬浮球、动态菜单、在其他应用上层显示) Ba-FloatBall文档

以上是关于uniapp 悬浮窗(悬浮球动态菜单在其他应用上层显示) Ba-FloatBall的主要内容,如果未能解决你的问题,请参考以下文章

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

uniapp 悬浮窗(应用内无需授权) Ba-FloatWindow2

uniapp 画中画悬浮窗(视频) Ba-VideoPip

uniapp 画中画悬浮窗(视频) Ba-VideoPip

Android 悬浮窗悬浮球开发

华为p50pro的悬浮窗怎么使用?