Android 双屏 异显 插件 双屏(副屏)异显,主副屏通讯
详细内容
Android 双屏异显插件说明
双屏显示,需要在有双屏显示的设备上使用,例如收银机,前后两个屏幕。
一、引用插件
复制代码const plug=uni.requireNativePlugin("Html5app-TwoDisplay");
二、打开副屏显示器的方法, 副屏是一个浏览器 webview.
- 支持打开本地 html 页面, 本地的html 页面放在 hybrid 文件夹下的html文件夹下面。
- 页面传值,这里使用的是网址参数传值.
必须要在根录目下的第一级目录创建 hybrid /html 文件夹才有效.
- 例如
复制代码let num=Math.ceil(Math.random()*100);
plug.showWebUrl({url:"web/index.html?id="+num},ret=>{
JSON.stringify(ret);
});
- 支持打开网络链接。
复制代码plug.showWebUrl({url:"http://www.html5-app.com/"},ret=>{
JSON.stringify(ret);
});
三、打开视频列表播放,用于播放一些广告视频等等。
复制代码
let videoPath=plus.io.convertLocalFileSystemURL("static/video_171129.mp4"); //如果是本地视频,路径需要转换成平台绝对路径
plug.setVideoListPlay(
{
mute:true, //播放视频时,是否静音
videolist: //视频链接
[ videoPath,
"https://onehk-1251146759.cos.ap-guangzhou.myqcloud.com/2017123101.mp4" //网络视频
]
},ret=>{
});
参数说明 mute=> 是否静音播放视频, videolist=> 数组,支持本地视频和网络视频链接播放。
其他方法说明
方法名称 | 说明 |
---|---|
cancel() | 取消副屏幕显示 |
play() | 恢复播放 |
pause() | 暂停播放 |
stop() | 停止播放 |
seekTo(int s) | 跳转播放,单位秒 |
异屏之间通信,vue 与 副屏页面 html 页面互相通信,可以下载示例参考。
vue 层,使用 sndMsgToHtml 方法向html 页面发送消息.
复制代码 plug.sndMsgToHtml({data:"123456"});
复制代码- html 页面接收来自 vue 传回的消息
需要在html 页面中引入 dsbridge.js 文件
复制代码//监听 uniapp 传过来的清息
bridge.call("addEventListener",{},function(v){
});
复制代码
- html 向 uniapp 传值
bridge.call("sndMsgToNative",{"data":"123456"});
复制代码- 在 showWebUrl 方法中,接收值
plug.showWebUrl({url:"web/index.html?id="+num},ret=>{
复制代码 //接收html 页面传过来的数据
});
复制代码

#### 安卓手机上,如果测试双屏?
- 找到打开"开发者选项"-》 选择-》"模拟辅助显示设备" 就可以出来一个小窗口。

#### 安卓手机,扫一扫下载demo 安装体验
加载更多