虎牙开放平台文档

高级用户进场事件

本章节介绍虎牙小程序的高级用户进场事件模块，方便进行与此相关的处理。

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

监听高级用户进场（hyExt.context.onVipEnterBannerNotice）
取消监听高级用户进场（hyExt.context.offVipEnterBannerNotice）

为了更好地理解相关的高级用户进场事件功能，下面我们将会创建一个示例小程序来体验此事件的基本使用。

准备工作

创建小程序

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

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

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

小程序权限

小程序开发过程中，如果遇到SDK接口提示没有权限相关的问题，可以参考守护事件的小程序处理方法。

新增示例组件

新增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 handleOnVipEnterBannerNotice() {
    hyExt.context.onVipEnterBannerNotice({
      callback: (payload) => {
        /** 监听回调函数 */
        setResult('onVipEnterBannerNotice监听回调函数，拿到的信息为' + JSON.stringify(payload))
      }
    }).then(() => {
      /** 调用成功 */
      setResult("onVipEnterBannerNotice调用成功")
    }).catch(err => {
      /** 调用失败 */
      setResult("onVipEnterBannerNotice调用失败，原因是" + JSON.stringify(err))
    })
  }

  // 取消监听高级用户进场
  function handleOffVipEnterBannerNotice() {
    hyExt.context.offVipEnterBannerNotice().then(() => {
      /** 关闭成功 */
      setResult("offVipEnterBannerNotice关闭成功")
    }).catch(err => {
      /** 关闭失败 */
      setResult("offVipEnterBannerNotice关闭失败，原因是" + JSON.stringify(err))
    })
  }

  return (
    <View>
      <Button className='button' onPress={handleOnVipEnterBannerNotice}>监听高级用户进场onVipEnterBannerNotice</Button>
      <Button className='button' onPress={handleOffVipEnterBannerNotice}>关闭监听高级用户进场offVipEnterBannerNotice</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/vip-event/viewer/app.js
+++ b/examples/vip-event/viewer/app.js
@@ -1,13 +1,16 @@
 import { UI } from '@hyext/hy-ui'
 import React, { Component } from 'react'
+import Demo from '../src/demo'
 import './app.hycss'
 
 const { View, Text } = UI
 
 class App extends Component {
-  render () {
+  render() {
     return (
-      <View className="container"><Text>hello world</Text></View>
+      <View className="container">
+        <Demo></Demo>
+      </View>
     )
   }
 }