更新记录

1.0.13（2024-01-08）

1. 修复iOS打包问题

1.0.12（2023-12-01）

1. 修复新版本基座uts兼容性问题

1.0.11（2023-08-07）

1. 去除个别开发日志

平台兼容性

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

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

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

android需要增加悬浮窗权限

  "<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",

插件

            <wrs-uts-floatPicInPic ref='floatPicInPic1'>
                <view class="contentView">
                    <text>您好，我是第一个悬浮框</text>
                    <button @click="deleteFloat1">删除</button>
                    <button @click="floatWindowBackToPage1">回到页面</button>
                </view>
            </wrs-uts-floatPicInPic>

    import {
        FloatPicInPic, removeFloatWindow, floatWindowBackToPage, floatWindowPlayerPlay, floatWindowPlayerPause, floatWindowPlayerSeekToTime
    } from "@/uni_modules/wrs-uts-floatPicInPic"

• 使用标签的页面需要用nvue，不能用vue

• 建议标签放到首页，如果放到二级页面，当退出二级页面时，里面内容会被uniapp回收掉或功能不正常

• 建议只有一个字节点，不要有多个字节点

• @onLayouted布局结束事件

• 如果下面有<video />等捕获手势等节点，可能会造成无法拖动小窗口，需要在<video />上面增加一层透明的view

• 检查悬浮窗小窗口画中画权限

    let hasPermission = FloatPicInPic.canDrawOverlays();
                if (hasPermission) {
                    this.showToast("当前有悬浮窗权限")
                } else {

                    this.showModel("当前没有悬浮窗权限，是否去打开权限?", () => {
                        FloatPicInPic.goToOpenOverlaysSetting()
                    }, () => {

                    })
                }

android

android视图如果要小窗口正常返回到页面，需要添加一个父节点,参考demo

                let screenWidth = FloatPicInPic.getScreenWidth()
                let screenHeight = FloatPicInPic.getScreenHeight()
                // 宽度
                let width = screenWidth / 2
                // 高度
                let height = screenHeight / 2
                // X轴
                let x = screenWidth - width
                // Y轴
                let y = (screenHeight - height) / 2
                // 标签，用于后面小窗口删除、返回页面
                let tag = 1 
                this.$refs.floatPicInPic1.openPicInPic(x, y, width, height, tag)

iOS

iOS的悬浮窗小窗口画中画分为3种类型：

1. 自定义一个小窗口悬浮在界面上，当app退到后台时，小窗口会消失
2. 借助系统播放器当悬浮窗，将界面覆盖到上面，退到后台时不会消失
3. 直接用系统播放器悬浮窗，无法自定义界面，只能用来播放系统支持的视频，退到后台时不会消失

• 第一种：自定义一个小窗口悬浮在界面上，当app退到后台时，小窗口会消失

                let screenWidth = FloatPicInPic.getScreenWidth()
                let screenHeight = FloatPicInPic.getScreenHeight()
                // 宽度
                let width = screenWidth / 2
                // 高度
                let height = screenHeight / 2
                // X轴
                let x = screenWidth - width
                // Y轴
                let y = (screenHeight - height) / 2
                // 标签，用于后面小窗口删除、返回页面
                let tag = 1 
                this.$refs.floatPicInPic1.openPicInPic(x, y, width, height, tag)

• 第二种：借助系统播放器当悬浮窗，将界面覆盖到上面，退到后台时不会消失

                // 视频地址，需要借助系统播放器当悬浮窗
                let url = "https://dh2.v.netease.com/2017/cg/fxtpty.mp4";
                // 静音
                let isMuted = true;
                let allowsExternalPlayback = true;
                // 小窗口需要延时显示，不然会可能加载不出来
                let delayTime = 700;
                // 标签
                let tag = 3;
                let type  = 2;// 小窗口类型，这里写死2
                this.$refs.openPicInPicCustomUI.openPicInPicType(url, isMuted, allowsExternalPlayback,delayTime, tag, type)

• 第三种：直接用系统播放器悬浮窗，无法自定义界面，只能用来播放系统支持的视频，退到后台时不会消失

