更新记录

1.0.0（2026-08-11）

首次发布。支持双屏异显、主副屏双向通讯、副屏检测、SSL兼容。

平台兼容性

uni-app(3.8.6)

uni-app x(3.8.6)

WB-双屏异显异触插件 (WB-MultiScreen)

Android 双屏异显异触原生插件，支持主副屏相互通讯。适用于安卓收银机、POS 机等双屏设备。

功能特性

• 双屏异显：在副屏上独立显示 WebView 内容（本地 HTML 或远程 URL）
• 双向通讯：主屏 ↔ 副屏实时数据传输
• 多 URL 支持：副屏可加载 http/https 远程页面或本地 hybrid/html 文件
• 副屏检测：自动检测副屏是否可用，获取副屏分辨率等信息
• 生命周期管理：Activity 销毁时自动关闭副屏，避免内存泄漏
• SSL 兼容：支持自签名证书（收银机内网环境常用）
• 轻量稳定：仅依赖 WebView + Presentation，无多余三方库

平台要求

• Android：minSdkVersion 21+（Android 5.0+）
• HBuilderX：3.6.0+
• 设备要求：具有双屏输出的 Android 设备（如收银机、POS 机）

安装

在 HBuilderX 中通过插件市场安装，或使用自定义基座本地打包。

使用方法

1. 获取插件模块

const multiScreen = uni.requireNativePlugin('WB-MultiScreen');

2. 打开副屏

// 加载远程 URL
multiScreen.openSecondScreen({
  url: 'https://www.example.com'
}, res => {
  console.log(res.success, res.message);
});

// 加载本地 hybrid HTML
multiScreen.openSecondScreen({
  url: plus.io.convertLocalFileSystemURL('/hybrid/html/index.html')
}, res => {
  console.log(res.success, res.message);
});

3. 主屏向副屏发送数据

multiScreen.sendDataToSecondScreen({
  data: 'Hello from main screen'
}, res => {
  console.log(res.success, res.message);
});

// 也可以发送 JSON 对象
multiScreen.sendDataToSecondScreen({
  data: JSON.stringify({ type: 'order', amount: 99.5 })
}, res => {
  console.log(res.success);
});

4. 接收副屏数据

在页面 onLoad 中注册全局事件监听：

onLoad() {
  plus.globalEvent.addEventListener('receiveData', e => {
    console.log('收到副屏数据:', e.data);
    uni.showToast({
      icon: 'none',
      title: '收到副屏数据: ' + e.data
    });
  });

  // 页面加载完成事件
  plus.globalEvent.addEventListener('secondScreenPageFinished', e => {
    console.log('副屏页面加载完成:', e.url);
  });

  // 页面加载失败事件
  plus.globalEvent.addEventListener('secondScreenPageError', e => {
    console.error('副屏页面加载失败:', e.errorCode, e.description);
  });
}

5. 关闭副屏

multiScreen.closeSecondScreen({}, res => {
  console.log(res.success, res.message);
});

6. 检查副屏可用性

multiScreen.isSecondScreenAvailable(res => {
  console.log('副屏可用:', res.available, '显示器数量:', res.displayCount);
});

7. 获取副屏信息

multiScreen.getSecondScreenInfo(res => {
  console.log('显示器列表:', res.displays);
  console.log('副屏已开启:', res.isOpen);
  console.log('当前URL:', res.currentUrl);
});

副屏 HTML 页面开发

副屏页面通过 window.lyjsdk 对象与主屏通讯：

副屏接收主屏数据

// 定义 receiveData 函数接收主屏数据
window.receiveData = function(data) {
  console.log('收到主屏数据:', data);
  // 更新副屏 UI
  document.getElementById('content').innerText = data;
};

副屏向主屏发送数据

// 通过 lyjsdk.sendToFirstScreen 发送
function sendToMain() {
  window.lyjsdk.sendToFirstScreen('Hello from second screen');
}

获取副屏信息

// 获取副屏屏幕信息
const info = JSON.parse(window.lyjsdk.getScreenInfo());
console.log(info.width, info.height);

API 参考

方法

回调格式

所有回调返回统一格式：

{
  "success": true,
  "message": "操作描述"
}

全局事件

副屏 JS 桥接 API

权限说明

技术原理

1. 使用 Android DisplayManager 获取副屏 Display 对象
2. 创建 Presentation 在副屏上显示内容
3. Presentation 内嵌 WebView 加载指定 URL
4. 主屏→副屏：通过 WebView.evaluateJavascript() 调用 window.receiveData()
5. 副屏→主屏：通过 @JavascriptInterface 注入的 lyjsdk 对象，触发 fireGlobalEvent

常见问题

Q: 打开副屏提示 "No secondary display found"？

确保设备已连接副屏，且副屏处于活跃状态。可调用 isSecondScreenAvailable 检查。

Q: 副屏 HTML 页面无法加载本地文件？

本地文件需放在 hybrid/html/ 目录下，并使用 plus.io.convertLocalFileSystemURL() 转换路径。

Q: 副屏 HTTPS 页面证书报错？

插件已默认允许自签名证书。如仍报错，检查网络连接和证书配置。

Q: 如何在副屏使用 Vue/React 开发？

正常开发前端项目，打包后将 HTML/JS/CSS 放入 hybrid/html/ 目录即可。副屏就是一个完整的 WebView 环境。

版本历史

1.0.0

• 初始版本
• 支持双屏异显、双向通讯
• 支持远程 URL 和本地 HTML
• 支持副屏检测和信息获取

License

MIT