更新记录

1.0.22（2026-06-25）

优化

1.0.21（2026-06-25）

增加鸿蒙支持

1.0.20（2026-06-21）

Android增加应用内小窗口
增加小窗口切换到横屏接口、回到竖屏接口

平台兼容性

uni-app(3.7.12)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
-	-	-	-	√	√	5.0	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
-	-	-	-	-	-	-	-	-	-	-	-

uni-app x(3.7.12)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	5.0	√	√	-

其他

多语言	暗黑模式	宽屏模式
√	√	√

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

集成步骤

拷贝demo示例项目里的AndroidManifest.xml文件和nativeResources文件夹到项目根目录
在manifest.json里增加iOS的audio后台运行模式
咨询或定制请点击上面"进入交流群"按钮私聊作者

ios悬浮小窗口画中画功能需要增加audio的后台模式


{  
"app-plus" : {  
        /* 应用发布信息 */  
        "distribute" : {  
            /* ios打包配置 */  
            "ios" : {  
                "UIBackgroundModes" : [ "audio"] // 数组，支持多个  
            },  
         ...  
        }  
    }  
}

窗口类型分为应用外小窗口和应用内小窗口

应用外系统小窗口
- app在前台/后台运行时，小窗口都一直显示
- Android需要用户主动开启"显示悬浮窗(显示在其他应用的上层)"权限
- iOS只能显示和修改界面，不能相应用户触摸(即小窗口上面即使有按钮也无法响应点击事件)
应用内小窗口
- app在前台时显示，在后台运行时隐藏
- 可以响应用户触摸事件

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

插件


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样式


let screenHeight = UTSCustomPicInPic.getScreenHeight()
let screenWidth = UTSCustomPicInPic.getScreenWidth()
let width = 150
let height = 150

var localUrl = plus.io.convertLocalFileSystemURL('_www/static/loginSys/index.html');
if(this.isAndroid) {
    localUrl = "file://" + localUrl
}
let params = {}

params.x = screenWidth - width // x坐标
params.y = screenHeight - width - 50 // y坐标
params.width = width // 宽度
params.height = height // 高度

params.viewType = "webView" // 悬浮框视图类型，如需定制视图类型，请联系作者
params.uiParams = { // 视图UI参数
    url: localUrl, // webView加载的url，可以是本地H5或远程H5
    isScrollEnabled: true // 仅对iOS生效，是否禁止webview    内容滚动，如果不禁止滚动，会与移动小窗口的手势冲突，导致要长按一会才能灵敏地移动小窗口
}
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)

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

})

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

显示小窗口

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


- 更新悬浮窗位置，不支持iOS应用外小窗口

```javascript

let params = {}
params.tag = this.inAppViewTag // Int，用于标识悬浮窗ID
params.screenOrientation = 0 // 仅支持Android， 0:左横屏 8：右横屏 1:竖屏
params.x = 100 // 单位： android像素，iOS点
params.y = 100
params.width = 100
params.height = 200
params.bounds = { // 仅支持iOS，内部大小
    x: 0,
    y: 0,
    width: screenHeight,
    height: screenWidth
}
params.center = { // 仅支持iOS，中心点位置
    x: screenWidth / 2,
    y: screenHeight / 2
}
params.animation = { // 动画和旋转角度，主要用于iOS
    duration: 0.5,
    rotation: 270
}
picInPic.updateFrame(params, (resp)=>{

})

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


UTSCustomPicInPic.taskToFront()

设置app屏幕方向，仅支持android


picInPic.setOrientation(8) // 0:左横屏 8:右横屏 1:竖屏