使用方法

安卓双屏异显UTS原生插件支持副屏使用vue组件而无需加载h5页面，一般用于收银机、广告机、车载双屏、外接显示器 / 电视等双屏设备，插件支持uniapp和uniapp x，支持vue2和vue3的选项式和组合式

插件使用注意事项

• 如果您在使用插件的过程中有任何问题，可以联系作者，作者将全力协助您只用插件
• 本文档同时提供了uniapp的用法示例和uniappx的用法示例，插件市场导入的示例项目仅为uniapp的用法示例，如果您需要uniappx的示例项目可以通过下方的链接下载示例

  https://pan.baidu.com/s/1nxpGBVZbhrs21ZATkhtKIw?pwd=9y5t

联系作者

关注微信公众号可联系作者

插件地址

https://ext.dcloud.net.cn/plugin?id=27705

用法

在需要使用插件的页面加载以下代码

uniapp

import * as module from "@/uni_modules/leven-uts-display"

uniappx

import * as module from "@/uni_modules/leven-uts-display"

页面内容

uniapp

<template>
  <view class="content">
    <lux-card title="安卓双屏异显UTS原生插件">
      <button type="primary" @click="getDisplaysCount">获取屏幕数量</button>
      <button type="primary" @click="registerDisplayListener">监听副屏状态</button>
      <button type="primary" @click="unregisterDisplayListener">取消监听副屏状态</button>
      <button type="primary" @click="show">显示副屏内容</button>
      <button type="primary" @click="close">关闭副屏显示</button>
      <button type="primary" @click="updateDisplayContent">更新副屏内容</button>
    </lux-card>
    <view>
      <!-- 副屏组件 -->
      <leven-uts-display ref="refPresentation" class="display-style" :config="config" @onEventMethod="onEventMethod">
        <view>
          <button type="primary" @click="clickButton">副屏按钮</button>
        </view>
        <view>
          <text style="font-size: 18px; color: brown;">{{title}}</text>
        </view>
      </leven-uts-display>
    </view>
</template>

<script>
  import * as module from "@/uni_modules/leven-uts-display"
  export default {
    data() {
      return {
        title: '副屏文本内容'
      }
    },
    onLoad() {

    },
    methods: {
      //点击副屏按钮
      clickButton() {
        uni.showToast({
          title: "点击了副屏按钮",
          icon: "none"
        })
      },
      //显示副屏内容
      show() {
        this.$refs.refPresentation.show({
          display: 1
        })
      },
      //关闭副屏显示
      close() {
        this.$refs.refPresentation.close()
      },
      //更新副屏内容
      updateDisplayContent() {
        this.title = "更新后的内容";
      },
      //取消监听副屏状态
      unregisterDisplayListener() {
        module.unregisterDisplayListener({
          complete: (res) => {
            console.log(res)
          }
        })
      },
      //监听副屏状态
      registerDisplayListener() {
        module.registerDisplayListener({
          complete: (res) => {
            console.log(res)
          }
        })
      },
      //获取屏幕数量
      getDisplaysCount() {
        module.getDisplaysCount({
          complete: (res) => {
            console.log(res)
          }
        })
      },
      //事件
      onEventMethod(e) {
        console.log(e.detail)
      }
    }
  }
</script>

<style>
  .display-style {
    flex: 1;
    background-color: chocolate;
  }
</style>

uniappx

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <lux-card title="安卓双屏异显UTS原生插件">
      <button type="primary" @click="getDisplaysCount">获取屏幕数量</button>
      <button type="primary" @click="registerDisplayListener">监听副屏状态</button>
      <button type="primary" @click="unregisterDisplayListener">取消监听副屏状态</button>
      <button type="primary" @click="show">显示副屏内容</button>
      <button type="primary" @click="close">关闭副屏显示</button>
      <button type="primary" @click="updateDisplayContent">更新副屏内容</button>
    </lux-card>
    <view>
      <!-- 副屏组件 -->
      <leven-uts-display ref="refPresentation" class="display-style" :configX="config" @onEventMethod="onEventMethod">
        <view>
          <button type="primary" @click="clickButton">副屏按钮</button>
        </view>
        <view>
          <text style="font-size: 18px; color: brown;">{{title}}</text>
        </view>
      </leven-uts-display>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts" setup>
  import JSONObject from 'com.alibaba.fastjson.JSONObject'
  import * as module from "@/uni_modules/leven-uts-display"

  //组件引用
  const refPresentation = ref<LevenUtsDisplayElement | null>(null)

  //默认配置
  const config = ref({})
  const title = ref("副屏文本内容")

  //副屏按钮点击
  function clickButton() {
    uni.showToast({
      title: "点击了副屏按钮",
      icon: "none"
    })
  }

  //更新副屏内容
  function updateDisplayContent() {
    title.value = "更新后的内容";
  }

  //关闭副屏
  function close() {
    refPresentation.value?.close();
  }

  //显示副屏
  function show() {
    let options = {
      display: 1
    };
    let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPresentation.value?.show(params);
  }

  //取消监听副屏状态
  function unregisterDisplayListener() {
    module.unregisterDisplayListener({
      complete: (res) => {
        console.log(res)
      }
    })
  }

  //监听副屏状态
  function registerDisplayListener() {
    module.registerDisplayListener({
      complete: (res) => {
        console.log(res)
      }
    })
  }

  //获取屏幕数量
  function getDisplaysCount() {
    module.getDisplaysCount({
      complete: (res) => {
        console.log(res)
      }
    })
  }

  //事件监听
  function onEventMethod(e : JSONObject) {
    console.log(e)
  }
</script>

<style>
  .display-style {
    flex: 1;
    background-color: chocolate;
  }
</style>