uniapp主副屏插件

袭烽

已于 2024-12-13 17:27:37 修改

阅读量1.3k

点赞数 35

分类专栏： uniapp 文章标签：主副屏插件双屏互动 Presentation 双屏同显商米主副屏商米插件 uniapp双屏同显

于 2024-12-13 13:37:02 首次发布

本文链接：https://blog.csdn.net/shimiso/article/details/144447752

版权

uniapp 专栏收录该内容

5 篇文章

订阅专栏

前言

Android双屏异显和主副屏相互通讯插件，用于广告机、pos机、收银机等设备的客屏开发使用

更新记录

1.0.1（2023-11-15）
支持主副屏双向通信和调用
支持腾讯X5内核浏览器
支持加载本地Html显示
支持加载远程Url显示

原生插件通用使用流程：

购买插件，选择该插件绑定的项目。
在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

功能说明

支持主副屏双向通信
副屏采用腾讯X5内核浏览器

uniapp项目需引入webview-x5-release.aar包

打开manifest.json文件，找到App模块配置，勾选上Android X5 Webview(腾讯TBS)即可
支持本地Html显示

拼写格式示例：file:///android_asset/apps/__UNI__D1A49E0/www/static/test.html
支持远程Url显示

主屏代码说明

<template>
	<view style="display: flex;margin:10px;flex-direction: column;">
		<view style="margin-top: 10px;">
			<button @click="showSubScreen()">显示副屏</button>
		</view>
		<view style="margin-top: 10px;">
			<button @click="sendDataToSubScreen()">向副屏发送消息</button>
		</view>
		<view style="margin-top: 10px;">
			<button @click="loadSubScreenUrl()">设置副屏URL</button>
		</view>
		<view style="margin-top: 10px;">
			<button @click="closeSubScreen()">关闭副屏</button>
		</view>
		<view style="margin-top: 10px;">副屏发来的消息:</view>
		<view>{{msg}}</view>
	</view>
</template>
<script>
//引入方式
const presentation = uni.requireNativePlugin('shimiso-presentation');
export default {
	data() {
		return {
			msg:''
		}
	},	
	created() {
		//功能1：接受副屏幕发来的消息
		plus.globalEvent.addEventListener('SubScreenEvent', function(e){
			modal.toast({
				message: "副屏发来的信息：" + JSON.stringify(e),
				duration: 1.5
			});
		});
	},
	methods: {
		//功能2：打开分屏页面   
		showSubScreen(){
			presentation.show('http://www.163.com');
		},
		//功能3：加载地址
		loadSubScreenUrl(){			
			presentation.loadUrl('http://www.163.com')//加载网络地址 	
			presentation.show('file:///android_asset/apps/__UNI__D1A49E0/www/static/test.html')//加载本地地址
		}
		//功能4：关闭分屏页面 
		closeSubScreen(){
		   	presentation.close();
		},	
		//功能5：向副屏发送消息 
		sendDataToSubScreen(){
			let json={state:"主屏消息",data:'你好！'}
		    presentation.sendDataToSubScreen(json);
		}
	}	
</script>

副屏代码说明

<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scale=1">
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <title>副屏示例</title>
</head>
<body>
<video style="width:50%; height: 300px;" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
</video>
</br>
<button onclick="sendMsg()">向主屏发送数据</button> <p/>
<div id="content"></div>
</body>

<script type="text/javascript">
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
	//功能6：向主屏发送消息
    function sendMsg(){
        Android.sendDataToMainScreen("{'msg':'我来自副屏，哈哈！！'}")
    }

	//功能7：接受主屏发来的消息
    function mainScreenCallBack(data) {
        document.getElementById('content').innerHTML = '这是主屏发送过来消息:' + JSON.stringify(data)
        console.log('mainScreenCallBack-->' + JSON.stringify(data));
    }
</script>

</html>