更新记录

1.0.5（2025-03-20）

1. 增加异屏显示H5,并与之通讯

1.0.4（2023-11-30）

1. 修复Android新版本基座uts语法兼容性问题

1.0.3（2023-10-27）

修复新版本基座Android编译问题

平台兼容性

uni-app

uni-app x

多屏双屏、同显、通讯、自定义异屏内容

主要功能

• 多屏双屏异显
• 主副屏同显
• 主副屏同显通讯
• 副屏自定义UI

集成步骤：

• 插件集成步骤参考https://www.cnblogs.com/wenrisheng/p/18323027集成本插件到项目里
• 点击插件网页右上角的“试用”按钮将插件下载到自己的项目
• 下载示例demo，将demo根目录下的AndroidManifest.xml拷贝到自己项目的根目录,HBuilderx导入demo的时候选vue3(插件支持vue2、vue3、uniapp、uniappX)
• 删除本地基座和设备上的app
• 重新自定义基座运行

UI控件

• 定义异屏内容，页面要用nvue

        <wrs-uts-differentscreen ref="differentscreen">
            <view style="screenContent">
                <text>{{txt}}</text>
                <button @click="login">登录</button>
            </view>
        </wrs-uts-differentscreen>

• 内容显示到异屏上

                let displaysIndex = 0 // 显示到第几个屏幕上
                this.$refs.differentscreen.showDisplay(displaysIndex)

接口

import {
    getDisplaysNum,
    UTSDifferentScreen
} from "@/uni_modules/wrs-uts-differentscreen"

• 设置回调

UTSDifferentScreen.onCallback((resp) => {
    this.showMsg(JSON.stringify(resp))
    let opt = resp.opt
    switch (opt) {
        case "onJSData":
            {
                let data = resp.data
                this.showMsg("收到H5消息：" + data)
            }
            break;

        default:
            break;
    }
})

• 获取异屏数量

let num = getDisplaysNum()
this.showMsg("屏幕数量:" + num)

• 设置其他屏幕的H5链接

var localUrl = plus.io.convertLocalFileSystemURL('_www/static/loginSys/index.html');
let params = {}
// params.url = "https://www.baidu.com"
params.url = localUrl
var index = 0 // 第几个屏幕
UTSDifferentScreen.showH5(params, index)

• 发送消息给其他屏幕(即调用其他屏幕H5的js函数)

注意这里的js函数需要挂载到Windows下，成为全局函数才能被调用，如： windows["add"] = function (a, b) { return a + b }

let num = getDisplaysNum()
let items = []
for (let i = 0; i < num; i++) {
    items.push("第" + i + "个屏幕")
}
this.showActionSheet(items, (index) => {
    var funParams = {};
    funParams.a = 1;
    funParams.b = 2;
    let js = "add(" + JSON.stringify(funParams) + ")";

    UTSDifferentScreen.sendDataToJS(js, index, (str) => {
        console.log("sendDataToJS:" + str)
    });
})

• 设置其他屏幕跟主屏同屏

let num = getDisplaysNum()
let items = []
for (let i = 0; i < num; i++) {
    items.push("第" + i + "个屏幕")
}
this.showActionSheet(items, (index) => {
    UTSDifferentScreen.sameScreen(index)
})