主要用来播放视频使用

                let url = "https://dh2.v.netease.com/2017/cg/fxtpty.mp4";
                let isMuted = false;
                let allowsExternalPlayback = true;
                let delayTime = 700;
                let tag = 4;
                let type  = 0;
                let restoreHandle = ()=>{
                    console.log("restore")
                }
                let stopHandle = ()=>{
                    console.log("stop")
                }
                this.$refs.openPicInPicSystem.openPicInPicType(url, isMuted, allowsExternalPlayback, delayTime, tag, type, restoreHandle, stopHandle)

• 删除悬浮窗小窗口画中画

let tag = 1
removeFloatWindow(tag)

• 删除悬浮窗小窗口画中画,在Android里，此接口与openPicInPic直接调用间隔不能调用太快，否则会出现画面异常问题

let tag = 1
floatWindowBackToPage(tag)

• 设置圆角

this.$refs.floatPicInPic1.setBorderCorner(15)

• 原生代码的获取屏幕宽高

    let screenWidth = FloatPicInPic.getScreenWidth()
    let screenHeight = FloatPicInPic.getScreenHeight()

• 获取Android屏幕密度，仅支持Android

    let screenDensity = FloatPicInPic.getScreenDensity()

• 监听悬浮小窗口上的事件，仅支持iOS

            FloatPicInPic.setPicInPicCallback((tag, opt, params) => {
                console.log("tag:" + tag + " opt:" + opt)
                if (opt == "restore") { // 仅支持iOS
                    // 点击了小窗口右上角按钮，点击小窗口右上角按钮后，会先回调restore，接着回调didStop
                } else if (opt == "didStop") {// 仅支持iOS
                    // 点击了小窗口左上角按钮
                } else if(opt == "didStart") {// 仅支持iOS
                    // 小窗口已经启动
                    console.log("小窗口启动成功 tag:" + tag)
                } else if(opt == "failStart") {// 仅支持iOS
                    // 小窗口启动失败
                    console.log(params)
                } else if(opt == "floatWindowBackToPage") {
                    console.log("小窗口返回页面 tag:" + tag)
                } else if(opt == "removeFloatWindow") {
                    console.log("删除小窗口 tag:" + tag)
                }
            })

• 播放小窗口上系统播放器的视频，仅支持iOS

let tag = 1;
floatWindowPlayerPlay(tag)

• 暂停小窗口上系统播放器的视频，仅支持iOS

let tag = 1;
floatWindowPlayerPause(tag)

• 快进小窗口上系统播放器的视频，仅支持iOS

let tag = 1;
let time = 5.0
floatWindowPlayerSeekToTime(tag, time)

系统播放器，此播放器在iOS可以达到无缝衔接小窗口效果，播放内核采用的是系统播放器内核

                <wrs-uts-sysPlayer-view @onLoadView="onLoadView" @picInPicDidStart="picInPicDidStart"
                    @picInPicFailStart="picInPicFailStart" ref='player'
                    :style="'width:'+width+'px;height:'+height+'px;'" class="playerStyle"></wrs-uts-sysPlayer-view>

• 播放视频,支持本地视频和网络视频,常见的视频播放格式都支持，只要取决于手机厂家自带的播放器内核 如需更多支持更多视频格式，请使用:
  1. vlc插件https://ext.dcloud.net.cn/plugin?id=10010
  2. 视频播放器插件https://ext.dcloud.net.cn/plugin?id=4998

                var absPath = plus.io.convertLocalFileSystemURL("_www")
                // Android获取的absPath以/结尾，iOS获取的absPath不是/结尾 
                if (absPath.endWith('/')) {
                    absPath = absPath.substring(0, absPath.length - 1)
                }
                var url = absPath + "/static/demo.mp4"
                // url = "https://dh2.v.netease.com/2017/cg/fxtpty.mp4"

                this.$refs.player.playUrl(url)

• 暂停播放

this.$refs.player.pause()

• 继续播放

this.$refs.player.play()

其他场景说明

• 当app退到后台时，想通过小窗口来启动app回到前台

Android：在小窗口上自定义添加按钮，在按钮事件里调用这个插件的返回前台接口https://ext.dcloud.net.cn/plugin?id=7405

var params = {
    packageName: "com.wrs.app"
}
systemutils.appBackForeground(params)

ios: ios系统没有这样的接口，都是需要用户手动点击app才能回到前台，其他做音频媒体的app也是这样的