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(文档)
uniapp 悬浮窗插件(在其他应用上层显示) Ba-FloatWindow相关推荐
- uniapp 来电显示悬浮窗插件(支持锁屏来电) Ba-CallerID
简介(下载地址) Ba-CallerID 是一款来电显示悬浮窗插件插件. 支持显示.隐藏 支持锁屏来电显示 支持自定义位置显示(上.中.下) 支持拖动(这版不支持,需要的话可以加) 支持申请.判断悬浮 ...
- uniapp 悬浮窗(应用内、无需授权) Ba-FloatWindow2
简介(下载地址) Ba-FloatWindow2 是一款应用内并且无需授权的悬浮窗插件.支持多种拖动:自定义位置.大小:支持动态修改. 支持自动定义起始位置 支持自定义悬浮窗大小 支持贴边显示 支持多 ...
- uniapp pdf阅读插件(手势缩放、显示页数) Ba-Pdf
pdf阅读 Ba-Pdf 简介(下载地址) Ba-Pdf 是一款uniapp显示PDF文档的插件.支持手势缩放.双击缩放:支持显示页数:支持快速拖动:自带选择pdf文件方法. 支持手势缩放.双击缩放 ...
- android悬浮按钮弹出与隐藏,Android悬浮窗按钮实现点击并显示/隐藏多功能列表
前言 最近在一个项目中,需要制作录屏的功能,原先是在应用中有录屏/控制的按钮,思考之下觉得这种效果并不好,因此就想制作一个可以悬浮的悬浮窗,这样不论手机在什么界面中都可以对录屏功能进行控制. 这里就来 ...
- android悬浮窗(支持退回桌面后显示)
1.需求 首先说一下需求吧,看看是不是你们想要的: 在IM音视频聊天页面,点击页面上的最小化按钮,将Activity最小化并开启一个悬浮窗,悬浮窗可拖动可点击,点击进入当前通话页面. 2.思路 1.听 ...
- Android 悬浮窗在主界面点击显示悬浮窗界面后,再通过后台,调起app,界面依然是悬浮窗的界面,解决思路
通过监听悬浮窗的按键事件,如果不是悬浮窗的按键的事件,就直接跳到mainActivity中,
- Android 摄像头预览悬浮窗,可拖动,可显示在其他app上方
市面上常见的摄像头悬浮窗,如微信.手机QQ的视频通话功能,有如下特点: 整屏页面能切换到一个小的悬浮窗 悬浮窗能运行在其他app上方 悬浮窗能跳回整屏页面,并且悬浮窗消失 我们探讨过用CameraX打 ...
- uniapp 常用原生插件大全(2023年最新)
文章目录 前言 1.扫码 2.文件选择 3.图片选择 4.图片编辑(涂鸦.贴图.滤镜.裁剪.美颜.文字等) 5.图片压缩 6.图片水印 7.视频压缩.剪辑 8.应用消息通知 6.应用未读角标 7.保活 ...
- uniapp 画中画悬浮窗(视频) Ba-VideoPip
简介(下载地址) Ba-VideoPip 是一款画中画方式的视频悬浮窗插件.支持点播.直播:支持官方.三方播放器无缝切换:支持动态刷新(如切换视频或进度). 支持点播.直播 支持官方.三方播放器无缝切 ...
最新文章
- 7.06 生成累计和
- UA OPTI512R 傅立叶光学导论 衍射例题
- DynamicArray
- Win7 下打开wifi共享的方法
- java byte 二维数组_[编程入门]二维数组的转置-题解(Java代码)
- 某8086cpu构成的微型计算机,微型计算机原理及应用试题及答案
- nyoj--49--开心的小明(背包)
- Javascript:js借助jQuery和fileSave将表格存储到world
- 凯辉基金与法投行完成对资管软件公司NeoXam的投资 加速企业国际化发展布局
- 计算机vfp系统,计算机等级考试VFP教程:第一章数据库系统
- pdf怎么提取图片?职场达人都在用的两个方法分享给你。
- linux命令sel是什么意思,sel
- 第六周助教工作总结——NWNU李泓毅
- 扫地机器人作文说明文提纲_关于物品的说明文:扫地机器人的自述
- 购买阿里云服务器搭建网站或个人博客详细教程
- iOS 图片滚动播放
- Zip、Rar文件解压
- 编程15年40岁程序员的我终于在压力下被迫转行了
- 电脑无法显示移动硬盘文件内容的解决方法
- 深入探索Win32结构化异常处理