更新记录
1.0.4(2024-09-07)
- 增加middle_bottom_txt样式时,风格线颜色参数
1.0.3(2024-09-06)
- 增加webView样式的悬浮窗,支持悬浮窗内容完全自定义
1.0.2(2024-09-06)
- 更新Android参数兼容性问题
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.6.8,Android:4.4,iOS:9 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
悬浮窗小窗口画中画,自定义画中画界面
集成步骤
ios悬浮小窗口画中画功能需要增加audio的后台模式
{
"app-plus" : {
/* 应用发布信息 */
"distribute" : {
/* ios打包配置 */
"ios" : {
"UIBackgroundModes" : [ "audio"] // 数组,支持多个
},
...
}
}
}
插件
import {
UTSCustomPicInPic
} from "@/uni_modules/wrs-uts-custompicinpic"
picInPic.onCallback((resp) => {
this.showMsg(JSON.stringify(resp))
let opt = resp.opt
switch (opt) {
// 悬浮窗删除
case "onDelete":
break;
// js调用uniapp的回调
case "onJSData":
// ios: {"opt":"onJSData","params":{"msg":"你好,我是JS"}}
// 注意Android的params是字符串
// android: {"params":"{\"msg\":\"你好,我是JS\"}","opt":"onJSData"}
break;
default:
break;
}
})
- 打开显示悬浮窗
目前支持2种样式:webView、middle_bottom_txt
- webView样式
var localUrl = plus.io.convertLocalFileSystemURL('_www/static/loginSys/index.html');
if(this.isAndroid) {
localUrl = "file://" + localUrl
}
let params = {}
params.viewType = "webView" // 悬浮框视图类型,如需定制视图类型,请联系作者
params.uiParams = { // 视图UI参数
url: localUrl // webView加载的url,可以是本地H5或远程H5
}
if(this.isAndroid) {
params.deleteBtn = {
visibility: false // 左上角删除按钮是否显示
}
}
params.tag = this.webViewTag // Int,用于标识悬浮窗ID
if (this.isAndroid) {} else {
// 一定要传视频播放url,ios的悬浮窗是依赖视频播放器的
params.url = plus.io.convertLocalFileSystemURL("_www/static/holder.mp4")
}
picInPic.showPicInPic(params)
- middle_bottom_txt文本样式
let params = {}
params.viewType = "middle_bottom_txt"// 悬浮框视图类型,如需定制视图类型,请联系作者
params.uiParams = { // 视图UI参数
top: {
txt: "Hello" + this.count,
txtColor: "#FF0000",
fontSize: 14
},
bottom: {
txt: "您好" + this.count,
txtColor: "#FFF000",
fontSize: 16
},
middle: {
visibility: true,
bgColor: '#FF00FF'
}
}
params.tag = this.tag // Int,用于标识悬浮窗ID
if(this.isAndroid) {
} else {
// 一定要传视频播放url,ios的悬浮窗是依赖视频播放器的
params.url = plus.io.convertLocalFileSystemURL("_www/static/demo.mp4")
}
picInPic.showPicInPic(params)
picInPic.deletePicInPic(this.tag, (resp) => {
})
let params = {}
params.uiParams = {
url: "https://www.baidu.com"
}
params.tag = this.webViewTag
picInPic.refreshPicInPic(params, (resp) => {
})
- middle_bottom_txt
let params = {}
params.uiParams = { // 视图UI参数
top: {
txt: "Hello" + this.count,
txtColor: "#FF0000",
fontSize: 14
},
bottom: {
txt: "您好" + this.count,
txtColor: "#FFF000",
fontSize: 16
},
middle: {
visibility: true
}
}
params.tag = this.tag
picInPic.refreshPicInPic(params, (resp) => {
})
var title = "您好" + this.count
// js的函数replaceTitle一定要在windows接点下,局部函数是无法调用到的
let js = `replaceTitle("${title}")`;
let params = {}
params.js = js
params.tag = this.webViewTag
picInPic.callJS(params, (resp) => {
console.log(JSON.stringify(resp))
});
let hasPermission = true
if (this.isAndroid) {
hasPermission = UTSCustomPicInPic.canDrawOverlays();
} else {
hasPermission = UTSCustomPicInPic.isPictureInPictureSupported();
}