# dual-screen

**Repository Path**: lu-my/dual-screen

## Basic Information

- **Project Name**: dual-screen
- **Description**: uniapp安卓原生插件，支持双屏异显、主副屏通讯、工控机双屏控制
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-16
- **Last Updated**: 2026-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dual-Screen Plugin for UniApp

## 项目结构

```
dual-screen/
├── README.md                    # 本说明文件
├── dual-screen/                 # 离线打包 UTS 插件配置（用于 uni_modules）
│   ├── src/main/java/          # UTS 源码
│   │   ├── index.kt           # 入口文件
│   │   └── hybrid.kt          # 核心逻辑
│   └── build.gradle           # Gradle 构建配置
├── uniplugin_module/           # 原生模块源码（编译后生成 AAR）
│   ├── src/main/java/         # Java/Kotlin 源码
│   │   └── DualScreenModule.java
│   └── build.gradle
└── uni-dual-screen/            # UniApp Demo 项目
    ├── uni_modules/           # UTS 插件源码
    ├── pages/                # 页面
    ├── hybrid/                # 副屏 HTML 资源
    └── nativePlugins/        # 离线打包的 AAR 插件
```

### 目录说明

| 目录                | 说明                                       |
| ------------------- | ------------------------------------------ |
| `dual-screen/`      | UTS 插件离线打包配置                       |
| `uniplugin_module/` | 原生模块源码，编译后生成 `dual-screen.aar` |
| `uni-dual-screen/`  | UniApp Demo 项目，包含插件使用示例         |

## 插件介绍

为 UniApp 开发的 Android 原生插件，用于实现工控机双屏显示功能。支持主屏控制副屏开关、主副屏双向通讯、副屏显示自定义内容（URL 网页或本地 HTML）。

## 功能特性

- ✅ 双屏检测与管理
- ✅ 主屏控制副屏开关
- ✅ 主副屏双向消息通讯
- ✅ 副屏显示 URL 网页
- ✅ 副屏显示内联 HTML
- ✅ 副屏显示本地 HTML 文件

## 安装方法

### 1. 离线打包方式（推荐）

将 `uni-dual-screen/uni_modules` 目录复制到你的 UniApp 项目中。

### 2. 配置 manifest.json

在 `manifest.json` 中添加插件配置：

```json
{
  "app-plus": {
    "nativePlugins": {
      "dual-screen": {
        "type": "module"
      }
    }
  }
}
```

### 3. 打包自定义基座

在 HBuilderX 中选择 `运行` → `运行到手机或模拟器` → `制作自定义调试基座`，勾选 `dual-screen` 插件后打包。

> 插件无需额外声明权限，UniApp 默认已包含所需权限。

### 4. 修改源码后重新打包

```powershell
cd dual-screen
$env:JAVA_HOME="C:\Users\lumengyu\.jdks\temurin-24"
.\gradlew assembleRelease
```

产物路径：`uniplugin_module/build/outputs/aar/dual-screen.aar`

## API 方法

### getDisplays()

获取所有显示器列表。

```javascript
const result = dualScreen.getDisplays();
// 返回: { code: "success", displays: [{ displayId, name, isPrimary }] }
```

### showSecondaryScreen(options)

打开副屏并显示内容。返回 Promise，结果的 code 属性表示成功或失败。

| 参数  | 类型   | 说明                                 |
| ----- | ------ | ------------------------------------ |
| url   | String | 网页 URL                             |
| html  | String | 内联 HTML 内容                       |
| asset | String | 本地 HTML 路径（相对于 hybrid 目录） |

```javascript
// 方式1：打开网址
const result = await dualScreen.showSecondaryScreen({
  url: "https://www.baidu.com",
});
if (result.code === "success") {
  console.log("副屏已打开");
} else {
  console.log("打开失败:", result.message);
}

// 方式2：内联 HTML
const result = await dualScreen.showSecondaryScreen({
  html: "<h1>副屏内容</h1>",
});

// 方式3：本地 HTML 文件（hybrid/html/ad.html）
const result = await dualScreen.showSecondaryScreen({ asset: "html/ad.html" });
```

### hideSecondaryScreen()

关闭副屏。

```javascript
await dualScreen.hideSecondaryScreen();
```

### sendMessageToSecondary(options)

向副屏发送消息。

```javascript
await dualScreen.sendMessageToSecondary({ message: "Hello!" });
```

## 事件监听

