虎牙开放平台文档

引导当前观众订阅当前主播（hyExt.context.leadSubscribe）
获取当前观众订阅状态（hyExt.context.getSubscribeInfo）
获取当前主播订阅概况（hyExt.context.getSubscriberSummary）
监听当前主播订阅变化消息（hyExt.context.onSubscriberChange）
取消监听当前主播订阅变化消息（hyExt.context.offSubscriberChange）

注意：以上SDK在不同终端的是使用权限并不完全相同，具体适用终端可查看对应的SDK说明。

为了更好地理解相关的订阅功能，下面我们将会创建一个示例小程序来体验订阅的基本使用。

准备工作

参考创建小程序项目，初始化一个小程序项目，其中小程序类型选择：

虎牙直播主站-面板
虎牙直播APP-面板
虎牙助手APP-面板
PC主播端-面板
PC观众端-面板

参考创建小程序，创建一个小程序和创建一个开发版本。

新增示例组件

新增src/components/demo1.js和src/components/demo1.hycss文件以及src/components/demo2.js和src/components/demo2.hycss文件

新增src/components/demo1.js文件

import { UI } from '@hyext/hy-ui'
import React, { useState } from 'react'
import './demo1.hycss'
const { View, Text, Button } = UI

export const DemoFirst = () => {
  let [result, setResult] = useState('');

  //引导当前观众订阅当前主播
  function handleLeadSubscribe() {
    hyExt.context.leadSubscribe().then(() => {
      /** 引导成功 */
      setResult('leadSubscribe引导成功')
    }).catch(err => {
      /** 引导失败 */
      setResult('leadSubscribe引导失败' + err)
    })
  }

  //获取当前观众订阅状态
  function handleGetSubscribeInfo() {
    hyExt.context.getSubscribeInfo().then(isSubscribed => {
      /** 获取成功 */
      setResult("getSubscribeInfo获取成功" + isSubscribed)
    }).catch(err => {
      /** 获取失败 */
      setResult('getSubscribeInfo获取失败' + err)
    })
  }


  return (
    <View className="container">
      <Button type='success' onPress={handleLeadSubscribe}>leadSubscribe引导当前观众订阅当前主播</Button>
      <Button type='primary' onPress={handleGetSubscribeInfo}>getSubscribeInfo获取当前观众订阅状态</Button>
      <Text>{result}</Text>
    </View>
  )

}

新增src/components/demo1.hycss文件

.container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

新增src/components/demo2.js文件

import { UI } from '@hyext/hy-ui'
import React, { useState } from 'react'
import './demo2.hycss'
const { View, Text, Button } = UI

export const DemoSecond = () => {
  let [result, setResult] = useState('');

  //获取当前主播订阅概况
  function handleGetSubscriberSummary() {
    hyExt.context.getSubscriberSummary().then(subscribeSummary => {
      const subscribeCount = subscribeSummary.subscribeCount;
      setResult('getSubscriberSummary获取成功，当前主播订阅人数为' + subscribeCount)
    }).catch(err => {
      /** 调用失败 */
      setResult('getSubscriberSummary获取失败' + err)
    })
  }

  //监听当前主播订阅变化消息
  function handleOnSubscriberChange() {
    var list = [];
    hyExt.context.onSubscriberChange({}, (subscriberList) => {
      /** 监听函数回调 */
      list = subscriberList
      setResult('当前的订阅用户列表为' + JSON.stringify(list))
    }).then(() => {
      /** 监听成功 */
      setResult('onSubscriberChange监听成功')
    }).catch(err => {
      /** 监听失败 */
      setResult('onSubscriberChange监听失败' + err)
    })
  }

  //取消监听当前主播订阅变化消息
  function handleOffSubscriberChange() {
    hyExt.context.offSubscriberChange().then(() => {
      /** 调用成功 */
      setResult('offSubscriberChange取消监听成功')
    }).catch(err => {
      /** 调用失败 */
      setResult('offSubscriberChange取消监听失败' + err)
    })
  }

  return (
    <View className="container">
      <Button type='info' onPress={handleGetSubscriberSummary}>getSubscriberSummary获取当前主播订阅概况</Button>
      <Button type='warning' onPress={handleOnSubscriberChange}>onSubscriberChange监听当前主播订阅变化消息</Button>
      <Button type='danger' onPress={handleOffSubscriberChange}>offSubscriberChange取消监听当前主播订阅变化消息</Button>
      <Text>{result}</Text>
    </View>
  )
}

新增src/components/demo2.hycss文件

.container {
  flex: 1;
}

在小程序中使用组件

修改viewer/app.js：

--- a/viewer/app.js
+++ b/viewer/app.js
@@ -1,13 +1,13 @@
 import { UI } from '@hyext/hy-ui'
 import React, { Component } from 'react'
 import './app.hycss'
-
-const { View, Text } = UI
+import { DemoFirst } from '../src/components/demo1'
+const { View } = UI
 
 class App extends Component {
-  render () {
+  render() {
     return (
-      <View className="container"><Text>hello world</Text></View>
+      <View className="container"><DemoFirst></DemoFirst></View>
     )
   }
 }

修改streamer/app.js：

--- a/streamer/app.js
+++ b/streamer/app.js
@@ -1,13 +1,15 @@
 import { UI } from '@hyext/hy-ui'
 import React, { Component } from 'react'
 import './app.hycss'
-
-const { View, Text } = UI
+import { DemoSecond } from '../src/components/demo2'
+const { View } = UI

 class App extends Component {
-  render () {
+  render() {
     return (
-      <View className="container"><Text>hello world</Text></View>
+      <View className="container">
+        <DemoSecond></DemoSecond>
+      </View>
     )
   }
 }