虎牙开放平台文档

礼物

本章节介绍虎牙小程序的礼物模块，方便进行与礼物相关的处理。

开发者可以使用小程序基础库中的hyExt.context中的以下方法做相关的礼物管理：

引导当前观众送礼（hyExt.context.leadGift）
监听当前直播间礼物变化消息（hyExt.context.onGiftChange）
取消监听当前直播间礼物变化消息（hyExt.context.offGiftChange）
获取当前直播间礼物配置（hyExt.context.getGiftConf）
当前观众送礼（hyExt.context.sendGift）

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

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

准备工作

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

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

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

新增示例组件

新增src/demo.js和src/demo.hycss文件

新增src/demo.js文件

import { UI } from '@hyext/hy-ui'
import React, { useState } from 'react'
import './demo.hycss'

const { View, Text, Button } = UI

const Demo = (props) => {
  var [result, setResult] = useState('')

  // 引导当前观众送礼
  function handleLeadGift() {
    hyExt.context.leadGift().then(() => {
      /** 引导成功 */
      setResult('引导当前观众送礼leadGift引导成功')
    }).catch(err => {
      /** 引导失败 */
      setResult('引导当前观众送礼leadGift引导失败，原因是' + JSON.stringify(err))
    })
  }

  // 监听当前直播间礼物变化消息
  function handleOnGiftChange() {
    hyExt.context.onGiftChange({ sendNick: "huya_sendNick" }, (giftInfo) => {
      /** 监听礼物回调信息 */
      setResult('onGiftChange监听礼物回调信息:' + JSON.stringify(giftInfo))
    }).then(() => {
      /** 监听礼物成功 */
      setResult('onGiftChange监听礼物成功')
    }).catch(err => {
      /** 监听礼物失败 */
      setResult('onGiftChange监听礼物失败，原因是' + JSON.stringify(err))
    })
  }

  // 取消监听当前直播间礼物变化消息
  function handleOffGiftChange() {
    hyExt.context.offGiftChange().then(() => {
      /** 取消监听成功 */
      setResult('offGiftChange取消监听成功')
    }).catch(err => {
      /** 取消监听失败 */
      setResult('offGiftChange取消监听失败，原因是' + JSON.stringify(err))
    })
  }

  // 获取当前直播间礼物配置
  function handleGetGiftConf() {
    hyExt.context.getGiftConf().then(giftConfig => {
      /** 调用成功 */
      setResult('getGiftConf调用成功，获取当前直播间礼物配置（这里为了方便，只获取其一）：' + JSON.stringify(giftConfig[0]))
    }).catch(err => {
      /** 调用失败 */
      setResult('getGiftConf调用失败，原因是' + JSON.stringify(err))
    })
  }

  // 当前观众送礼
  function handleSendGift() {
    hyExt.context.sendGift({ giftId: 4, giftCount: 1 }).then(() => {
      /** 送礼成功 */
      setResult('sendGift送礼成功')
    }).catch(err => {
      /** 送礼失败 */
      setResult('sendGift送礼失败，原因是' + JSON.stringify(err))
    })
  }

  return (
    <View>
      <Button className='button' onPress={handleLeadGift}>引导当前观众送礼leadGift</Button>
      <Button className='button' onPress={handleOnGiftChange}>监听当前直播间礼物变化消息onGiftChange</Button>
      <Button className='button' onPress={handleOffGiftChange}>取消监听当前直播间礼物变化消息offGiftChange</Button>
      <Button className='button' onPress={handleGetGiftConf}>获取当前直播间礼物配置getGiftConf</Button>
      <Button className='button' onPress={handleSendGift}> 当前观众送礼sendGift</Button>
      <Text className='result'>结果是：{result}</Text>
    </View>
  )
}

export default Demo

新增src/demo.hycss文件

.result {
  border: 10px;
  width: 700px;

}

.button {
  width: 700px;
}

在小程序中使用组件

修改viewer/app.js：

--- a/examples/gift/viewer/app.js
+++ b/examples/gift/viewer/app.js
@@ -1,5 +1,6 @@
 import { UI } from '@hyext/hy-ui'
 import React, { Component } from 'react'
+import Demo from '../src/demo'
 import './app.hycss'

 const { View, Text } = UI
@@ -7,7 +8,9 @@ const { View, Text } = UI
 class App extends Component {
   render() {
     return (
-      <View className="container"><Text>hello world</Text></View>
+      <View className="container">
+        <Demo></Demo>
+      </View>
     )
   }
 }