更新记录

1.0.18（2025-05-30）

1. 修复高版本HB 的iOS编译问题

1.0.17（2025-05-20）

1. 增加是否可以拖动参数canDrag
2. Android增加后台app切换到前台运行接口

1.0.16（2025-05-15）

1. 修复android某些机型点击小窗口时有时候会有偏移问题
2. 增加小窗口圆角设置参数cornerRadius

平台兼容性

uni-app

uni-app x

悬浮窗小窗口画中画，自定义画中画界面

集成步骤

• 拷贝demo示例项目里的AndroidManifest.xml文件和nativeResources文件夹到项目根目录
• 在manifest.json里增加iOS的audio后台运行模式
• 插件集成步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027

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
  1. 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
}
params.deleteBtn = {
    visibility: false // 左上角删除按钮是否显示
}
params.tag = this.webViewTag // Int，用于标识悬浮窗ID
params.cornerRadius = 8 // 圆角，支持Android和iOS的应用内小窗口
params.canDrag = false // 是否可以拖动，仅支持Android和iOS的应用内小窗口
if (this.isAndroid) {

} else {
    // 一定要传视频播放url,ios的悬浮窗是依赖视频播放器的
    params.url = plus.io.convertLocalFileSystemURL("_www/static/holder.mp4")
}
picInPic.showPicInPic(params)

2. 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, (resp)=>{})

• 移除悬浮窗

picInPic.deletePicInPic(this.tag, (resp) => {

})

• 刷新悬浮窗内容
  1. webView

let params = {}
params.uiParams = {
    url: "https://www.baidu.com"
}
params.tag = this.webViewTag
picInPic.refreshPicInPic(params, (resp) => {

})

2. 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) => {

})

• 调用H5函数(webView样式生效)

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();
}

ios小窗口类型

iOS小窗口分为2中类型：

1. 应用外系统小窗口 不能响应手势事件，app切换到后台运行时还存在

2. 应用内小窗口 可以响应手势事件，app切换到后台运行时不显示，如：

floatType设置小窗口类型，默认为outApp inApp: 应用内小窗口 outApp：应用外小窗口

var localUrl = plus.io.convertLocalFileSystemURL('_www/static/loginSys/index.html');
// localUrl = "https://www.baidu.com"
let params = {}
params.floatType = "inApp" // 设置小窗口类型，inApp、outApp
params.viewType = "webView" // 悬浮框视图类型，如需定制视图类型，请联系作者
params.uiParams = { // 视图UI参数
    url: localUrl,
    isScrollEnabled: true // 仅对iOS生效，是否禁止webview    内容滚动，如果不禁止滚动，会与移动小窗口的手势冲突，导致要长按一会才能灵敏地移动小窗口
}
params.tag = this.inAppViewTag // Int，用于标识悬浮窗ID
params.x = 20
params.y = 20
params.width = 150
params.height = 150
params.canDrag = false // 是否可以拖动，仅支持Android和iOS的应用内小窗口
picInPic.showPicInPic(params, (resp)=>{})

• 获取屏幕宽度

let width = UTSCustomPicInPic.getScreenWidth()

• 获取屏幕高度

let width = UTSCustomPicInPic.getScreenHeight()

• 更新悬浮窗位置，只支持Android和iOS应用内小窗口，不支持iOS应用外小窗口

let params = {}
params.tag = this.inAppViewTag // Int，用于标识悬浮窗ID

params.x = 100 // 单位： android像素，iOS点
params.y = 100
params.width = 100
params.height = 200
picInPic.updateFrame(params, (resp)=>{

})

• 后台app切换到前台运行，仅支持Android，需要手动开启app的“后台弹窗”权限才有效

UTSCustomPicInPic.taskToFront()