更新记录
1.0.13(2024-01-08)
- 修复iOS打包问题
1.0.12(2023-12-01)
- 修复新版本基座uts兼容性问题
1.0.11(2023-08-07)
- 去除个别开发日志
平台兼容性
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视图如果要小窗口正常返回到页面,需要添加一个父节点
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种类型:
- 自定义一个小窗口悬浮在界面上,当app退到后台时,小窗口会消失
- 借助系统播放器当悬浮窗,将界面覆盖到上面,退到后台时不会消失
- 直接用系统播放器悬浮窗,无法自定义界面,只能用来播放系统支持的视频,退到后台时不会消失
- 第一种:自定义一个小窗口悬浮在界面上,当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也是这样的