更新记录

1.0.0（2025-11-24）

初始化

平台兼容性

uni-app(3.92)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ - - √ √ 5.0 - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

uni-app x(3.8.12)

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

xtf-hdmiwindow

uniappx

<template>
    <view class="content">
        <button @click="onClick(1)" type="primary" style="margin: 10rpx;">检测浮窗权限</button>
        <button @click="onClick(2)" type="primary" style="margin: 10rpx;">申请浮窗权限</button>
        <button @click="onClick(3)" type="primary" style="margin: 10rpx;">初始化</button>
        <button @click="onClick(9)" type="primary" style="margin: 10rpx;">检测hdmi是否链接</button>
        <button @click="onClick(4)" type="primary" style="margin: 10rpx;">监听hdmi插入与拔出</button>
        <button @click="onClick(5)" type="primary" style="margin: 10rpx;">显示hdmi界面</button>
        <button @click="onClick(6)" type="primary" style="margin: 10rpx;">隐藏hdmi界面</button>
        <button @click="onClick(7)" type="primary" style="margin: 10rpx;">加载网页</button>
        <button @click="onClick(8)" type="primary" style="margin: 10rpx;">发送消息到hdmi网页</button>

    </view>
</template>

<script>
    import { PresentationState,initDisplay,hideHdmiDialog, isFloatPermissionGranted, loadUrl, onHdmiStateListener, onShowHdmiDialog, requestFloatPermissionGranted, sendMsgToWebview,isHdmiConnect } from "@/uni_modules/xtf-hdmiwindow";

    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            initDisplay();
        },
        methods: {
            onclick(id:number){
                if(id==1){
                    var per=    isFloatPermissionGranted()
                    uni.showToast({
                        icon:"none",
                        title:per+""
                    })
                }else if(id==2){
                    requestFloatPermissionGranted();
                }else if(id==3){
                    initDisplay();
                }else if(id==4){
                    onHdmiStateListener(function(state:boolean){
                        uni.showToast({
                            icon:"none",
                            title:state+""
                        })
                    })
                }else if(id==5){
                    onShowHdmiDialog({
                        url:"test.html",
                        stateCallback(type:number,msg:string) {

                        },
                        consoleCallback(log) {

                        },
                        webViewMsgCallback(type:number,msg:string) {
                            if(type==0){
                                hideHdmiDialog();
                            }
                        }
                    } as PresentationState)
                }else if(id==6){
                    hideHdmiDialog();
                }else if(id==7){
                    loadUrl("http://192.168.0.1:8080/pages/index/test")
                }else if(id==8){
                    sendMsgToWebview(0,"这个消息是从uniapp代码发送过来的")
                }else if(id==9){
                    var connect=isHdmiConnect();
                    uni.showToast({
                        icon:"none",
                        title:connect+""
                    })
                }

            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

uniapp

<template>
    <view class="content">
        <button @click="onClick(1)" type="primary" style="margin: 10rpx;">检测浮窗权限</button>
        <button @click="onClick(2)" type="primary" style="margin: 10rpx;">申请浮窗权限</button>
        <button @click="onClick(3)" type="primary" style="margin: 10rpx;">初始化</button>
        <button @click="onClick(9)" type="primary" style="margin: 10rpx;">检测hdmi是否链接</button>
        <button @click="onClick(4)" type="primary" style="margin: 10rpx;">监听hdmi插入与拔出</button>
        <button @click="onClick(5)" type="primary" style="margin: 10rpx;">显示hdmi界面</button>
        <button @click="onClick(6)" type="primary" style="margin: 10rpx;">隐藏hdmi界面</button>
        <button @click="onClick(7)" type="primary" style="margin: 10rpx;">加载网页</button>
        <button @click="onClick(8)" type="primary" style="margin: 10rpx;">发送消息到hdmi网页</button>

    </view>
</template>

<script>
    import { initDisplay,hideHdmiDialog, isFloatPermissionGranted, loadUrl, onHdmiStateListener, onShowHdmiDialog, requestFloatPermissionGranted, sendMsgToWebview ,isHdmiConnect} from "@/uni_modules/xtf-hdmiwindow";

    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            initDisplay();
        },
        methods: {
            onclick(id){
                if(id==1){
                    var per=    isFloatPermissionGranted()
                    uni.showToast({
                        icon:"none",
                        title:per+""
                    })
                }else if(id==2){
                    requestFloatPermissionGranted();
                }else if(id==3){
                    initDisplay();
                }else if(id==4){
                    onHdmiStateListener(function(state){
                        uni.showToast({
                            icon:"none",
                            title:state+""
                        })
                    })
                }else if(id==5){
                    onShowHdmiDialog({
                        url:"test.html",
                        stateCallback(type,msg) {

                        },
                        consoleCallback(log) {

                        },
                        webViewMsgCallback(type,msg) {
                            if(type==0){
                                hideHdmiDialog();
                            }
                        }
                    })
                }else if(id==6){
                    hideHdmiDialog();
                }else if(id==7){
                    loadUrl("http://192.168.0.1:8080/pages/index/test")
                }else if(id==8){
                    sendMsgToWebview(0,"这个消息是从uniapp代码发送过来的")
                }else if(id==9){
                    var connect=isHdmiConnect();
                    uni.showToast({
                        icon:"none",
                        title:connect+""
                    })
                }

            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

hdmi 网页写法

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>window</title>
</head>
<!-- 这里需要去掉边框  否则可能出现滑动 -->
<body style="margin: 0px;padding: 0px;" >
<div class="content">
    <div id="paragraph">
        这是一个浮窗h5
    </div>
    <div class="close_btn">
        <img  id="close" src="close.png" style="width: 30px;height: 30px;"/>
    </div>
</div>

<style>
    .content{
        background-color: green;
        margin: 0px;
        padding: 0px;
        color: white;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .close_btn{
        position: absolute;
        right: 10px;
        top: 10px;
    }

</style>

<script>

    // 为按钮添加点击事件监听器
    document.getElementById('close').addEventListener('click', function() {
        uniapp.sendDataToUni(0,"")
    });

    function dataFromUniapp(type,msg){
        console.log(type,msg);
          var paragraph = document.getElementById("paragraph");
          paragraph.textContent =type+ msg;
    }

</script>

</body>
</html>

初始化

initDisplay();

检测是否有浮窗权限

var per=    isFloatPermissionGranted()

申请浮窗权限

requestFloatPermissionGranted();

监听hdmi 插入与拔出

    onHdmiStateListener(function(state:boolean){

    })

监听hdmi 插入与拔出

uniappx

    onHdmiStateListener(function(state:boolean){

    })

uniapp

onHdmiStateListener(function(state){

    })

显示浮窗

            onShowHdmiDialog({
                        url:"test.html",
                        stateCallback(type:number,msg:string) {
                            //type 0 未链接hdmi 1 显示 2 隐藏
                        },
                        consoleCallback(log) {

                        },
                        webViewMsgCallback(type:number,msg:string) {
                            if(type==0){
                                hideHdmiDialog();
                            }
                        }
                    } as PresentationState)

隐藏hdmi 界面

hideHdmiDialog();

检测hdmi是否链接

var connect=isHdmiConnect();

发送消息到hdmi网页

sendMsgToWebview(0,"这个消息是从uniapp代码发送过来的")

加载网页

loadUrl("http://192.168.0.1:8080/pages/index/test")

开发文档

UTS 语法 UTS API插件 UTS uni-app兼容模式组件 UTS 标准模式组件 Hello UTS

隐私、权限声明

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

浮窗权限

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

无

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

无

评论列表 撰写评论 向官方投诉

暂无用户评论。