虎牙开放平台文档

守护事件

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

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

监听开通守护（hyExt.context.onOpenGuardianNotice）
关闭监听开通守护（hyExt.context.offOpenGuardianNotice）

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

准备工作

创建小程序

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

虎牙直播主站-面板
虎牙直播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 handleOnOpenGuardianNotice() {
    hyExt.context.onOpenGuardianNotice({
      callback: (payload) => {
        /** 监听回调函数 */
        setResult('onOpenGuardianNotice监听回调函数，拿到的信息为' + JSON.stringify(payload))
      }
    }).then(() => {
      /** 调用成功 */
      setResult("onOpenGuardianNotice调用成功")
    }).catch(err => {
      /** 调用失败 */
      setResult("onOpenGuardianNotice调用失败，原因是" + JSON.stringify(err))
    })
  }

  // 关闭监听开通守护
  function handleOffOpenGuardianNotice() {
    hyExt.context.offOpenGuardianNotice().then(() => {
      /** 关闭成功 */
      setResult("offOpenGuardianNotice关闭成功")
    }).catch(err => {
      /** 关闭失败 */
      setResult("offOpenGuardianNotice关闭失败，原因是" + JSON.stringify(err))
    })
  }

  return (
    <View>
      <Button className='button' onPress={handleOnOpenGuardianNotice}>监听开通守护onOpenGuardianNotice</Button>
      <Button className='button' onPress={handleOffOpenGuardianNotice}>关闭监听开通守护offOpenGuardianNotice</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/guard-event/viewer/app.js
+++ b/examples/guard-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>
     )
   }
 }