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

最新推荐文章于 2024-04-27 13:01:21 发布

三杯五岳

最新推荐文章于 2024-04-27 13:01:21 发布

阅读量2.8k

点赞数

分类专栏： uni-app 文章标签： uni-app 悬浮球悬浮窗动态菜单应用之上

本文链接：https://blog.csdn.net/u013164293/article/details/129171105

版权

uni-app 专栏收录该内容

53 篇文章 23 订阅

订阅专栏

简介（下载地址）

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 方法参数

初始化悬浮球

属性名	类型	必填	默认值	说明
ballSize	Number	false	0.12	根据屏幕宽度比例，设置悬浮球大小
menuSize	Number	false	0.5	根据屏幕宽度比例，设置菜单区域范大小
menuItemSize	Number	false	0.1	根据屏幕宽度比例，设置菜单项大小
ballIcon	String	false	‘floatball_icon’	悬浮球图片资源名称，参照’悬浮球样式设置’
ballMenus	Array	false		悬浮球菜单配置，可多个