图文直播

本文档主要描述如何接入互动功能接收端的图文直播组件，接入后可实现观众端显示图文直播内容。

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：互动功能接收端 UI 组件 - 配置 SDK。

引入

在线文件引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileTuwen/MobileTuwen.umd.min.js"></script>
<script>
    const MobileTuwen = window.PolyvIRScene.MobileTuwen.default;
</script>

import 方式引入（推荐）

import MobileTuwen from '@polyv/interactions-receive-sdk-ui-default/lib/MobileTuwen';

代码示例

先实例化SDK，然后将其传入到图文直播组件中，以便内部进行相应逻辑处理。

以 PC 端接入为例：

<template>
  <div id="tuwenContain" class="plv-demo-tuwen">
    <!-- 参考切换图文和图片模式的 demo代码，具体样式可按实际要求设计 -->
    <button @click="changeType(1)">图文模式</button>
    <button @click="changeType(2)">图片模式</button>
    <div v-show="messageTotal > 0" class="plv-ia-tuwen-top">
      <div class="plv-ia-tuwen-top__tip"> 共 {{ messageTotal }} 图文直播</div>
    </div>
    <Tuwen
        ref="tuwen"
        scroll-container="tuwenContain"
        :tuwen-sdk="TuwenSdk"
        :mode="mode"
        :lang="lang"
        :scroll-distance="scrollDistance"
        :disable-preview="isWeChatPreview"
        @change-message-total="changeMessageTotal"
        @show-preview="showPreview"
    />
  </div>
</template>

<script>
import { Tuwen } from '@polyv/interactions-receive-sdk';
import PcTuwen from '@polyv/interactions-receive-sdk-ui-default/lib/PcTuwen';

export default {
  components: {
    Tuwen: PcTuwen,
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // 图文直播 SDK 实例
      TuwenSdk: null,
      mode: 1,
      messageTotal: 0,
      // 滚动底部距离阈值, 触发滚动加载
      scrollDistance: 200
    };
  },
  computed: {
    // 判断是否在手机微信环境下，且配置wx可以使用微信图片预览功能，否则使用内部图片预览功能
    isWeChatPreview() {
      // TODO 参考代码
      // return isMobile() && isWeixin() && window.wx
    }
  },

  created() {
    this.TuwenSdk = new Tuwen();
  },

  beforeDestroy() {
    this.TuwenSdk?.destroy();
  },

  methods: {
    changeType(val) {
      this.mode = val;
    },
    changeMessageTotal(val) {
      this.messageTotal = val;
    },
    // 微信环境下，使用 wx 图片预览功能体验更好。
    async showPreview(arg) {
      const { images, index } = arg;
      if (this.isWeChatPreview) {
        wx && wx.previewImage({
          urls: images,
          current: images[index]
        });
      }
    }
  }
};
</script>

<style lang="scss">
.plv-demo-tuwen {
  padding: 0 16px;
  height: 1600px;
  overflow-y: scroll;
}
.plv-ia-tuwen-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 16px;
  .plv-ia-tuwen-tip {
    font-size: 12px;
    color: #aaa;
  }
}
</style>

Attributes

属性名	类型	默认值	含义
tuwenSdk	Object	null	图文直播 SDK 实例
tuwenContain	String	''	图文直播滚动容器id，用于监听滚动加载
lang	string：'zh_CN', 'en'	'zh_CN'	语言
mode	Number：0, 1	1	展示模式：1为图文，2为图片
disable-preview	Boolean	false	是否禁用图片预览功能
scroll-distance	Number	200	触发加载的距离阈值

Events

事件名	参数类型	参数含义	说明
change-message-total	number	总消息条数	显示总条数
show-preview	{ images: [], index }	images: 图片列表; index: 需要展示图片的下标	用于外部实现图片预览功能，如微信图片预览