更新记录
1.7(2024-03-28)
支持单独更新数据(不重新加载界面),updateData方法
1.6(2023-12-14)
支持编辑输入(enableEdit、disableEdit)
1.5(2023-12-04)
支持全屏,沉浸到状态栏
查看更多平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 14.0 | armeabi-v7a:支持,arm64-v8a:支持,x86:支持 | × |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
悬浮窗-任意界面 Ba-FloatWinWeb
简介
Ba-FloatWinWeb 是一款支持自定义任意界面的悬浮窗插件。采用webview方式,同时支持本地、网络地址;自带几种界面,可直接使用。
- 支持显示、更新、隐藏
- 支持记录显示位置
- 支持拖动
- 支持监听点击事件
- 支持自动申请、判断悬浮窗权限
- 支持手动申请、判断悬浮窗权限
- 支持同时设置多个悬浮窗,并且可以不同样式
- 自带几种界面,可直接使用(见效果图)
- 支持获取剪切板内容
- 支持编辑输入
- 支持全屏
有建议和需要,请联系QQ:2579546054
也可关注博客,实时更新最新插件:
使用方法
在 script
中引入组件
const floatWin = uni.requireNativePlugin('Ba-FloatWinWeb')
在 script
中调用(示例参考,可根据自己业务和调用方法自行修改)
methods: {
showFW(tag) { //显示
let params = {
//isToast: true,
//tag: tag,//悬浮窗标识,用于区分多个悬浮窗,可以不传
webUrl: "file:///android_asset/testFloatWin.html",//网页地址
width:128,//宽度 px
height: 128,//高度 px
xRatio: 0.8,//x轴偏移量(屏幕宽度比例)
yRatio: 0.7,//y轴偏移量(屏幕高度比例)
//moveType: 1,//拖动方式:1:不可拖动 2:任意拖动、3:贴边拖动。默认2
//isRememberXY: false,//是否记住上次的位置。默认true
//isPermission: false,//是否申请悬浮窗权限。默认true
//widthRatio:1,//宽度(屏幕宽度比例),width有值时无效
//heightRatio: 0.3,//高度(屏幕高度比例),height有值时无效
//webviewBgColor:"#FFFFFF"//webview背景色,默认透明
//isStartApp:true//点击悬浮窗,是否打开App,默认true
//fullscreen:true//是否全屏,沉浸到状态栏,默认false(注意heightRatio和widthRatio设置为1)
}
floatWin.show(params,
(res) => {
console.log(res);
uni.showToast({
title: res.msg,
icon: "none",
duration: 3000
})
});
},
updateFW(tag) { //更新数据
let webUrl ="file:///android_asset/testFloatWin.html?num1=66&num2=21"
floatWin.update({
webUrl: webUrl,
//tag: tag,
//width:128,//宽度 px
//height: 128,//高度 px
//xRatio: 0.8,//x轴偏移量(屏幕宽度比例)
//yRatio: 0.7,//y轴偏移量(屏幕高度比例)
//moveType: 1,//拖动方式:1:不可拖动 2:任意拖动、3:贴边拖动。默认2
},
(res) => {
console.log(res);
uni.showToast({
title: res.msg,
icon: "none",
duration: 3000
})
});
},
updateDataFW(tag) { //更新数据(不刷新界面)
floatWin.updateData({
data: "33",//复杂的可以传json,自行解析
tag: tag
},
(res) => {
console.log(res);//结果返回数据在res.data,可自行定义(在html中,参照下文“updateData 数据更新监听”)
});
},
hideFW(tag) { //隐藏
floatWin.hide({
tag: tag
},
(res) => {
console.log(res);
uni.showToast({
title: res.msg,
icon: "none",
duration: 3000
})
});
},
permissionFW() { //申请悬浮窗权限
floatWin.permission(
(res) => {
console.log(res);
uni.showToast({
title: res.msg,
icon: "none",
duration: 3000
})
});
},
goPermissionFW() { //跳转到悬浮窗权限页面
floatWin.goPermission(
(res) => {
console.log(res);
uni.showToast({
title: res.msg,
icon: "none",
duration: 3000
})
});
},
isPermissionFW() { //是否申请悬浮窗权限
floatWin.isPermission(
(res) => {
console.log(res);
let msg = res.msg;
if (res.data) {
msg = "isPermission:" + res.data.isPermission;
}
uni.showToast({
title: msg,
icon: "none",
duration: 3000
})
});
},
}
updateData 数据更新监听
在html文件中,监听数据更新
function updateData(data) { //监听数据更新
//这里写,你的数据处理逻辑
return "更新成功"//返回结果到uniapp(res.data)
}
点击事件监听
在应用生命周期app.vue的onLaunch事件中设置监听:
onLaunch: function() {
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('baFloatWinWeb', function(e) {
console.log('baFloatWinWeb:' + JSON.stringify(e));
//处理点击事件
});
},
onShow: function() {
},
onHide: function() {
}
点击事件参数
属性名 | 说明 |
---|---|
action | 事件类型,如:onClick |
tag | 悬浮窗标识,用于区分多个悬浮窗,可以不传 |
json | 附加参数,可在html网页中自定义添加 |
示例:
{"action":"onClick","json":{"msg":"点击了item1"},"tag":"menu"}
网页配置
同时支持在线网页和本地网页,新增支持uniapp网页。
如果用在线网页,直接传地址即可;
如果是uniapp网页,位置放在uniapp项目的static目录下,配置如下:
├── static
├── testFloatWin.html
├── ba_float_win_icon.png
├── ba_float_win_logo.png
uniapp网页的参数传值方式为:
let webUrl = "file://" + plus.io.convertLocalFileSystemURL('_www/static/testFloatWin.html');
//传入 webUrl
如果用本地网页,文件放在项目根目录,“nativeplugins/Ba-FloatWinWeb/android/assets/”目录下,没有就新建
,配置如下(demo):
├── nativeplugins
├── Ba-FloatWinWeb
├── android
├── assets
├── static
├── ba_float_win_icon.png
├── ba_float_win_logo.png
├── testFloatWin.html
├── testFloatWin2.html
├── testFloatWin3.html
├── testFloatWin4.html
本地网页webUrl参数,传入地址的格式为:"file:///android_asset/"+html文件名称
html中的api
方法名 | 说明 | 备注 |
---|---|---|
onClickFW | 点击事件 | 参数可传字符串(必传,可为空字符),监听参照“点击事件监听” |
goApp | 跳转APP | 参数可传字符串(必传,可为空字符),监听参照“点击事件监听” |
hideFW | 隐藏悬浮窗 | 参数为tag,可不传 |
showFW | 显示悬浮窗 | 主要用于多个悬浮窗时,关联其他;参数为tag,可不传 |
updateFW | 更新悬浮窗 | 参数为json字符串,数据参照示例的“floatWin.update”方法 |
getClipboardContent | 获取剪切板内容 | 支持在后台时获取剪切板内容;参数为tag,可不传 |
enableEdit | 使可以编辑输入 | 调用后悬浮窗支持可以编辑输入;参数为tag,可不传 |
disableEdit | 取消可以编辑输入 | 调用后悬浮窗取消可以编辑输入;参数为tag,可不传 |
html网页示例(testFloatWin.html)
或者下载插件页上传的demo,可以看到更多的示例
api 列表
方法名 | 说明 |
---|---|
show | 显示 |
update | 更新数据 |
updateData | 更新数据(不刷新界面) |
hide | 隐藏 |
permission | 申请悬浮窗权限 |
goPermission | 跳转到悬浮窗权限页面 |
isPermission | 是否申请悬浮窗权限 |