xtf-linkui

Appearance

android 主副屏异显 可自定义副屏界面 主副屏显示不同界面 ​

插件 ID: 25964
来源: https://ext.dcloud.net.cn/plugin?id=25964
android 主副屏异显 可自定义副屏界面 主副屏可相互通信 副屏采用webview

更新记录 ​

​

                                                    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

MIT Licensed

Copyright © 2026 xtf-linkui