更新记录

1.0.4（2024-09-07）

1. 增加middle_bottom_txt样式时，风格线颜色参数

1.0.3（2024-09-06）

1. 增加webView样式的悬浮窗，支持悬浮窗内容完全自定义

1.0.2（2024-09-06）

1. 更新Android参数兼容性问题

平台兼容性

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

集成步骤

• 拷贝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
}
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)

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)

• 移除悬浮窗

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