更新记录

1.0.13(2024-01-08)

  1. 修复iOS打包问题

1.0.12(2023-12-01)

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

1.0.11(2023-08-07)

  1. 去除个别开发日志
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0,Android:4.4,iOS:9,HarmonyOS:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

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

如需定制画中画内容请使用插件https://ext.dcloud.net.cn/plugin?name=wrs-uts-custompicinpic

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>

                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也是这样的

隐私、权限声明

1. 本插件需要申请的系统权限列表:

android: android.permission.SYSTEM_ALERT_WINDOW ios: 无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问