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

news2024/11/25 10:57:07

简介(下载地址)

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(文档)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/365369.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一口吃不成ChatGPT,复旦版MOSS服务器被挤崩后续

ChatGPT 是目前最先进的 AI,由于 ChatGPT 的训练过程所需算力资源大、标注成本高,此前国内暂未出现对大众开放的同类产品。 适逢ChatGPT概念正火,2 月 21 日,复旦团队发布首个中国版类 ChatGPT 模型「MOSS」,没想到瞬时…

Python-生成列表

1.生成列表使用列表前必须先生成列表。1.1使用运算符[ ]生成列表在运算符[ ]中以逗号隔开各个元素会生成包含这些元素的新列表。另外,如果[ ]中没有元素就会生成空列表示例>>> list01 [] >>> list01 [] >>> list02 [1, 2, 3] >>…

云、安全、网络三位一体,Akamai 推出大规模分布式边缘和云平台 Akamai Connected Cloud

出品 | CSDN 云计算 云服务市场规模在持续增长。 基于网络技术积累与优势,与布局边缘计算之后,巨头 Akamai 在继续推进它的技术与产品进程。近日,Akamai 正式推出大规模分布式边缘和云平台 Akamai Connected Cloud,包含云计算、安…

软考学习笔记(题目知识记录)

答案为 概要设计阶段 本题涉及软件工程的概念 软件工程的任务是基于需求分析的结果建立各种设计模型,给出问题的解决方案 软件设计可以分为两个阶段: 概要设计阶段和详细设计阶段 结构化设计方法中,概要设计阶段进行软件体系结构的设计&…

学生管理系统-课后程序(JAVA基础案例教程-黑马程序员编著-第六章-课后作业)

【案例6-2】 学生管理系统 【案例介绍】 1.任务描述 在一所学校中,对学生人员流动的管理是很麻烦的,本案例要求编写一个学生管理系统,实现对学生信息的添加、删除、修改和查询功能。每个功能的具体要求如下: 系统的首页&#…

视频技术基础知识

一、视频图像基础 像素:图像的基本单元,即一个带有颜色的小块分辨率:图像的大小或尺寸,用像素个数来表示。原始图像分辨率越高,图像就越清晰位深:存储每位像素需要的二进制位数;位深越大&#…

JAVA线程入门简介

线程入门简介什么是程序?什么是进程?什么是线程?单线程与多线程并发与并行线程的使用用java查看有多少个cpu创建线程的两种方式继承Thread类,重写run方法实现Runnable接口,重写run方法多线程机制为社么是start?源码解析什么是程序? 是为完…

防错料使用二维码解决方案 生产过程物料防错管理

生产过程中,物料的防错管理是非常重要的一环。它能够有效地防止物料错用或混用,从而降低产品质量问题的发生率,减少生产成本和生产周期,提高生产效率和产品质量。以下是生产过程物料防错管理的具体措施:1.明确物料标识…

SpringBoot Data Redis来操作Redis

SpringBoot Data Redis来操作Redis1、Redis启动Redis主要的作用安装的位置启动2、Java中来操作Redis3、Spring Data Redis(重点)测试连接配置Redis序列化器redisTemplate操作常见数据类型通用操作,针对不同的数据类型都可以操作申明: 未经许可&#xff0…

浅谈Springboot自动化配置原理

文章目录1.前言2.SpringBoot的入口3.SpringBootApplication背后的秘密4.Configuration5.ComponentScan扫描bean6.EnableAutoConfiguration7.自动配置生效1.前言 不论在工作中,亦或是求职面试,Spring Boot已经成为我们必知必会的技能项。除了某些老旧的政…

java面试题-JUC线程池

1.FutureTask的作用?FutureTask 是 Java 并发编程中的一个类,用于异步执行任务并获取其结果。它实现了 Future 和 Runnable 接口,因此可以作为一个可运行的任务提交给 Executor 执行,也可以通过 Future 接口获取任务执行的结果。FutureTask …

2023年DAMA-CDGA/CDGP数据治理认证选择哪家机构好?

DAMA认证为数据管理专业人士提供职业目标晋升规划,彰显了职业发展里程碑及发展阶梯定义,帮助数据管理从业人士获得企业数字化转型战略下的必备职业能力,促进开展工作实践应用及实际问题解决,形成企业所需的新数字经济下的核心职业…

将整数数组变为浮点型数组的np.asfarray()方法

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 将整数数组转换为浮点型数组 np.asfarray() 选择题 关于以下代码说法错误的一项是? import numpy as np a1 np.array([1,2,3]) print("【显示】a1",a1) print("【执行】a…

网络工程(一) 简单的配置

网络工程 简单的配置 需求 两台交换机 两台路由器 两台PC AR1配置静态路由 system-view [HUAWEI]sysname ar1 [ar1]interface g 0/0/0 [ar1-G…0/0/0]ip address 192.168.2.1 24 [ar1-G…0/0/0]quit [ar1]interface g 0/0/1 [ar1-G…0/0/1]ip address 192.168.3.1 24 [ar1-G…

关于学习git时的一些疑惑与笔记

关于学习git时的一些疑惑与笔记SSH相关问题SSH是什么?SSH有什么作用?如何在github配置SSH?分支什么是本地分支,远程分支?main主分支与master主支?为什么要把master分支修改为main分支?什么时候用分支&…

Java线程——常见方法

一、 常见方法 1.1 概述 ① start_vs_run:直接调用run方法并不会启动新的线程 import cn.itcast.n2.util.FileReader; import lombok.extern.slf4j.Slf4j;Slf4j(topic "c.Test") public class Test {public static void main(String[] args) {Thread t…

【网络安全】Windows系统安全实验

第3模块 Windows操作系统安全部分 3.1 帐户和口令的安全设置 3.1.1 实验目的 本章实验的目的主要是熟悉Windows操作系统中帐户和口令的安全设置,掌握删除、禁用帐户的方法,了解并启用密码策略和用户锁定策略,体验查看“用户权限分配”、…

如何在Linux环境下用VI编辑器写C程序编译C程序运行C程序

我是荔园微风,作为一名在IT界整整25年的老兵,今天我们来重点说一说如何在Linux环境下用VI编辑器写C程序编译C程序运行C程序。相信大家在Windows环境下写C程序编译C程序运行C程序怎么弄都已经很清楚了,现在我们来看在Linux下如果来做&#xff…

Vue 在for循环中动态添加类名及style样式集合

介绍 在vue的 for 循环中,经常会使用到动态添加类名或者样式的情况,实现给当前的选中的 div 添加不同的样式。 动态添加类名 提示: 所有动态添加的类名,放在表达式里都需要添加引号,进行包裹。 通过 对象 的形式&a…

Git ---- Git 分支操作

Git ---- Git 分支操作1. 什么是分支2. 分支的好处3. 分支的操作1. 查看分支2. 创建分支3. 修改分支4. 切换分支5. 合并分支5. 产生冲突4. 创建分支和切换分支图解1. 什么是分支 在版本控制过程中,同时推进多个任务,为每个任务,我们就可以创…