```javascript
// 监听副屏消息
plus.globalEvent.addEventListener("onSecondaryScreenMessage", (e) => {
  console.log("收到副屏消息:", e.message);
});

// 监听显示器变化
plus.globalEvent.addEventListener("onDisplayChange", () => {
  this.getDisplays();
});

// 监听副屏页面加载完成
plus.globalEvent.addEventListener("onSecondaryScreenLoaded", (e) => {
  console.log("副屏加载完成:", e);
});

// 移除监听（onUnload 中调用）
plus.globalEvent.removeEventListener(
  "onSecondaryScreenMessage",
  this.handleMessage,
);
```

## 使用示例

```vue
<template>
  <view class="container">
    <text class="title">双屏控制</text>

    <button @click="getDisplays">刷新显示器</button>
    <view v-for="d in displays" :key="d.displayId">
      <text>{{ d.name }} ({{ d.isPrimary ? "主屏" : "副屏" }})</text>
    </view>

    <button @click="openUrl">打开网址</button>
    <button @click="openLocalHtml">打开本地HTML</button>
    <button @click="closeSecondary">关闭副屏</button>

    <text>收到消息: {{ received }}</text>
  </view>
</template>

<script>
const dualScreen = uni.requireNativePlugin("dual-screen");

export default {
  data() {
    return { displays: [], received: "" };
  },
  onLoad() {
    plus.globalEvent.addEventListener("onSecondaryScreenMessage", (e) => {
      this.received = e.message;
    });
    this.getDisplays();
  },
  onUnload() {
    plus.globalEvent.removeEventListener("onSecondaryScreenMessage", () => {});
    dualScreen.hideSecondaryScreen();
  },
  methods: {
    async getDisplays() {
      const result = dualScreen.getDisplays();
      this.displays = result.displays || [];
    },
    async openUrl() {
      const result = await dualScreen.showSecondaryScreen({
        url: "https://www.baidu.com",
      });
      if (result.code !== "success") {
        uni.showToast({ title: result.message, icon: "none" });
      }
    },
    async openLocalHtml() {
      const result = await dualScreen.showSecondaryScreen({
        asset: "html/ad.html",
      });
      if (result.code !== "success") {
        uni.showToast({ title: result.message, icon: "none" });
      }
    },
    async closeSecondary() {
      await dualScreen.hideSecondaryScreen();
    },
  },
};
</script>
```

## 本地 HTML 文件结构

```
你的UniApp项目/
├── hybrid/
│   └── html/
│       └── ad.html    # 副屏 HTML 文件
├── pages/
└── manifest.json
```

## 副屏 HTML 示例

副屏 HTML 文件放在 `hybrid/html/ad.html`，支持接收/发送消息：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>副屏广告</title>
    <style>
      body {
        margin: 0;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: #fff;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      h1 {
        color: #00d9ff;
        font-size: 48px;
      }
      #msgs {
        margin-top: 30px;
        width: 80%;
      }
      #msgs p {
        font-size: 32px;
        background: rgba(0, 0, 0, 0.2);
        padding: 15px;
        margin: 10px 0;
        border-radius: 8px;
      }
      #sendBtn {
        margin-top: 30px;
        padding: 15px 40px;
        background: linear-gradient(135deg, #007aff, #5856d6);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 28px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>副屏广告区域</h1>
    <div id="msgs"></div>
    <button id="sendBtn">发送消息给主屏幕</button>

    <script>
      // 接收主屏消息
      window.receiveMessageFromPrimary = function (message) {
        var p = document.createElement("p");
        p.textContent = "收到: " + message;
        document.getElementById("msgs").appendChild(p);
      };

      // 发送消息到主屏
      document.getElementById("sendBtn").addEventListener("click", function () {
        var msg = "来自副屏 " + new Date().toLocaleTimeString();
        if (window.uniWebView) {
          window.uniWebView.replyMessage(JSON.stringify({ message: msg }));
          var p = document.createElement("p");
          p.style.background = "rgba(0,122,255,0.3)";
          p.textContent = "发送: " + msg;
          document.getElementById("msgs").appendChild(p);
        }
      });
    </script>
  </body>
</html>
```

## 注意事项

1. **自定义基座**：必须使用自定义调试基座，普通 H5 预览无法使用插件
2. **设备支持**：需要设备支持多显示器输出（工控机、支持 Miracast 等）
3. **hybrid 目录**：本地 HTML 文件必须放在 `hybrid/html/` 目录下
4. **路径说明**：调用时路径为 `html/ad.html`（相对于 hybrid 目录）
5. **内存管理**：页面卸载时移除事件监听并关闭副屏

## 更新日志

### v1.0.0

- 初始版本发布
- 支持双屏检测与管理
- 支持主副屏双向消息通讯
- 支持 URL、内联 HTML、本地 HTML 页面显示