uniapp 悬浮窗插件（在其他应用上层显示） Ba |
您所在的位置：网站首页 › 如何让微信悬浮在别的应用上 › uniapp 悬浮窗插件（在其他应用上层显示） Ba |
uniapp 悬浮窗插件（在其他应用上层显示） Ba
|
悬浮窗（在其他应用上层显示） 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 方法参数初始化悬浮窗 属性名类型必填默认值说明widthRatioNumberfalse0.15根据屏幕宽度比例，设置悬浮窗宽度heightRatioNumberfalse0.15根据屏幕宽度比例，设置悬浮窗高度xRatioNumberfalse0.8根据屏幕宽度比例，设置悬浮窗x轴起始位置yRatioNumberfalse0.8根据屏幕高度比例，设置悬浮窗y轴起始位置moveTypeNumberfalse3拖动效果，1：不可拖动、2：任意拖动、3：贴边拖动、4：回弹拖动slideLeftMarginNumberfalse0左侧贴边位置，支持负数slideRightMarginNumberfalse0右侧贴边位置，支持负数durationNumberfalse500间隔时间mstagStringfalse‘default_float_window_tag’为该弹窗设置标识，以做区分，用于多个iconPathStringfalse资源图片项目路径，参照’UI 图标设置’ showIcon 方法参数显示悬浮窗 属性名类型必填默认值说明tagStringfalse‘default_float_window_tag’为该弹窗设置标识，以做区分，用于多个 hideIcon 方法参数隐藏悬浮窗 属性名类型必填默认值说明tagStringfalse‘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（文档） |
【本文地址】
今日新闻 |
推荐新闻 |